آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش 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، می توانید با استفاده از Web Platform Installer مجموعه ابزار توسعه ی نرم افزار Windows Azure را ویژه ی .NET 2.0 نصب نمایید.

ابزار 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 کلیک نمایید.

آموزش MVC

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

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

آموزش MVC

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

آموزش MVC

حال که کد اپلیکیشن در محیط 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 را از منوی حاضر انتخاب کنید.

آموزش MVC

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

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

آموزش MVC

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


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

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

آموزش MVC

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

آموزش MVC

به مجرد حرکت دادن اشاره گر موس، محیط 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.

آموزش MVC

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

آموزش MVC

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

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

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

آموزش MVC

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

Inspection mode و پنجره ی HTML

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

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

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

آموزش MVC

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

آموزش MVC

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

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

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

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

آموزش MVC

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

آموزش MVC

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

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

آموزش MVC

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

امکان CSS Auto Sync

توجه:

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

برای استفاده از این قابلیت بایستی ورژن 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 را هایلایت می کند.

آموزش MVC

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

آموزش MVC

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

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

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

آموزش MVC

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

آموزش MVC

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

آموزش MVC

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

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

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

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

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

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

آموزش MVC

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

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

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

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

نکته:

جهت استفاده از template یا قالب آماده ی SPA لازم است آپدیت ASP.NET and Web Tools 2012.2 را داشته باشید.

در محیط کاری 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 می باشد.

آموزش MVC

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

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

آموزش MVC

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

آموزش MVC

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

آموزش MVC
  • 797
  •    482
  • تاریخ ارسال :   1396/07/17

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .