آموزش MVC – استفاده از Page Inspector در ASP.NET MVC

آموزش MVC – استفاده از Page Inspector در ASP.NET MVC

Page Inspector یک ابزار جهت توسعه ی اپلیکیشن های تحت وب است که همراه مرورگر درون ساخته و پیش فرض خود در محیط جامع برنامه نویسی Visual Studio 2012 تعبیه شده. کافی است المان مدنظر خود را در مرورگر درون ساخته ی ابزار نام برده انتخاب نمایید، خواهید دید که Page Inspector بلافاصله منبع المان (کد) و CSS متناظر را برای شما هایلایت می کند. با استفاده از این ابزار می توانید به راحتی view دلخواه را پیمایش کرده و به سرعت منابع کد HTML (markup) اجرا و نمایش داده شده در مرورگر را پیدا نمایید و ابزار مرورگر را داخل همان محیط برنامه نویسی Visual Studio بکار ببرید.

ابزار مورد نیاز

• Visual Studio 2012 یا Visual Studio Express 2012 for Web

ابزار Page Inspector همراه Microsoft Web Developer Tools پکیج بندی (bundle) شده و در اختیار توسعه دهنده قرار می گیرد. آخرین ورژن 1.3 می باشد. برای کسب اطلاعات بیشتر در خصوص ورژن ابزار نام برده، محیط برنامه نویسی مورد نظر را اجرا کرده و از منوی Help، گزینه ی About Microsoft Visual Studio را انتخاب نمایید.

ساخت پروژه ی اپلیکیشن تحت وب (Web Application)

در گام نخست برای استفاده از ابزار Page Inspector، یک پروژه ی web application ایجاد نمایید. برای این منظور، در محیط ویژوال استودیو، مسیر روبرو را طی نمایید: File > New Project. در سمت چپ محیط، با کلیک بر روی گره Visual C# آن را باز نموده و پس از انتخاب گزینه ی Web، بر روی ASP.NET MVC4 Web Application کلیک نمایید.

دکمه ی OK را کلیک نمایید.

در کادر محاوره ای New ASP.NET MVC 4 Project، آیکون Internet Application را انتخاب کنید. از منوی کشویی (drop-down) view engine گزینه ی Razor را انتخاب کنید (Razor یک موتور تحت معماری برنامه نویسی MVC جهت تولید صفحات پویا می باشد).

اپلیکیشن مورد نظر در حالت نمایش کد برنامه یا به اصطلاح Source view به نمایش در می آید.

حال که کد اپلیکیشن در محیط Visual در دسترس شما قرار گرفته، می توانید با استفاده از ابزار Page Inspector آن را به طور دقیق بررسی و ویرایش نمایید.

استفاده از ابزار Page Inspector جهت پیمایش View

جهت مشاهده ی صفحه ی مورد نظر از پروژه و بررسی کد آن در محیط برنامه نویسی Visual Studio 2012، می توانید بر روی view دلخواه از پروژه ی خود راست کلیک کنید و از منویی که ظاهر می شود، گزینه ی View in Page Inspector را انتخاب نمایید. می بینید که محیط برنامه نویسی مزبور خود مسیر (route) قرار گیری view را پیدا کرده و صفحه ی متناظر را به نمایش می گذارد.

در کادر Solution Explorer، پس از کلیک بر روی View، پوشه ی Home را باز نمایید. بر روی فایل Index.cshtml راست کلیک کرده و گزینه ی View In Page Inspector را از منوی حاضر انتخاب کنید.

به صورت پیش فرض، ابزار Page Inspector به صورت یک پنجره به ناحیه ی چپ محیط Visual متصل می شود. در صورت تمایل می توانید آن را در قسمت دیگری از محیط توسعه بچسبانید و یا کلا پنجره ی مورد نظر را از حالت docked (متصل و ثابت در یک ناحیه ی خاص) خارج سازید.

کادر بالایی پنجره ی Page Inspector، صفحه ی جاری در پنجره ی مرورگر را به نمایش می گذارد. پایین ترین کادر از Page Inspector، کد HTML (HTML Markup) را به همراه تعدادی تب که امکان بررسی جنبه های مختلف صفحه ی مورد نظر را فراهم می سازد را نمایش می دهد. کادر نام برده کاربردی مشابه ابزار F12 Developer Tools در بستر مرورگر IE می باشد.

در آموزش حاضر، شما با استفاده از تب های HTML و Styles به سرعت بین کد HTML و CSS متناظر پیمایش کرده و تغییرات مورد نیاز را بر روی اپلیکیشن اعمال می کنید.

فعال سازی وضعیت بررسی کد/Inspection Mode

به منظور تنظیم ابزار Page Inspector بر روی حالت بررسی و معاینه ی دقیق کد، لازم است بر روی دکمه ی Inspect کلیک نمایید. در حالت بررسی دقیق کد (inspection mode)، زمانی که اشاره گر موس را بر روی بخش مورد نظر از صفحه ی اجرا شده در پنجره ی مرورگر معلق نگه می دارید، کد HTML متناظر یا MARKUP منبع به سرعت هایلایت می شود.

حال اشاره گر موس را بر روی بخش های مختلف صفحه داخل ابزار Page Inspector حرکت دهید. همین که اشاره گر موس را داخل Page Inspector تکان می دهید، می بینید که ظاهر آن شکل یک علامت جمع تغییر کرده، المان موجود در زیر اشاره گر نیز هایلایت می گردد:

به مجرد حرکت دادن اشاره گر موس، محیط Visual دستور (گرامر) Razor متناظر در فایل حاوی کد (source file) را هایلایت می کند. چنانچه المان HTML داخل فایل دیگری قرار داشته باشد، محیط Visual به صورت خودکار فایل میزبان را باز می کند.

در ابزار Page Inspector، تب HTML کد html ای که خروجی گرامر Razor می باشد را نشان می دهد. همین که اشاره گر موس را تکان می دهید، المان های HTML متناظر هایلایت می شوند. تب Styles دستورهای CSS که ظاهر المان ها را تنظیم می کنند، به نمایش می گذارد.

استفاده از Page Inspector جهت اعمال تغییرات بر روی کد HTML (Markup)

Page Inspector این امکان را به شما می دهد تا به المان HTML ای که پیدا کردن آن در صفحه دشوار می باشد به راحتی دسترسی داشته باشید. پس از پیدا کردن المان دلخواه، می توانید به راحتی کد HTML مربوطه را ویرایش کرده و تغییرات اعمال شده را در لحظه مشاهده نمایید.

برای مشاهده ی عینی این قابلیت، بر روی Inspect کلیک کرده و سپس با نوار اسکرول به پایین صفحه در پنجره ی Page Inspector پیمایش نمایید.

زمانی که اشاره گر موس را بر روی پایین صفحه (ناحیه ی footer) معلق نگه می دارید، Page Inspector فایل _Layout.cshtml را باز کرده و آن بخشی از layout که شما انتخاب کرده اید را هایلایت می کند. همان طور که می بینید، ناحیه ی footer در فایل layout تعریف شده نه داخل خود View.

اکنون اشاره گر موس را بر روی خطی که علامت کپی رایت در آن درج شده است، معلق نگه دارید. در صفحه ی _Layout.cshtml دستور متناظر هایلایت شده است.

مقدار نوشته به انتهای خط مورد نظر در فایل _Layout.cshtml اضافه نمایید.

< p >© @DateTime.Now.Year - My ASP.NET MVC Application Rocks!< /p >

اکنون کلیدهای Ctrl+Alt+Enter را همزمان فشار داده یا بر روی Update Bar کلیک کنید تا نتایج در پنجره ی مرورگر Page Inspector به نمایش در آید.

شاید با خود فکر کرده بودید که کد مربوط به footer در فایل Index.cshtml تعریف شده است، اما حقیقا داخل فایل _Layout.cshtml تعریف شده بود و Page Inspector آن را برای شما به راحتی پیدا کرد.

Inspection mode و پنجره ی HTML

در گام بعدی نگاهی مختصر بر پنجره ی HTML و اینکه چگونه المان ها را برای شما نگاشت (map) می کند، خواهیم داشت. با کلیک بر روی Inspect، ابزار Page Inspector را در حالت Inspection Mode و بررسی دقیق کد قرار دهید.

بر روی بالاترین قسمت صفحه که میزبان نوشته ی "Your logohere" می باشد، کلیک نمایید. در این مرحله، از آنجایی که صرفا المانی از صفحه را با دقت و جزئیات بیشتری بررسی می کنید، ظاهر پنجره ی مرورگر دیگر به هنگام حرکت کردن اشاره گر موس، تغییری نمی کند.

اکنون اشاره گر موس را بر روی پنجره ی HTML نگه دارید. همین که اشاره گر موس را حرکت می دهید، ابزار Page Inspector پیرامون تگ مورد نظر را در پنجره ی HTML با رنگ آبی نشانه گذاری کرده و المان متناظر را در پنجره ی مرورگر هایلایت می کند.

مانند قبل، Page Inspector فایل _Layout.cshtml را داخل یک تب موقت برای شما باز می کند. بر روی تب موقتی _Layout.cshtml کلیک کنید، می بینید که کد HTML متناظر در بخش < header > صفحه برای شما هایلایت می شود.

پیش مشاهده ی تغییرات CSS در پنجره ی Styles

در گام بعدی، شما با استفاده از پنجره ی Styles که کدهای CSS را نمایش می دهد، تغییرات اعمال شده بر روی دستورات CSS را در لحظه مشاهده می کنید.

بر روی Inspect کلیک کرده تا ابزار Page Inspector را در وضعیت بررسی دقیق کد (Inspection Mode) قرار دهید.

در پنجره ی مرورگر ابزار Page Inspector، اشاره گر موس را بر روی بخش "Home Page" معلق نگه دارید تا برچسب div.content-wrapper نمایان شود.

داخل بخش div.content-wrapper یکبار کلیک کرده و سپس با اشاره گر موس بر روی پنجره ی Style کلیک نمایید. پنجره ی Styles تمامی دستورات تنظیم ظاهر (CSS) المان مربوطه را نمایش می دهد. با نوار اسکرول به سمت پایین پیمایش نموده تا انتخاب گر کلاس .featured .content-wrapper را پیدا نمایید. اکنون تیک چک باکس مربوط به خاصیت background-color را بردارید.

همان طور که می بینید، تغییرات اعمال شده بر روی ظاهر المان مربوطه بلافاصله در پنجره ی مروگر Page Inspector نمایش داده می شود.

حال بار دیگر با انتخاب checkbox آن را تیک دار کرده و سپس بر روی مقدار property دابل کلیک نمایید و آن را به red تغییر دهید. تغییرات بلافاصله نمایان شده و در لحظه برای شما نمایش داده می شوند:

پنجره ی Styles به شما این امکان را می دهد تا تغییرات در دستورات CSS را در لحظه و قبل از اینکه آن ها را در فایل تنظیم ظاهر سایت (stylesheet) به صورت نهایی اعمال کنید، مشاهده نمایید.

امکان CSS Auto Sync

برای استفاده از این قابلیت بایستی ورژن 1.3 ابزار Page Inspector را داشته باشید.

در وهله ی اول با کلیک بر روی دکمه ی Inspect، حالت ابزار Page Inspector را بر روی Inspection Mode تنظیم نمایید.

در پنجره ی مرورگر Page Inspector، اشاره گر موس را بر روی بخش "Home Page" معلق نگه دارید تا برچسب div.content-wrapper ظاهر شود. با یکبار کلیک المان را انتخاب نمایید.

پنجره ی Styles تمامی دستورهای CSS این المان را نشان می دهد. با نوار اسکرول به سمت پایین پیمایش کرده تا انتخاب گر (selector) کلاس .featured .content-wrapper را پیدا کنید. حال بر روی ".featured .content-wrapper" کلیک نمایید. Page Inspector فایل CSS مربوطه را که میزبان این Style (Site.css) می باشد، به صورت خودکار باز کرده و دستور تنظیم ظاهر (style) متناظر CSS را هایلایت می کند.

اکنون مقدار خاصیت (property) background-color را بر روی "red" تنظیم نمایید. تغییرات بلافاصله در پنجره ی مروگر Page Inspector نمایان می شوند.

استفاده از امکان CSS Color Picker

ویرایشگر CSS در محیط Visual Studio یک ابزار color picker دارد که انتخاب و درج رنگ را آسان می سازد. ابزار ذکر شده یک پالت یا مجموعه ای از رنگ ها دارد که اسم رنگ های استاندارد، کد هش، RGBA، RGB، HSL و رنگ های HSLA را به راحتی پشتیبانی کرده و علاوه بر آن لیستی از رنگ هایی که اخیرا از آن ها استفاده کرده اید را در یک فایل ذخیره می کند.

در بخش قبلی، مقدار خاصیت background-color را تغییر دادید. جهت فراخوانی ابزار color picker، با اشاره گر موس نقطه ی درج (insertion point) را پس از اسم خاصیت (property) قرار داده و بعد از آن کاراکتر # یا rgb( را تایپ کنید.

بر روی color کلیک کرده و آن را انتخاب نمایید یا کلید پیکان را فشار دهید و سپس با استفاده از کلیدهای پیکان چپ و راست، بین رنگ های مختلف پیمایش نمایید. زمانی که تمرکز بر روی رنگ خاصی قرار می گیرد، مقدار مبنای 16 متناظر آن نیز نمایش داده می شود.

اگر نوار انتخاب رنگ، رنگ دلخواه شما را ندارد، می توانید با استفاده از pop-down انتخاب گر رنگ (color picker pop-down) رنگ مد نظر خود را انتخاب نمایید. برای باز کردن آن، بر روی آیکون مربوطه در انتهای سمت راست نوار انتخاب رنگ، کلیک کرده یا کلید پیکان پایین را یک یا دوبار در صفحه کلید فشار دهید.

یک رنگ از نوار عمودی در سمت راست انتخاب کنید. می بینید که یک ابزار شیب رنگ (gradient) ویژه ی آن رنگ در پنجره ی اصلی نمایان می شود. با فشردن کلید Enter یک رنگ را به طور مستقیم از نوار عمودی انتخاب کنید یا در صورت تمایل بر انتخاب دقیق تر رنگ دلخواه، می توانید بر روی نقطه ی مورد نظر در پنجره ی اصلی کلیک نمایید.

چنانچه رنگی در صفحه نمایش کامپیوتر شما هست که مایل به استفاده از آن هستید (این رنگ حتما نباید داخل رابط کاربری یا محیط Visual Studio باشد)، می توانید با استفاده از آیکون قطره چکان در پایین سمت راست کادر، مقدار دقیق آن را ضبط نمایید.

می توانید میزان کدری (opacity) یک رنگ را با استفاده از ابزار تنظیم کننده میزان کدری رنگ واقع در پایین color-picker (با حرکت دادن اسلایدر) مدیریت کنید. با این کار مقادیر رنگ به مقادیر RGBA تغییر می کند چرا که فرمت RGBA نشانگر میزان کدری رنگ نیز می باشد.

پس از انتخاب رنگ دلخواه، کلید Enter را فشار داده و سپس یک نقطه ویرگول تایپ کنید تا المان background-color در فایل Site.css تکمیل شود.

نوار بروز رسانی (Update bar) در Page Inspector

Page Inspector بلافاصله از تغییرات اعمال شده در فایل Site.css آگاه شده و یک پیغام هشدار در نوار بروز رسانی به نمایش می گذارد.

به منظور ذخیره ی تمامی فایل ها و بروز رسانی اطلاعات پنجره ی مرورگر Page Inspector، کلیدهای Ctrl+Alt+Enter را همزمان فشار داده یا بر روی نوار بروز رسانی کلیک کنید. تغییر در رنگ هایلایت در پنجره ی مرورگر ظاهر می شود.

نگاشت المان های صفحه در زمان اجرای برنامه به کد JavaScript

در اپلیکیشن های مدرن تحت وب، المان های صفحه معمولا در زمان اجرا (به صورت پویا) با کد JavaScript تولید می شوند. به عبارت دیگر، هیچ کد HTML یا Razor ایستایی متناظری وجود ندارد که با المان های صفحه منطبق بوده و به آن نگاشت (متصل) شود.

از ورژن 1.3 به بعد، ابزار Page Inspector می تواند آیتم هایی که در زمان اجرای برنامه به صفحه اضافه شده اند را به کد متناظر جاوا اسکپریت نگاشت (map) و متصل کند. برای نمایش این قابلیت از الگو و قالب آماده ی SPA (اپلیکیشن های تک صفحه ای در محیط ویژوال) استفاده می کنیم.

در محیط کاری Visual Studio، مسیر روبرو را طی نمایید: File > New Project. در سمت چپ، گره ی Visual C# را باز کرده، Web را انتخاب نمایید و سپس بر روی ASP.NET MVC4 Web Application کلیک کنید. حال دکمه ی OK را کلیک نمایید.

در کادر محاوره ای New ASP.NET MVC 4 Project، قالب Single Page Application را انتخاب کنید.

در Solution Explorer، پوشه ی Views را باز نموده و سپس پوشه ی Home را انتخاب کنید. بر روی فایل Index.cshtml راست کلیک نموده و گزینه ی View in Page Inspector را انتخاب کنید.

اولین چیزی که در صفحه ی مرورگر Page Inspector نمایش داده می شود، یک صفحه ی login می باشد. بر روی "Sign Up" کلیک کرده و یک نام کاربری و گذرواژه (password) ایجاد نمایید. پس از عضویت در سایت و انجام عملیات sign up، اپلیکیشن به شما اجازه می دهد تا وارد سایت شده (login کرده) و یک لیست حاوی چند آیتم نمونه (لیست to-do و انجام وظایف مختلف) ایجاد نمایید.

بر روی Inspect کلیک کرده تا Page Inspector در حالت Inspection Mode و بررسی دقیق کد قرار گیرد. در مرورگر Page Inspector، بر روی یکی از آیتم های to-do کلیک کنید. همان طور که می بینید بجای اینکه آیتم با رنگ آبی هایلایت شود، با رنگ نارنجی هایلایت شده و پسوند JS در کنار اسم المان نمایش داده می شود. این امر نشانگر داینامیک بودن المان و تولید شدن آن در زمان اجرا توسط کد JavaScript می باشد.

علاوه بر آن، یک زیرخط نارنجی رنگ بر روی تب Call Stack ظاهر می شود. زیرخط نارنجی رنگ نشانگر این می باشد که کادر Call Stack اطلاعات بیشتری درباره ی المان مورد نظر دارد.

بر روی تب Call Stack کلیک کنید. کادر Call Stack پشته ی فراخوانی/call stack کد جاوا اسکریپت را که المان را ایجاد کرده، نشان می دهد. فراخوانی کتابخانه های خارجی مانند jQuery به صورت فشرده در یک گره گنجانده شده، به همین خاطر شما می توانید فراخوانی اسکریپت اپلیکیشن خود را به راحتی مشاهده کنید.

به منظور مشاهده ی کامل پشته (full stack) از جمله فراخوانی کتابخانه های خارجی، کافی است بر روی گره "External Libraries" کلیک نمایید.

اگر بر روی آیتم مربوطه در call stack کلیک نمایید، محیط کاری Visual Studio فایل میزبان کد را باز کرده و اسکریپت مربوطه را هایلایت می کند.