مجتمع فنی و آموزشی پارسی ماد

مرکـز تخصصی مهارت آمـوزی در استان قـم

ساعت کار آموزشگاه: شنبه تا پنجشنبه 8 صبح تا 10 شب
ارتباط با مدیریت

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

306 بازدید تاریخ انتشار: 28 آذر 1398 دسته بندی ها:فناوری اطلاعات

 آموزش 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 را انتخاب کنید.


آموزش MVC

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


آموزش MVC

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


آموزش MVC

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


آموزش MVC

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


آموزش MVC

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

 

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

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


آموزش MVC

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


آموزش MVC

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


آموزش MVC

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


آموزش MVC

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

 

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

 

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


آموزش MVC

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

در زمینه کامپیوتر پاسخگوی شما هستیم
تمامی حقوق مادی و معنوی متعلق به آموزشگاه پارسی ماد می باشد (طراحی ، توسعه و پشتیبانی: مهندس مهدی بیاتی)