دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۶
  • شهریور

جلسه ۳۹ : StyleBundle در ASP.NET MVC

  • دسته‌بندی‌ها :
جلسه ۳۹ : StyleBundle در ASP.NET MVC
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش ASP.NET MVC ، را دنبال می کنند. تاکنون ما مراحل ایجاد یک بسته بندی از فایل های جاواسکریپت را مرور کردیم. در ادامه ی مباحث این فصل و در این بخش به شما خواهیم آموخت که چگونگی با استفاده از ویژگی StyleBundle در ASP.NET MVC چگونه یک فایل بهینه از فایل های CSS را ایجاد کنید. برای آشنایی بیشتر با ویژگی StyleBundle در ASP.NET MVC لطفا در ادامه ی مباحث این بخش با ما همراه باشید.

      ویژگی StyleBundle در ASP.NET MVC

      API ASP.NET MVC شامل کلاس StyleBundle است که شامل اصلاح و دسته بندی CSS می باشد.

      StyleBundle نیز از یک کلاس Bundle مشتق شده است بنابراین از روش های مشابه ScriptBundle پشتیبانی می کند.

      همانطور که در بخش قبلی ذکر شد، شما باید بسته های اسکریپت و فایل های CSS را در متد () RegisterBundles از کلاس  BundleConfig که در فایل App_Start -> BundleConfig.cs قرار دارد ایجاد کنید.

      کد زیر بخشی از متد () RegisterBundles را نشان می دهد.

      از متد ScriptsInclude یا  IncludeDerictory برای افزودن فایل CSS در bundle استفاده کنید:

      مثال : 

      همانطور که در مثال فوق می بینید، نمونه StyleBundle را با نام بسته نرم افزاری به عنوان مسیر مجازی ایجاد کرده ایم.

      نام بسته (مسیر مجازی) باید با ~ / آغاز شود.

      از متدهای ()Include یا ()IncludeDirectory با نام های فایل CSS به عنوان یک رشته استفاده کنید.

      شما می توانید از مسیر wildcard و CDN را با همان روش ScriptBundle که در بخش قبلی بررسی کردیم استفاده کنید.

      بسته بندی style در نمای Rozar

      شما می توانید از StyleBundle در یک نمای layout استفاده کنید و از فایل های css بصورت دسته ای در یک درخواست با استفاده از کلاس استاتیک Styles رندرگیری کنید.

      مثال- استفاده از StyleBundle در View:

      مثال : 

      همانطور که در کد بالا نشان داده شده است، از متد Styles.Render می توانیدبرای بسته بندی css مشخص شده در زمان اجرا استفاده کنید.

      ابزار توسعه دهنده مرورگر را باز کنید و مشادهده کنید که فایلهای CSS آن را حذف کرده و بارگذاری کرده است، همانطور که در زیر نشان داده شده است:

      بارگذاری Bundle در مرورگر

      بارگذاری Bundle در مرورگر

      در پایان این بخش نکات زیر را نیز به خاطر بسپارید:

      ۱-  تکنیک های Bundling و Minification فایل های اسکریپت و CSS را کم حجم و بهینه می کند.

      ۲- فریم ورک mvc کلاس های ScriptBundle, StyleBundle و DynamicFolderBundle را ارائه می کند.

      ۳- کلاس StyleBundle  کدهای css را بهینه می کند.

      ۴- bundle های css و اسکریپت را در کلاس BundleConfig که در فولدر App_Start قرار گرفته ایجاد کنید.

      ۵- از wildcard برای رندر نسخه های در دسترس در زمان اجرا استفاده کنید.

      ۶- از متد (“Styles.Render(“bundle name نیز برای bundle های Style در یک نمای razor استفاده کنید.

      کلام آخر

      در مباحث این بخش نیز چگونگی بهینه سازی و کاهش حجم فایل های css با دسته بندی آنها با استفاده از StyleBundle در ASP.NET MVC را آموختیم، در بخش بعدی نیز به آموزش Area در  ASP.NET MVC خواهیم پرداخت.

      QR:  جلسه ۳۹ : StyleBundle در ASP.NET MVC
      به اشتراک بگذارید