Cách bao gồm javascript trong cshtml?

Các phương thức và phần mở rộng của trình trợ giúp Ajax trong Hệ thống. mạng. Mvc và hệ thống. mạng. mvc. Không gian tên Ajax có thể được kết hợp với 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 biết một số kỹ thuật cần thiết để tạo mã hiệu quả

Hướng dẫn này chỉ ra cách triển khai hiệu quả chức năng JavaScript khi tạo một trang web từ các chế độ xem từng phần của Razor, bao gồm các 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<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
1 được tạo bằng cách sử dụng
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
0
helper method. This guide is a companion to ASP.NET MVC - Using Ajax Helpers with Razor Partial Views.

Các mã trong hướng dẫn này được lấy 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 đang hoạt động và để tự mình thử nghiệm

Một số chi tiết

Nghiên cứu điển hình là một giải pháp Visual Studio 2017 đa dự án được phát triển từ ASP mặc định. MẠNG LƯỚI. NET Framework MVC mẫu. Nó sử dụng Entity Framework 6. 1 và các mẫu thiết kế của kho lưu trữ và Chế độ xem mô hình ViewModel (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

ProjectApplication LayerBlip. Dữ liệu Bối cảnh dữ liệu và kho lưu trữ Blip. Thực thểThực thể dữ liệuBlip. Giao diện người dùng web (lượt xem) và Logic nghiệp vụ (bộ điều khiển)

Ứng dụng nghiên cứu điển hình, BlipAjax là một hệ thống đơn giản để thu thập, lưu trữ và truy xuất thông tin địa lý và các thông tin khác về khách hàng. Nó không sẵn sàng sản xuất từ ​​quan điểm thiết kế hoặc mã hóa; . Để biết mô tả đầy đủ về giải pháp ví dụ, hãy xem hướng dẫn đi kèm

Tóm lại, Trang Khách hàng/Chỉnh sửa bao gồm chế độ xem chính và ba chế độ xem một phần. Chế độ xem một phần thứ ba có thể là chế độ xem một phần để tạo địa chỉ email 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 từng phần thứ hai. Hình minh họa sau đây hiển thị 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 chế độ xem và hành động (phương thức) của bộ điều khiển được liên kết với việc hiển thị chế độ xem

Cách bao gồm javascript trong cshtml?

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 Bang/Khu vực với các giá trị tương ứng với giá trị được chọn trong danh sách 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 Bang/Khu vực phải được đặt lại

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

Có hai khía cạnh đối với việc triển khai JavaScript với các chế độ xem Razor một phần của Ajax

  1. Các thư viện JavaScript cung cấp chức năng Ajax mà ASP cần. NET Ajax phương pháp trợ giúp

  2. Các tập lệnh triển khai cụ thể 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 triển khai cụ thể là những tập lệnh điền vào các giá trị thả xuống Bang/Khu vực

Thư viện JavaScript

Việc triển khai thành công các chế độ xem từng phần của Ajax phụ thuộc vào việc tải đúng cách một số thư viện JavaScript

jQuery và các thư viện trên toàn trang web khác

ASP mặc định. NET MVC mẫu bao gồm một _Layout tiêu chuẩn. tệp cshtml triển khai các tính năng điều hướng 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 dạng xem trong dự án web, đây là một nơi tốt để bao gồm các tham chiếu tập lệnh triển khai chức năng cho các thành phần trang, chẳng hạn như

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
1 được tìm thấy .

Hầu hết các thư viện JavaScript được hiển thị ở cuối 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<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
2 của _Layout. cshtml sử dụng chức năng gói MVC. Gói duy nhất được tải trong 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<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
3
là phiên bản 2. 8. 3 của thư viện Modernizr, một phiên bản cũ của Modernizr được đưa vào cho mục đích phát triển. Tham chiếu Modernizr có trong _Layout. cshtml không nên được đưa vào mã sản xuất. Bao gồm các tham chiếu thư viện tập lệnh và tập lệnh ở cuối trang sẽ cải thiện hiệu suất hiển thị trang.

Chức năng giao diện người dùng do khung CSS Bootstrap cung cấp được bao gồm trong Bootstrap. thư viện 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

Định nghĩa của gói jquery cho phép tải phiên bản jQuery hiện 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ần cập nhật mã để giữ cho số phiên bản được đồng bộ hóa

Chức năng Ajax phụ thuộc vào thư viện jQuery chứ không phụ thuộc vào thư viện Bootstrap. Nếu dự án web không triển khai khung CSS Bootstrap, thư viện Bootstrap là không cần thiết. Trong giải pháp ví dụ, BlipAjax, khung CSS Bootstrap, được sử dụng để cung cấp chức năng và kiểu dáng giao diện người dùng cho một số thành phần giao diện người dùng, bao gồm các thành phần biểu mẫu như danh sách thả xuống Quốc gia và Bang/Khu vực

_Cách trình bày. cshtml

1DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>@ViewBag.Title - My ASP.NET Applicationtitle>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10head>
11<body>
12    <div class="navbar navbar-inverse navbar-fixed-top">
13        <div class="container">
14            <div class="navbar-header">
15                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
16                    <span class="icon-bar">span>
17                    <span class="icon-bar">span>
18                    <span class="icon-bar">span>
19                button>
20                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
21            div>
22            <div class="navbar-collapse collapse">
23                <ul class="nav navbar-nav">
24                    <li>@Html.ActionLink("Home", "Index", "Home")li>
25                    <li>@Html.ActionLink("About", "About", "Home")li>
26                    <li>@Html.ActionLink("Contact", "Contact", "Home")li>
27                ul>
28            div>
29        div>
30    div>
31    <div class="container body-content">
32        @RenderBody()
33        <hr />
34        <footer>
35            <p>@DateTime.Now.Year - My ASP.NET Applicationp>
36        footer>
37    div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42body>
43html>

html

Lưu ý rằng _Layout. tệp cshtml cũng bao gồm một

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
4 Chỉ thị dao cạo cho phần
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
5
. Điều này làm cho mọi tập lệnh và tham chiếu thư viện JavaScript bổ sung được tải sau gói jQuery. Thứ tự của các phần tử này rất quan trọng để chức năng Ajax hoạt động và thứ tự tải là một lĩnh vực mà các nhà phát triển thường gặp khó khăn.

xác thực jquery. js, jquery-validate-không phô trương. js và jquery-không phô trương-ajax. js

Các trang bao gồm các 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<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
1 , chẳng hạn như Khách hàng/Chỉnh sửa, có thể triển khai xác thực dữ liệu phía máy khách bằng các thư viện jQuery bổ sung và tùy chọn, . Gói
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
7
tải cả hai thư viện bắt buộc.

  1. xác thực jquery. js

  2. jquery-xác thực-không phô trương. js

Các thư viện này được tải thông qua gói jqueryval

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

jquery-không phô trương-ajax. js

Thư viện này được tải thông qua gói jqueryunobtrusive

Lưu ý rằng quy ước đặt tên tiêu chuẩn cho các thư viện có khả năng gây nhầm lẫn. gói jqueryunobtrusive không bao gồm thư viện cho Ajax kín đáo và gói jqueryunobtrusive không bao gồm thư viện để xác thực kín đáo

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

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
8 chỉ thị cho
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
9 . cshtml. Các gói được lưu ý ở trên được bao gồm trong phần này và tuân theo thứ tự của các lệnh trong _Layout. cshtml, tải các thư viện được chỉ ra ở trên sau khi tải gói jquery. Thứ tự này là cần thiết để triển khai đúng cách thư viện JavaScript Ajax; .
section specified in _Layout.cshtml. The bundles noted above are included in this section and, following the order of the directives in _Layout.cshtml, load the libraries indicated above after loading the jquery bundle. This order is essential to proper implementation of the Ajax JavaScript library; it depends on jQuery.

Thứ tự tải cũng rất quan trọng để triển khai đúng các thư viện xác thực. Cả jquery-validate. js và jquery-xác thực-không phô trương. js yêu cầu phải tải thư viện jQuery trước

chỉnh sửa. Chế độ xem gốc của cshtml cũng bao gồm mã JavaScript dành riêng cho trang sẽ được mô tả chi tiết trong phần tiếp theo

Khách hàng/Chỉnh sửa. cshtml

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}

html

Lưu ý rằng phía máy chủ

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
10 được bao gồm trong
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
11
directives for the validation and Ajax bundles to eliminate any confusion that might arise over which scripts are included in the bundles as a result of the standard naming convention.

Cũng lưu ý rằng thứ tự của các lệnh này là không bắt buộc, nhưng vì chức năng Ajax quan trọng đối với hoạt động bình thường của trang hơn là xác thực phía máy khách, nên tải thư viện đó ngay sau thư viện jQuery để giảm thiểu . Điều này đặc biệt quan trọng khi thêm sự phức tạp của việc tải thư viện JavaScript từ mạng phân phối nội dung (CDN) trong sản xuất với phiên bản cục bộ của thư viện dưới dạng dự phòng khi CDN không khả dụng

Cuối cùng, lưu ý rằng các 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<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
1 của trang Khách hàng/Chỉnh sửa được bao gồm trong các chế độ xem một phần, thay vì phần Chỉnh sửa gốc. chế độ xem cshtml. Tuy nhiên, quy ước dành cho JavaScript được liên kết với chế độ xem một phần được đặt trong. cshtml cho chế độ xem gốc, thay vì chế độ xem một phần mà chúng áp dụng. Phần tiếp theo sẽ chỉ ra quy ước này trong thực tế cũng như mô tả một ngoại lệ đáng chú ý.

Tập lệnh triển khai cụ thể

Trang Khách hàng/Chỉnh sửa bao gồm các chức năng JavaScript triển khai cụ thể điền các giá trị cho danh sách thả xuống Quốc gia và Bang/Khu vực trong cả hai phần Chỉnh sửa chi tiết khách hàng và Thêm địa chỉ gửi thư mới của trang. Như đã lưu ý ở trên, quy ước mã hóa trong ASP. NET MVC là đặt các tập lệnh cho chế độ xem một phần trong. cshtml cho chế độ xem chính (đây là một ngoại lệ quan trọng đối với quy ước này, sẽ được mô tả chi tiết bên dưới)

Triển khai Khách hàngChỉnh sửa một phần. cshtml

Vì các yếu tố kiểm soát liên quan đến tập lệnh được bao gồm trong chế độ xem một phần CustomerEditPartial. cshtml, sẽ rất hữu ích khi xem chế độ xem một phần khi kiểm tra chức năng của tập lệnh

Khách hàngChỉnh sửaMột phần. cshtml

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
1

html

Lưu ý

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
13 phương pháp trợ giúp cho
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
14
và .
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
15
elements.

Ngoài ra, hãy lưu ý mã Dao cạo sau

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
7

html

Vì khách hàngChỉnh sửa một phần. cshtml là chế độ xem một phần đầu tiên được tải trong Chỉnh sửa. chế độ xem cha cshtml và vì Chỉnh sửa. cshtml không có 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<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
16 , cần phải yêu cầu công cụ Dao cạo không sử dụng _Layout. cshtml để xem một phần. Nếu không có chỉ thị này, công cụ Dao cạo sẽ bị nhầm lẫn và hiển thị các phần tử từ tệp bố cục, chẳng hạn như chân trang.

Tập lệnh cho khách hàngChỉnh sửa một phần. cshtml

Trường hợp sử dụng cho biểu mẫu để chỉnh sửa Quốc gia và Tiểu bang/Khu vực được liên kết với khách hàng hơi khác so với trường hợp thêm địa chỉ bưu chính mới, vì vậy chức năng tập lệnh cũng hơi khác. Khi trang Khách hàng/Chỉnh sửa được sử dụng, khách hàng đã tồn tại, do đó, có một bản ghi hiện có bao gồm các giá trị cho Quốc gia và Tiểu bang/Khu vực của khách hàng. Theo đó, tập lệnh cần điền vào danh sách các giá trị cho trường Bang/Khu vực với các giá trị được liên kết với giá trị hiện có cho Quốc gia và đặt giá trị của tùy chọn kiểm soát Khu vực tương ứng, như sau trong hàm JavaScript đầu tiên trong Khách hàng/Chỉnh sửa. cshtml, hiển thị bên dưới

Lưu ý rằng JavaScript dành riêng cho triển khai sử dụng thư viện jQuery (" ______117 ").

Dấu ba chấm ("

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
18 ") cho biết những vị trí mà mã không liên quan đã được biên tập lại cho ngắn gọn.

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
1

html

Hàm này nhận giá trị của

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
19 và
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
70
elements provided by the view model CustomerEditViewModel.cs, calls the
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
71
để thêm các giá trị thích hợp vào
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
70
.
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
70
element.

Hàm

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
71 gọi phương thức
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
75
để lấy . Sau đó, nó nối các cặp khóa-giá trị này vào danh sách các giá trị cho 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<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
70
element. It then appends these key-value pairs to the list of values for the
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
70
, thêm một bản ghi trống trước khi làm như vậy để trình bày trình đơn thả xuống trong . Như đã lưu ý ở trên, chức năng ____178 để Chỉnh sửa. cshtml đặt lại giá trị đã chọn cho
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
70
sau khi danh sách được tải.

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
3

html

Để biết thêm thông tin về hành động của bộ điều khiển ____210 , hãy xem giải pháp mẫu BlipAjax trên GitHub.

Lưu ý về liên kết tập lệnh cho chế độ xem một phần

Như đã lưu ý ở trên, quy ước dành cho JavaScript được liên kết với các chế độ xem từng phần của Razor là đưa chúng vào chế độ xem chính. cshtml. Các hàm JavaScript có thể được liên kết với các thành phần trên chế độ xem một phần; . Điều này xảy ra khi tải chế độ xem một phần bằng phương thức trợ giúp

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
11 , như trong phần này từ Chỉnh sửa. cshtml.

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
6

html

Chế độ xem một phần CustomerEditPartial. cshtml và AddressTypePartial. cshtml bật "thành phần hóa" của Khách hàng/Chỉnh sửa. chế độ xem cshtml. Cả hai chế độ xem một phần đều được hiển thị cùng lúc với chế độ xem gốc và do đó

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
19 và
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
70
elements are available for binding when the
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
14
event occurs.

Tập lệnh cho CreatePostalAddressPartial. cshtml

Hiển thị chế độ xem một phần CreatePostalAddressPartial. cshtml được bắt đầu bởi sự kiện ____215 của biểu mẫu Ajax được tạo bởi AddressTypePartial. chế độ xem một phần cshtml, được định nghĩa như sau.

Địa chỉLoạiMột phần. cshtml

1DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>@ViewBag.Title - My ASP.NET Applicationtitle>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10head>
11<body>
12    <div class="navbar navbar-inverse navbar-fixed-top">
13        <div class="container">
14            <div class="navbar-header">
15                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
16                    <span class="icon-bar">span>
17                    <span class="icon-bar">span>
18                    <span class="icon-bar">span>
19                button>
20                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
21            div>
22            <div class="navbar-collapse collapse">
23                <ul class="nav navbar-nav">
24                    <li>@Html.ActionLink("Home", "Index", "Home")li>
25                    <li>@Html.ActionLink("About", "About", "Home")li>
26                    <li>@Html.ActionLink("Contact", "Contact", "Home")li>
27                ul>
28            div>
29        div>
30    div>
31    <div class="container body-content">
32        @RenderBody()
33        <hr />
34        <footer>
35            <p>@DateTime.Now.Year - My ASP.NET Applicationp>
36        footer>
37    div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42body>
43html>
1

csharp

Mặc dù

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
16 biểu mẫu phương thức trợ giúp, hành động của bộ điều khiển
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
17
kicks off the rendering of the Ajax partial view rather than an
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
18
action for the CreatePostalAddressPartial.cshtml partial view. The partial view replaces the empty
1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
19
trống của Chỉnh sửa. cshtml (để được giải thích chi tiết hơn về cách sử dụng chế độ xem từng phần của Ajax, hãy xem hướng dẫn đi kèm).

Bởi vì chế độ xem một phần địa chỉ gửi thư không được hiển thị khi chế độ xem chính và các chế độ xem từng phần trước đó được hiển thị, JavaScript được tải với chế độ xem chính Chỉnh sửa. cshtml không thể bị ràng buộc với các thành phần trên chế độ xem một phần địa chỉ bưu điện

Theo đó, các tập lệnh được liên kết với chế độ xem từng phần của Ajax phải được bao gồm trong chế độ xem từng phần, thay vì chế độ xem chính. Đây là một ngoại lệ quan trọng đối với quy ước mã hóa, được yêu cầu bởi ràng buộc tập lệnh

Lưu ý rằng một số thành phần biểu mẫu đã được biên tập lại cho ngắn gọn, như được hiển thị bằng dấu chấm lửng ("

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
18 ").

TạoBưu chínhĐịa chỉMột phần. cshtml

1DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>@ViewBag.Title - My ASP.NET Applicationtitle>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10head>
11<body>
12    <div class="navbar navbar-inverse navbar-fixed-top">
13        <div class="container">
14            <div class="navbar-header">
15                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
16                    <span class="icon-bar">span>
17                    <span class="icon-bar">span>
18                    <span class="icon-bar">span>
19                button>
20                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
21            div>
22            <div class="navbar-collapse collapse">
23                <ul class="nav navbar-nav">
24                    <li>@Html.ActionLink("Home", "Index", "Home")li>
25                    <li>@Html.ActionLink("About", "About", "Home")li>
26                    <li>@Html.ActionLink("Contact", "Contact", "Home")li>
27                ul>
28            div>
29        div>
30    div>
31    <div class="container body-content">
32        @RenderBody()
33        <hr />
34        <footer>
35            <p>@DateTime.Now.Year - My ASP.NET Applicationp>
36        footer>
37    div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42body>
43html>
7

html

Lưu ý các tính năng sau của chế độ xem một phần

  • Phần tử ____331 không nằm trong phần tập lệnh.

  • Tên của các thành phần cho trường quốc gia và khu vực,

    1@*Models are in partial views.*@
    2
    3@section header {
    4
    5}
    6
    7@{
    8    ViewBag.Title = "Edit Customer Information";
    9}
    10
    11<div class="row">
    12    <div class="col-md-12">
    13        <h2>Edit Customer Informationh2>
    14    div>
    15div>
    16
    17<div id="EditCustomerPartial">
    18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    19div>
    20
    21<div id="SelectAddressTypePartial">
    22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    23div>
    24
    25<div id="CreateAddress">div>
    26
    27<div class="row">
    28    <div class="form-group">
    29        <div class="col-md-12">
    30            <hr />
    31            <div>
    32                @Html.ActionLink("Back to List", "Index")
    33            div>
    34        div>
    35    div>
    36div>
    37
    38@section Scripts {
    39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
    40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
    41
    42    <script type="text/javascript">
    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    script>
    79}
    32 và
    1@*Models are in partial views.*@
    2
    3@section header {
    4
    5}
    6
    7@{
    8    ViewBag.Title = "Edit Customer Information";
    9}
    10
    11<div class="row">
    12    <div class="col-md-12">
    13        <h2>Edit Customer Informationh2>
    14    div>
    15div>
    16
    17<div id="EditCustomerPartial">
    18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    19div>
    20
    21<div id="SelectAddressTypePartial">
    22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    23div>
    24
    25<div id="CreateAddress">div>
    26
    27<div class="row">
    28    <div class="form-group">
    29        <div class="col-md-12">
    30            <hr />
    31            <div>
    32                @Html.ActionLink("Back to List", "Index")
    33            div>
    34        div>
    35    div>
    36div>
    37
    38@section Scripts {
    39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
    40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
    41
    42    <script type="text/javascript">
    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    script>
    79}
    33
    are distinct from the names of the similar elements on the CustomerEditPartial.cshtml partial view. This is essential for proper binding: be sure elements have distinct ____334
    1@*Models are in partial views.*@
    2
    3@section header {
    4
    5}
    6
    7@{
    8    ViewBag.Title = "Edit Customer Information";
    9}
    10
    11<div class="row">
    12    <div class="col-md-12">
    13        <h2>Edit Customer Informationh2>
    14    div>
    15div>
    16
    17<div id="EditCustomerPartial">
    18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    19div>
    20
    21<div id="SelectAddressTypePartial">
    22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    23div>
    24
    25<div id="CreateAddress">div>
    26
    27<div class="row">
    28    <div class="form-group">
    29        <div class="col-md-12">
    30            <hr />
    31            <div>
    32                @Html.ActionLink("Back to List", "Index")
    33            div>
    34        div>
    35    div>
    36div>
    37
    38@section Scripts {
    39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
    40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
    41
    42    <script type="text/javascript">
    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    script>
    79}
    35
    riêng biệt, nếu phù hợp.

  • Sự kiện kích hoạt tập hợp các giá trị cho trình đơn thả xuống

    1@*Models are in partial views.*@
    2
    3@section header {
    4
    5}
    6
    7@{
    8    ViewBag.Title = "Edit Customer Information";
    9}
    10
    11<div class="row">
    12    <div class="col-md-12">
    13        <h2>Edit Customer Informationh2>
    14    div>
    15div>
    16
    17<div id="EditCustomerPartial">
    18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    19div>
    20
    21<div id="SelectAddressTypePartial">
    22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    23div>
    24
    25<div id="CreateAddress">div>
    26
    27<div class="row">
    28    <div class="form-group">
    29        <div class="col-md-12">
    30            <hr />
    31            <div>
    32                @Html.ActionLink("Back to List", "Index")
    33            div>
    34        div>
    35    div>
    36div>
    37
    38@section Scripts {
    39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
    40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
    41
    42    <script type="text/javascript">
    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    script>
    79}
    33 là trình đơn thả xuống
    1@*Models are in partial views.*@
    2
    3@section header {
    4
    5}
    6
    7@{
    8    ViewBag.Title = "Edit Customer Information";
    9}
    10
    11<div class="row">
    12    <div class="col-md-12">
    13        <h2>Edit Customer Informationh2>
    14    div>
    15div>
    16
    17<div id="EditCustomerPartial">
    18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    19div>
    20
    21<div id="SelectAddressTypePartial">
    22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    23div>
    24
    25<div id="CreateAddress">div>
    26
    27<div class="row">
    28    <div class="form-group">
    29        <div class="col-md-12">
    30            <hr />
    31            <div>
    32                @Html.ActionLink("Back to List", "Index")
    33            div>
    34        div>
    35    div>
    36div>
    37
    38@section Scripts {
    39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
    40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
    41
    42    <script type="text/javascript">
    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    script>
    79}
    37< .
    event for the
    1@*Models are in partial views.*@
    2
    3@section header {
    4
    5}
    6
    7@{
    8    ViewBag.Title = "Edit Customer Information";
    9}
    10
    11<div class="row">
    12    <div class="col-md-12">
    13        <h2>Edit Customer Informationh2>
    14    div>
    15div>
    16
    17<div id="EditCustomerPartial">
    18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    19div>
    20
    21<div id="SelectAddressTypePartial">
    22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    23div>
    24
    25<div id="CreateAddress">div>
    26
    27<div class="row">
    28    <div class="form-group">
    29        <div class="col-md-12">
    30            <hr />
    31            <div>
    32                @Html.ActionLink("Back to List", "Index")
    33            div>
    34        div>
    35    div>
    36div>
    37
    38@section Scripts {
    39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
    40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
    41
    42    <script type="text/javascript">
    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    script>
    79}
    32
    element.

  • Mặc dù tập lệnh được tải với chế độ xem một phần nhưng nó có thể tham chiếu các thư viện và tập lệnh trên Chỉnh sửa. dạng xem gốc cshtml, bao gồm thư viện jQuery ("
    1@*Models are in partial views.*@
    2
    3@section header {
    4
    5}
    6
    7@{
    8    ViewBag.Title = "Edit Customer Information";
    9}
    10
    11<div class="row">
    12    <div class="col-md-12">
    13        <h2>Edit Customer Informationh2>
    14    div>
    15div>
    16
    17<div id="EditCustomerPartial">
    18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    19div>
    20
    21<div id="SelectAddressTypePartial">
    22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    23div>
    24
    25<div id="CreateAddress">div>
    26
    27<div class="row">
    28    <div class="form-group">
    29        <div class="col-md-12">
    30            <hr />
    31            <div>
    32                @Html.ActionLink("Back to List", "Index")
    33            div>
    34        div>
    35    div>
    36div>
    37
    38@section Scripts {
    39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
    40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
    41
    42    <script type="text/javascript">
    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    script>
    79}
    17
    ") và hàm
    1@*Models are in partial views.*@
    2
    3@section header {
    4
    5}
    6
    7@{
    8    ViewBag.Title = "Edit Customer Information";
    9}
    10
    11<div class="row">
    12    <div class="col-md-12">
    13        <h2>Edit Customer Informationh2>
    14    div>
    15div>
    16
    17<div id="EditCustomerPartial">
    18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    19div>
    20
    21<div id="SelectAddressTypePartial">
    22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
    23div>
    24
    25<div id="CreateAddress">div>
    26
    27<div class="row">
    28    <div class="form-group">
    29        <div class="col-md-12">
    30            <hr />
    31            <div>
    32                @Html.ActionLink("Back to List", "Index")
    33            div>
    34        div>
    35    div>
    36div>
    37
    38@section Scripts {
    39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
    40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
    41
    42    <script type="text/javascript">
    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    script>
    79}
    71
    .

Điểm cuối cùng là điểm mạnh để sử dụng tập lệnh tùy chỉnh với chế độ xem từng phần của Ajax. Chế độ xem một phần được hiển thị với Ajax không phô trương cần bao gồm vừa đủ mã tập lệnh để xử lý liên kết phần tử và gọi các thư viện và hàm trong phần gốc, giúp ngăn chặn mã trùng lặp

Ngoài ra, xin lưu ý rằng xác thực phía máy khách kín đáo được tải với gói

1@*Models are in partial views.*@
2
3@section header {
4
5}
6
7@{
8    ViewBag.Title = "Edit Customer Information";
9}
10
11<div class="row">
12    <div class="col-md-12">
13        <h2>Edit Customer Informationh2>
14    div>
15div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23div>
24
25<div id="CreateAddress">div>
26
27<div class="row">
28    <div class="form-group">
29        <div class="col-md-12">
30            <hr />
31            <div>
32                @Html.ActionLink("Back to List", "Index")
33            div>
34        div>
35    div>
36div>
37
38@section Scripts {
39    @Scripts.Render("~/bundles/jqueryunobtrusive") @*For unobtrusive-ajax*@
40    @Scripts.Render("~/bundles/jqueryval") @*For validate and validate-unobtrusive*@
41
42    <script type="text/javascript">
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    script>
79}
7 trong chế độ xem gốc sẽ hoạt động trên các thành phần biểu mẫu trong chế độ xem .

Sự kết luận

Khi được cấu trúc đúng cách, mã JavaScript có thể mở rộng sức mạnh của thư viện JavaScript và mã tùy chỉnh cho các chế độ xem từng phần của Razor được hiển thị bằng thư viện Ajax kín đáo. Các bước chính là

  • Tải jQuery trong _Layout. cshtml

  • Tải jquery-unobtrusive-ajax. js, jquery. xác thực. js và jquery. xác thực. không phô trương. js trong phần ____362 của các trang thích hợp

  • Bao gồm các tập lệnh cho các chế độ xem một phần được hiển thị với chế độ xem chính trong chế độ xem chính

  • Bao gồm các tập lệnh cho chế độ xem một phần được hiển thị bằng Ajax trong chế độ xem một phần

  • Bao gồm các chức năng phổ biến trong phần ______362 của chế độ xem chính

Với những kỹ thuật này, có thể tạo các trang web mạnh mẽ, tương tác, dựa trên dữ liệu với mã tối thiểu và không phải phụ thuộc vào chi phí phát triển của việc triển khai khung phía máy khách

Thêm thông tin

Nếu bạn muốn tìm hiểu sâu hơn về các chủ đề được thảo luận trong hướng dẫn này hoặc thử nghiệm với mã được hiển thị ở trên, thì đây là danh sách tài nguyên được chọn

Dự án mẫu

Giải pháp Visual Studio hoàn chỉnh được mô tả trong hướng dẫn này có sẵn trên GitHub

BlipAjax

Dự án mẫu được cung cấp nguyên trạng, không có bất kỳ bảo đảm nào được thể hiện hay ngụ ý. Cả PluralSight và tác giả đều không chịu trách nhiệm về bất kỳ lỗi hoặc thiếu sót nào

Các khóa học về thị giác số nhiều liên quan

ASP. NET MVC Các chủ đề nâng cao của Scott Allen, ngày 22 tháng 7 năm 2009. Mô-đun đầu tiên của khóa học này, Ajax với ASP. NET MVC cung cấp một cái nhìn tổng quan về công nghệ liên quan

Các nguồn lực khác

học. jquery. com — Đây là trang web chính thức cho tài liệu jQuery, được cung cấp bởi jQuery Foundation

Microsoft. Gói và thu nhỏ, của Rick Anderson, ngày 23 tháng 8 năm 2012 — Đây là hướng dẫn cần thiết để triển khai gói và thu nhỏ trong ASP. NET MVC. Nếu bạn đang viết cho thiết bị di động – và bạn nên như vậy – Google sẽ đánh giá thấp hiệu suất trang của bạn trừ khi bạn sử dụng gói và thu nhỏ, làm ảnh hưởng đến hiệu suất của bạn trong tìm kiếm

Microsoft. Hệ thống. mạng. không gian tên Mvc và Microsoft. Hệ thống. mạng. mvc. Không gian tên Ajax — Đây là các tham chiếu tài liệu chuẩn cho lớp AjaxHelper, AjaxExtensions (bao gồm phương thức BeginForm) và các lớp AjaxOptions. Lưu ý rằng nếu bạn tìm kiếm thông tin trên tài liệu. Microsoft. com, nó sẽ khởi động bạn đến các URL này. Mặc dù trang này đề cập đến Visual Studio 2013 nhưng trên thực tế, đây là tài liệu mới nhất

Wikipedia. Ajax (lập trình) — Một bản tóm tắt hay về kiến ​​trúc, lịch sử và triển khai Ajax. Nền tảng tốt cho người mới bắt đầu tìm kiếm nền tảng cơ bản trong công nghệ

Tôi có thể sử dụng JavaScript trong MVC không?

JavaScript có thể được sử dụng trong asp. net mvc .

Bạn có thể sử dụng JavaScript trong Razor không?

Bạn có thể gọi các phương thức JavaScript từ các trang Blazor với sự trợ giúp của JavaScript Interop bằng cách đưa phần phụ thuộc IJSRuntime vào trang dao cạo . Sau đó tham khảo tập lệnh trong trang HTML của ứng dụng blazor. Kiểm tra liên kết này để biết thêm thông tin.

Làm cách nào để gọi hàm JavaScript ở chế độ xem một phần trong MVC?

Làm cách nào để gọi hàm JavaScript ở chế độ xem một phần trong MVC? .
Tải jQuery trong _Layout. .
Tải jquery-không phô trương-ajax. .
Bao gồm các tập lệnh cho các chế độ xem một phần được hiển thị với chế độ xem chính trong chế độ xem chính
Bao gồm các tập lệnh cho chế độ xem một phần được hiển thị bằng Ajax trong chế độ xem một phần

HTML và Cshtml có giống nhau không?

Cshtml về cơ bản là tiện ích mở rộng chế độ xem dao cạo và bất kỳ chế độ xem nào cuối cùng cũng hiển thị trong html . Bạn cần sử dụng Dao cạo trong ứng dụng của mình vì nó hỗ trợ mã phía máy chủ nhưng html thô thì không.