Hướng dẫn how to read from razor view to client side javascript? - cách đọc từ chế độ xem dao cạo sang javascript phía máy khách?

Giới thiệu

Các phương thức và tiện ích mở rộng AJAX trong System.web.mvc và System.web.mvc.ajax không gian tên tên tên gọi với các chế độ xem một phần JavaScript và MVC để tạo các trang web tương tác linh hoạt với mã tối thiểu. Khi sử dụng các tài nguyên này, các nhà phát triển nên nhận thức được một vài kỹ thuật cần thiết để tạo mã hiệu quả.

Các mã trong hướng dẫn này có nguồn gốc từ cùng một giải pháp Visual Studio được sử dụng cho hướng dẫn đồng hành, có sẵn trên GitHub. Bạn có thể tải xuống và chạy dự án để xem các kỹ thuật được minh họa trong hướng dẫn này trong hành động và tự mình thử nghiệm.

Một số chi tiết

Nghiên cứu trường hợp là một giải pháp Visual Studio 2017 đa dự án được phát triển từ mẫu MVC ASP.NET .NET Framework mặc định. Nó sử dụng Framework 6.1 và các mẫu thiết kế của kho lưu trữ và mô hình chế độ xem [MVVM].

Giải pháp bao gồm ba dự án tạo thành các lớp khác nhau của ứng dụng:

Ứng dụng nghiên cứu trường hợp, Blipajax là một hệ thống đơn giản để thu thập, lưu trữ và truy xuất địa lý và thông tin khác về khách hàng. Nó không sẵn sàng sản xuất từ ​​các quan điểm thiết kế hoặc mã hóa; Nó tồn tại để minh họa các khái niệm được thảo luận trong hướng dẫn này. Để biết mô tả đầy đủ về giải pháp ví dụ, xem Hướng dẫn đồng hành.BlipAjax is a simple system for gathering, storing, and retrieving geographic and other information about customers. It's not production-ready from either the design or coding perspectives; it exists to illustrate the concepts discussed in this guide. For a complete description of the example solution, see the companion guide.

Tóm lại, trang khách hàng/chỉnh sửa bao gồm chế độ xem cha mẹ và ba chế độ xem một phần. Chế độ xem phần thứ ba có thể là một chế độ xem một phần để tạo địa chỉ e-mail mới hoặc chế độ xem một phần để tạo địa chỉ bưu chính mới, tùy thuộc vào giá trị được chọn trong chế độ xem một phần thứ hai. Minh họa sau đây cho thấy khách hàng/chỉnh sửa với các chú thích xác định chế độ xem [một phần], mô hình xem và hành động của bộ điều khiển [phương thức] liên quan đến việc hiển thị chế độ xem.Customer/Edit page consists of a parent view and three partial views. The third partial view can be either a partial view to create a new e-mail address or a partial view to create a new postal address, depending on the value selected in the second partial view. The following illustration shows Customer/Edit with annotations identifying the [partial] view, view model, and the controller action [method] associated with rendering the view.

Trên trang Khách hàng/Chỉnh sửa, các hàm JavaScript được sử dụng để điền vào danh sách thả xuống trạng thái/khu vực với các giá trị tương ứng với giá trị được chọn trong thả xuống quốc gia. Khi người dùng thay đổi quốc gia đã chọn, các giá trị cho trường tiểu bang/khu vực phải được đặt lại.Customer/Edit page, JavaScript functions are used to populate the State/Region dropdown list with the values that correspond with the value selected in the Country dropdown. As the user changes the selected country the values for the State/Region field must be reset.

Chế độ xem một phần của JavaScript và Ajax

Có hai khía cạnh để thực hiện JavaScript với các chế độ xem dao cạo một phần của Ajax:

1. Thư viện JavaScript cung cấp chức năng AJAX cần thiết cho các phương thức trợ giúp ASP.NET AJAX

2. Các tập lệnh dành riêng cho triển khai cung cấp chức năng phía máy khách

Trong giải pháp ví dụ, các tập lệnh dành riêng cho triển khai là các tập lệnh có giá trị thả xuống trạng thái/khu vực.State/Region dropdown values.

Thư viện JavaScript

Việc thực hiện thành công các chế độ xem một phần AJAX phụ thuộc vào việc tải đúng một số thư viện JavaScript.

JQuery và các thư viện toàn trang web khác

Mẫu MVC ASP.NET mặc định bao gồm tệp _layout.cshtml tiêu chuẩn thực hiện các tính năng của Navigator và bao gồm các tham chiếu đến các thư viện JavaScript tiêu chuẩn. Bởi vì _layout.cshtml được bao gồm trong mọi chế độ xem trong dự án web, nên đây là một nơi tốt để bao gồm các tài liệu tham khảo tập lệnh triển khai chức năng cho các yếu tố trang, chẳng hạn như navbar được tìm thấy trên mỗi trang.navbar found included on every page.

Hầu hết các thư viện JavaScript được hiển thị ở dưới cùng của phần tử

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

Chức năng giao diện người dùng được cung cấp bởi Khung Bootstrap CSS được bao gồm trong thư viện bootstrap.js được tải với gói bootstrap. Bootstrap.js phụ thuộc vào thư viện jQuery phổ biến, được tải bằng gói jQuery.Bootstrap CSS framework is included in the Bootstrap.js library loaded with the Bootstrap bundle. Bootstrap.js depends on the ubiquitous jQuery library, which is loaded using the jquery bundle.

Định nghĩa của gói jQuery cho phép phiên bản jQuery hiện tại được tải mà không thay đổi định nghĩa gói hoặc _layout.cshtml để khớp với số phiên bản hiện tại. Bằng cách này, thư viện jQuery có thể được cập nhật thông qua gói NUGET được liên kết mà không cập nhật mã để giữ số phiên bản đồng bộ.jquery bundle enables the current version of jQuery to be loaded without changing the bundle definition or _Layout.cshtml to match the current version number. This way, the jQuery library can be updated through the associated NuGet package without updating the code to keep the version number in sync.

Chức năng AJAX phụ thuộc vào thư viện jQuery, nhưng không phải thư viện bootstrap. Nếu dự án web không triển khai Khung Bootstrap CSS, thư viện Bootstrap không cần thiết. Trong giải pháp ví dụ, Blipajax, Khung Bootstrap CSS, được sử dụng để cung cấp kiểu dáng và chức năng giao diện người dùng cho một số yếu tố giao diện người dùng, bao gồm các yếu tố biểu mẫu như danh sách thả xuống quốc gia và trạng thái/khu vực.jQuery library, but not the Bootstrap library. If the web project does not implement the Bootstrap CSS framework, the Bootstrap library is unnecessary. In the example solution, BlipAjax, the Bootstrap CSS framework, is used to provide user interface styling and functionality for a number of user interface elements, including form elements like the Country and State/Region dropdown lists.

_Layout.cshtml

1DOCTYPE html>
2
3
4    
5    
6    @ViewBag.Title - My ASP.NET Application
7    @Styles.Render["~/Content/css"]
8    @Scripts.Render["~/bundles/modernizr"]
9    @RenderSection["header", required: false]
10
11
12    
13        
14            
15                
16                    
17                    
18                    
19                
20                @Html.ActionLink["Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }]
21            
22            
23                
24                    @Html.ActionLink["Home", "Index", "Home"]
25                    @Html.ActionLink["About", "About", "Home"]
26                    @Html.ActionLink["Contact", "Contact", "Home"]
27                
28            
29        
30    
31    
32        @RenderBody[]
33        
34        
35            @DateTime.Now.Year - My ASP.NET Application
36        
37    
38
39    @Scripts.Render["~/bundles/jquery"]
40    @Scripts.Render["~/bundles/bootstrap"]
41    @RenderSection["scripts", required: false]
42
43

HTML

Lưu ý rằng tệp _layout.cshtml cũng bao gồm chỉ thị dao cạo

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

jQuery-validate.js, jQuery-validate-unobtrusies.js, và jQuery-unobtrious-ajax.js

Các trang bao gồm các yếu tố

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1. jquery-validate-unobtrusive.js

Các thư viện này được tải qua gói jQueryVal.jqueryval bundle.

Các trang bao gồm chức năng AJAX, chẳng hạn như khách hàng/chỉnh sửa cần bao gồm một thư viện JavaScript bổ sung:Customer/Edit need to include an additional JavaScript library:

jquery-unobtrusive-ajax.js

Thư viện này được tải qua gói jQueryUnobtruses.jqueryunobtrusive bundle.

Lưu ý rằng quy ước đặt tên tiêu chuẩn cho các thư viện tạo ra tiềm năng nhầm lẫn: gói jqueryunobtring không bao gồm thư viện cho AJAX không gây khó chịu và gói jqueryunobtrious không bao gồm thư viện để xác nhận không gây khó chịu.jqueryunobtrusive bundle does not include the library for unobtrusive Ajax and the jqueryunobtrusive bundle does not include the library for unobtrusive validation.

Như được hiển thị bên dưới, chế độ xem cha mẹ cho khách hàng/chỉnh sửa bao gồm chỉ thị

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11
12    
13        Edit Customer Information
14    
15
16
17
18    @Html.Action["EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
19
20
21
22    @Html.Action["AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] }]
23
24
25
26
27
28    
29        
30            
31            
32                @Html.ActionLink["Back to List", "Index"]
33            
34        
35    
36
37
38@section Scripts {
39    @Scripts.Render["~/bundles/jqueryunobtrusive"] @*For unobtrusive-ajax*@
40    @Scripts.Render["~/bundles/jqueryval"] @*For validate and validate-unobtrusive*@
41
42    
43    $[document].ready[function [] {
44        var selectedCountry = $["#Country"].val[];
45        var selectedRegion = $["#Region"].val[];
46        var regionsSelect = $['#Region'];
47        AddRegions[selectedCountry, regionsSelect];
48        if [selectedRegion != null && selectedRegion != ''] {
49            regionsSelect.val = selectedRegion;
50        };
51    }];
52
53    $["#Country"].change[function [] {
54        var selectedCountry = $["#Country"].val[];
55        var regionsSelect = $['#Region'];
56        regionsSelect.empty[];
57        if [selectedCountry != null && selectedCountry != ''] {
58            AddRegions[selectedCountry, regionsSelect];
59        }
60    }];
61
62    function AddRegions[selectedCountry, regionsSelect] {
63        $.getJSON['@Url.Action["GetRegions"]', { iso3: selectedCountry }, function [regions] {
64            if [regions != null && !jQuery.isEmptyObject[regions]] {
65                regionsSelect.append[$['', {
66                    value: null,
67                    text: ""
68                }]];
69                $.each[regions, function [index, region] {
70                    regionsSelect.append[$['', {
71                        value: region.Value,
72                        text: region.Text
73                    }]];
74                }];
75            };
76        }];
77    }
78    
79}