آموزش Inspector در ASP.NET MVC قسمت اول

آموزش Inspector در ASP.NET MVC قسمت اول

صفحه ی inspector در Visual Studio 2012 یک ابزار توسعه ی وب با یک مرورگر تکمیل شده می باشد. در این مرورگر کامل عنصری را انتخاب کرده و صفحه ی Inspector منبع عنصر و CSS را مشخص می کند. شما می توانید ویو MVC را فهرست کرده و به سرعت منابع مارک آپ های نمایش داده شده را پیدا کنید و از ابزار مرورگر درست در محیط Visual Studio استفاده کنید.
این آموزش چگونگی فعالسازی Inspection Mode را ارائه می دهد و سپس به سرعت مارک آپ و CSS را در پروژه ی وب شما قرار داده و ویرایش می کند. این آموزش از MVC Project استفاده می کند، اما شما می توانید از صفحه ی Inspector نیز برای Web Forms و دیگر برنامه های ASP.NET استفاده کنید. این آموزش دارای بخش های زیر می باشد:

• Prerequisites
• Create a Web Application
• Use Page Inspector to Browse to a View
• Enable Inspection Mode
• Use Page Inspector to Make Changes to Markup
• Inspection Mode and the HTML Window
• Preview CSS Changes in the Styles window
• CSS Auto Sync
• Using the CSS Color Picker
• Mapping Dynamic Page Elements to JavaScript

پیش نیازها

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

برای به دست آوردن آخرین ورژن صفحه ی Inspector از Web Platform Installer برای نصب Windows Azure SDK برای .NET 2.0 استفاده کنید.
صفحه ی Microsoft Web با ابزار توسعه گر Microsoft Web بسته شده است. آخرین ورژن 1.3 می باشد. برای اینکه چک کنید چه ورژنی دارید، Visual Studio را اجرا کرده و About Microsoft Visual Studio را از منوی Help انتخاب کنید.

ایجاد یک برنامه ی وب

ابتدا با استفاده از صفحه ی Inspector یک برنامه ی وب ایجاد کنید. در Visual Studio عبارت File > New Project را انتخاب کنید. در سمت چپ Visual C# را باز کرده و Web را انتخاب کنید و سپس ASP.NET MVC4 Web Application را انتخاب کنید.

OK را کلیک کنید.
در دیالوگ باکس New ASP.NET MVC 4 Project ، عبارت Internet Application را انتخاب کنید. Razor را مانند ویو پیش فرض آن رها کنید.

برنامه در ویو Source باز می شود.

اکنون شما برنامه ای برای کار با آن دارید، می توانید از صفحه ی Inspector برای تغییر و امتحان آن استفاده کنید.
استفاده از صفحه ی Inspector برای فهرست کردن به یک ویو:
در Visual Studio 2012 می توانید روی هرکدام از ویوها در پروژه راست کلیک کرده و View in Page Inspector را انتخاب کنید و صفحه ی Inspector مسیر را شکل داده و صفحه را نمایش خواهد داد.
در Solution Explorer پوشه ی Views و سپس پوشه ی Home را باز کنید. روس فایل Index.cshtml راست کلیک کرده و View in Page Inspector را انتخاب کنید.

به طور پیش فرض صفحه ی Inspector به عنوان یک پنجره در سمت چپ محیط Visual Studio قرار دارد. اگر تمایل داشته باشید می توانید آن را در جای دیگری قرار دهید و یا آن را از محیط ویندوز خارج کنید. How to: Arrange and Dock Windows را بررسی کنید.
پین بالای صفحه ی Inspector صفحه ی موجود در پنجره ی مرورگر را نشان می دهد. پین پایین نیز صفحه در مارک آپ HTML به همراه تب هایی را نشان می دهد که به شما اجازه می دهد جنبه های مختلف صفحه را بررسی کنید. پین پایین شبیه به F12 Developer Tools در اینترنت اکسپلورر می باشد.

در این آموزش از تب های HTML و Styles برای مسیریابی سریع و اعمال تغییرات در برنامه استفاده می شود.

فعالسازی سبک Inspection

برای قرار دادن صفحه ی Inspector در حالت Inspection، بر روی دکمه ی Inspect کلیک کنید. در حالت Inspection وقتی نشانگر ماوس را روی هر بخشی از صفحه نگه دارید، منبع یا کد مرتبط مشخص می شود.

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

زمانیکه نشانگر ماوس را حرکت می دهید، Visual Studio ترکیب Razor مرتبط را در فایل منبع های لایت می کند.
در صفحه ی Inspector تب HTML، در واقع HTML تولید شده از ترکیب Razor را نشان می دهد. زمانیکه نشانگر ماوس را حرکت می دهید عناصر HTML های لایت می شوند. تب Styles قوانین مربوط به CSS را برای عنصر نشان می دهد.
استفاده از صفحه ی Inspector برای ایجاد تغییرات در مارک آپ:
صفحه ی Inspector به شما اجازه می دهد که مارک آپی را پیدا کنید که موقعیت آن واضح نیست. سپس می توانید مارک آپ را تغییر داده و نتایج تغییرات را مشاهده کنید.
برای مشاهده ی آن روی Inspect کلیک کنید و سپس در پنجره ی Page Inspector به پایین صفحه بروید.
وقتی نشانگر ماوس را به پایین صفحه حرکت می دهید، Page Inspector فایل _Layout.cshtml را باز می کند و بخش لی اوت صفحه را که انتخاب کرده اید، مشخص می کند. همانطور که می بینید، بخش پاورقی در فایل لی اوت تعریف می شود و نه در ویو.

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

در انتهای خط در فایل _Layout.cshtml متن اضافه کنید.

‎
© @DateTime.Now.Year - My ASP.NET MVC Application Rocks!
‎

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

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