۶
شهریور

جلسه ۳۸ : ScriptBundle در ASP.NET MVC

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

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

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

ASP.NET MVC API شامل کلاس ScriptBundle است که جاوا اسکریپت را بهینه می کند.

فایل App_Start\BundleConfig.cs را از فولدرهای MVC باز کنید. فایل BundleConfig.cs بصورت پیش فرض با فریم ورک MVC ایجاد شده است.

شما باید کدهای bundling خود را در متد ()BundleConfig.RegisterBundles بنویبسید(شما می توانید کلاس سفارشی خودتان را به جای استفاده از کلاس BundleConfig ایجاد کنید، اما توصیه می شود که از عمل استاندارد پیروی کنید).

مثال زیر بخشی از متد RegisterBundles را نشان می دهد:

مثال :

using System.Web;
using System.Web.Optimization;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {   
        // create an object of ScriptBundle and 
        // specify bundle name (as virtual path) as constructor parameter 
        ScriptBundle scriptBndl = new ScriptBundle("~/bundles/bootstrap");

        
        //use Include() method to add all the script files with their paths 
        scriptBndl.Include(
                            "~/Scripts/bootstrap.js",
                            "~/Scripts/respond.js"
                          );

        
        //Add the bundle into BundleCollection
        bundles.Add(scriptBndl);

        BundleTable.EnableOptimizations = true;
    }
}

using System.Web;

using System.Web.Optimization;

public class BundleConfig

{

public static void RegisterBundles(BundleCollection bundles)

{

// create an object of ScriptBundle and

// specify bundle name (as virtual path) as constructor parameter

ScriptBundle scriptBndl = new ScriptBundle("~/bundles/bootstrap");

//use Include() method to add all the script files with their paths

scriptBndl.Include(

"~/Scripts/bootstrap.js",

"~/Scripts/respond.js"

);

//Add the bundle into BundleCollection

bundles.Add(scriptBndl);

BundleTable.EnableOptimizations = true;

}

در مثال فوق، ما یک بهینه سازی از دو فایل جاوااسکریپت ایجاد کرده ایم. فایل های bootstrap.js و respond.js از ScriptBundle برای بهینه شدن استفاده می کنند.

۱- ابتدا یک نمونه از کلاس ScriptBundle را با مشخص کردن نام بسته نرم افزاری به عنوان پارامتر سازنده ایجاد کنید.

این نام bundle یک مسیر مجازی است که با ~/. شروع می شود. شما می توانید هر چیزی را در مسیر مجازی قرار بدهید.

اما بهتر است مسیری را که برای بهینه شدن آسان تر باشد را انتخاب کنید.

در اینجا ما مسیر “~/bundles/bootstrap” را قرار داده ایم.

۲- از متدهای Include برای افزودن یک یا چند فایل JS داخل یک bundle استفاده کنید.

همچنین از یک مسیر مناسب که در انتهای مسیر از کاراکتر ~ استفاده می کنیم.

۳- در نهایت bundle را داخل فضای BundleCollection اضافه کنید. که به عنوان یک پارامتر در متد () RegisterBundle مشخص شده است.

۴- سپس BundleTable.EnableOptimizations = true تکنیک bundling و minification را در حالت debug فعال می کند.

نکته: اگر ویژگی فوق را فعال نکنید، تکنیک های bundling و minification انجام نمی شود.

شما همچنین می توانید از متد IncludeDirectory از کلاس bundle برای افزودن تمام فایل ها در زیر دایرکتوری خاص استفاده کنید:

مثال:

مثال :

public static void RegisterBundles(BundleCollection bundles)
{            
    bundles.Add(new ScriptBundle("~/bundles/scripts").IncludeDirectory("~/Scripts/","*.js",true));
}

public static void RegisterBundles(BundleCollection bundles)

{

bundles.Add(new ScriptBundle("~/bundles/scripts").IncludeDirectory("~/Scripts/","*.js",true));

}

بنابراین شما می توانید یک bundle از فایل های جاوااسکریپت با استفاده از ScriptBundle ایجاد کنید.

فریم ورک MVC متد ()BundleConfig.RegisterBundle را از رویداد Application_Start در فایل Global.asax.cs فراخوانی می کند.

بنابراین این می تواند bundle ها را در BundleCollection در شروع برنامه قرار دهد.

مثال- فراخوانی متد ()BundleConfig.RegisterBundle از رویداد Application_Start:

مثال :

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
}

public class MvcApplication : System.Web.HttpApplication

{

protected void Application_Start()

{

BundleConfig.RegisterBundles(BundleTable.Bundles);

}

استفاده از wildcard

با استفاده از wildcards، لازم نیست یک نسخه از یک فایل اسکریپت را مشخص کنید. این ویژگی به طور خودکار شامل فایل هایی با نسخه موجود است.

مثال:

فایل های Jquery شامل نسخه هایی در یک نام است. بنابراین شما می توانید از {version} یک نسخه را بر اساس نسخه های در دسترس اعمال کنید:

مثال :

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {            
        bundles.Add(new ScriptBundle("~/bundles/jquery")
               .Include( "~/Scripts/jquery-{version}.js"));
    }
}

public class BundleConfig

{

public static void RegisterBundles(BundleCollection bundles)

{

bundles.Add(new ScriptBundle("~/bundles/jquery")

.Include( "~/Scripts/jquery-{version}.js"));

}

استفاده از CDN

شما همچنین می توانید از CDN (شبکه تحویل محتوا) برای بارگذازی فایل های اسکریپت استفاده کنید.

برای مثال شما می توانید کتابخانه ی jquery را از CDN بارگذاری کنید.

مثال:

مثال :

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {            
        var cdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

        bundles.Add(new ScriptBundle("~/bundles/jquery", cdnPath)
               .Include( "~/Scripts/jquery-{version}.js"));
    }
}

public class BundleConfig

{

public static void RegisterBundles(BundleCollection bundles)

{

var cdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

bundles.Add(new ScriptBundle("~/bundles/jquery", cdnPath)

.Include( "~/Scripts/jquery-{version}.js"));

}

در کد فوق، jQuery از CDN در حالت انتشار و در حالت اشکال زدایی درخواست می شود.

کتابخانه ی jQuery از یک منبع محلی بارگذاری می شود.

به این نکته توجه کنید که باید یک مکانیسم fallback برای مقابله با شکست درخواست CDN داشته باشید.

ScriptBundle در نمای Razor View

ما یک script bundle در مثال فوق ایجاد کردیم. حالا ما چگونگی ایجاد bundle داخل razor را آموزش خواهیم داد.

بسته های اسکریپت را می توان با استفاده از کلاس اسکریپت های استاتیک مورد استفاده قرار داد.

از متد () Scripts.Render استفاده کنید تا بسته نرم افزاری اسکریپت مشخص در زمان اجرا را وارد کنید:

مثال :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Scripts.Render("~/bundles/bootstrap")
</head>
<body>
    @*html code removed for clarity *@
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

@Scripts.Render("~/bundles/bootstrap")

</head>

<body>

@*html code removed for clarity *@

</body>

</html>

حالا کد فوق را اجرا کنید. سپس شما دو فایل اسکریپت ترکیب شده را پیدا می کنید.

و اینکه ویژگی debug را در فایل web.config و در بخش <compilation debug="false" targetFramework="4.5"/> برابر با false تنظیم کنید.

ScriptBundle در ASP.NET MVC

همانطور که در شکل بالا می بینید بسته نرم افزاری بوت استرپ در یک درخواست بارگذاری می شود.

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

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

۲- ScriptBundle فایل های جاوااسکریپت را بهینه می کند.

۳- بسته بندی های اسکریپت یا css را در کلاس BundleConfig در فولدر App_Start ایجاد کنید.

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

۵- از متد (“Scripts.Render(“bundle name نیز برای قرار دادن script bundle در یک نمای razor استفاده کنید.

کلام آخر

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

QR: جلسه ۳۸ : ScriptBundle در ASP.NET MVC

به اشتراک بگذارید

ScriptBundle در ASP ,آموزش asp از مقدماتی تا پیشرفته ,آموزش asp.net mvc ,آموزش برنامه نویسی ,آموزش تصویری asp.net mvc ,دوره کامل آموزش asp.net mvc

دیدگاه کاربران

تعداد دیدگاه : 1

jalal
آبان ۴, ۱۳۹۹
سپاس گذارم عالی بود
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

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

جلسه ۳۸ : ScriptBundle در ASP.NET MVC

مقدمه

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

استفاده از wildcard

استفاده از CDN

ScriptBundle در نمای Razor View

کلام آخر

لیست مطالب دوره

مقدمات آموزش ASP.NET MVC

آموزش Html helper

اعتبارسنجی در ASP.NET MVC

نمای طراحی

تکنیک Bundling

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ