Làm cách nào để thêm tệp JavaScript trong chế độ xem MVC?

Tại đây, bạn sẽ tìm hiểu cách kết hợp nhiều tệp JavaScript và tạo gói tập lệnh có thể được trả về trong một yêu cầu HTTP duy nhất trong ASP. NET MVC

Lớp ScriptBundle đại diện cho một gói thực hiện gói và thu nhỏ JavaScript. Bạn có thể tạo các gói kiểu hoặc tập lệnh trong lớp

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

7 trong thư mục

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

8 trong ASP. dự án NET MVC. [bạn có thể tạo lớp tùy chỉnh của riêng mình thay vì sử dụng lớp BundleConfig, nhưng bạn nên tuân theo thông lệ tiêu chuẩn. ]

Ví dụ sau minh họa cách tạo gói tập lệnh

Ví dụ. Tạo gói tập lệnh

Sao chép

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

public class BundleConfig
{
    public static void RegisterBundles[BundleCollection bundles]
    {   
        bundles.Add[new ScriptBundle["~/bundles/bs-jq-bundle"].Include[
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/jquery-3.3.1.js"]];

        //the following creates bundles in debug mode;
        //BundleTable.EnableOptimizations = true;
    }
}

Trong ví dụ trên, chúng tôi đã tạo một gói mới bằng cách tạo một thể hiện của lớp

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

9 và chỉ định đường dẫn ảo và tên gói trong hàm tạo.

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

0 là đường dẫn ảo và

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

1 là tên gói. Sau đó, chúng tôi đã thêm hai tệp js,

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

0 và

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

1 vào gói này. Phương pháp

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

2 được sử dụng để thêm các gói mới vào

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

3. Theo mặc định, gói

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

1 ở trên sẽ được tạo ở chế độ phát hành. Sử dụng

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

5 nếu bạn muốn xem các gói trong chế độ gỡ lỗi

Bây giờ, để đưa

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

1 ở trên vào trang web của bạn, hãy sử dụng phương pháp

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

7 trong chế độ xem bố cục, như được hiển thị bên dưới

Ví dụ. Sử dụng gói tập lệnh

Sao chép

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

Bây giờ, khi bạn chạy ứng dụng ở chế độ phát hành, bạn sẽ thấy gói được tạo và tải trong một yêu cầu

Bao gồm một thư mục trong Gói

Sử dụng phương pháp

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

8 để thêm tất cả các tệp trong một thư mục cụ thể vào một gói, như được hiển thị bên dưới

Ví dụ ScriptBundle

Sao chép

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

Sử dụng ký tự đại diện

Hầu hết các tệp JavaScript của bên thứ ba bao gồm một phiên bản trong tên của tệp tập lệnh. Ví dụ: jQuery bao gồm phiên bản trong tên tệp. Ký tự đại diện

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

9 sẽ tự động chọn tệp phiên bản có sẵn

Ví dụ. Ký tự đại diện với gói

Sao chép

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

1

Sử dụng CDN

Bạn cũng có thể tạo một nhóm tệp từ Mạng phân phối nội dung [CDN], như minh họa bên dưới

Ví dụ. Tải tệp từ CDN

Sao chép

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

2

Ghi chú

ASP. NET MVC framework gọi

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

0 từ sự kiện

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

1 trong tệp

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

2. Vì vậy, tất cả các gói được thêm vào

DOCTYPE html>


    
    
    @ViewBag.Title
    @Scripts.Render["~/bundles/bootstrap"]


    @*html code removed for clarity *@

3 khi bắt đầu đăng ký

Làm cách nào để thêm JavaScript trong chế độ xem MVC?

Làm cách nào để thêm tệp JavaScript trong MVC?

Làm cách nào để bao gồm các tập lệnh trong MVC?

Làm cách nào để gọi tệp JavaScript trong Cshtml?