Hướng dẫn where do you put javascript on a razor page? - bạn đặt javascript trên trang dao cạo ở đâu?

Sử dụng phần tử giả

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.


    // Now add markers
    @foreach (var item in Model) {
        <text>
            var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
            var title = '@(Model.Title)';
            var description = '@(Model.Description)';
            var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var marker = new google.maps.Marker({
                position: latLng,
                title: title,
                map: map,
                draggable: false
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        </text>
    }
</script>

Update:

Scott Guthrie gần đây đã đăng về cú pháp

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

Đã cập nhật mã trên để làm cho cuộc gọi đến

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

Để làm rõ,

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

Cập nhật 2

Điều đáng chú ý là mã xem thực sự không phải là một nơi tốt để đặt mã JavaScript. Mã JavaScript phải được đặt trong tệp ____20 tĩnh và sau đó nó sẽ nhận được dữ liệu mà nó cần từ cuộc gọi AJAX hoặc bằng cách quét các thuộc tính

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

Xem mã

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

Mã JavaScript

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

Giới thiệu

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

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

Một số chi tiết

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

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

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

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

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

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

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

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

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

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

Thư viện JavaScript

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

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

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

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

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

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

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

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

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

_Layout.cshtml

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

HTML

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

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

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

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

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

1. jquery-validate-unobtrusive.js

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

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

jquery-unobtrusive-ajax.js

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

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

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

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

Thứ tự tải cũng rất quan trọng để thực hiện đúng các thư viện xác thực. Cả jQuery-validate.js và jQuery-validate-unobtrusius.js yêu cầu thư viện jQuery phải được tải trước.jquery-validate.js and jquery-validate-unobtrusive.js require the jQuery library to be loaded first.

Chế độ xem cha mẹ EDIT.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.Edit.cshtml parent view also includes page-specific JavaScript code which will be described in detail in the next section.

Customer/Edit.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 Information</h2>
14    </div>
15</div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19</div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23</div>
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>
36</div>
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($('<option/>', {
66                    value: null,
67                    text: ""
68                }));
69                $.each(regions, function (index, region) {
70                    regionsSelect.append($('<option/>', {
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ủ

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

Cũng lưu ý rằng thứ tự của các chỉ thị này là không bắt buộc, nhưng vì chức năng AJAX quan trọng hơn đối với hoạt động đúng của trang so với xác thực phía máy khách, nên nên tải thư viện đó ngay sau thư viện jQuery để giảm thiểu Khả năng các lỗi tải sẽ ngăn thư viện AJAX tải. Điều này đặc biệt quan trọng khi thêm sự phức tạp của việc tải các thư viện JavaScript từ các 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 như là một dự phòng khi CDN không có sẵn.

Cuối cùng, lưu ý rằng các yếu tố

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

Các kịch bản cụ thể thực hiện

Trang khách hàng/chỉnh sửa bao gồm các chức năng JavaScript dành riêng cho triển khai, trang web các giá trị cho danh sách thả xuống quốc gia và tiểu bang/khu vực trong cả hai chi tiết khách hàng chỉnh sửa và thêm một phần địa chỉ bưu chính 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 một chế độ xem một phần trong tệp .cshtml cho chế độ xem cha mẹ (đâ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).Customer/Edit page includes implementation-specific JavaScript functions that populate the values for the Country and State/Region dropdown lists in both the Edit customer details and Add a new postal address sections of the page. As noted above, the coding convention in ASP.NET MVC is to put the scripts for a partial view in the .cshtml file for the parent view (here is one important exception to this convention, which will be described in detail below).

Thực hiện khách hàngDitPartial.cshtmlCustomerEditPartial.cshtml

Vì các yếu tố kiểm soát liên quan đến các tập lệnh được bao gồm trong chế độ xem một phần của customereditpartial.cshtml, sẽ rất hữu ích khi xem xét chế độ xem một phần khi kiểm tra chức năng của các tập lệnh.CustomerEditPartial.cshtml, it will be helpful to look at the partial view when examining the functionality of the scripts.

CustomerEditPartial.cshtml

1@model Blip.Entities.Customers.ViewModels.CustomerEditViewModel
2
3@{
4    Layout = null;
5}
6
7@using (Html.BeginForm("EditCustomerPartial", "Customer", FormMethod.Post))
8{
9    @Html.AntiForgeryToken()
10
11    <div class="form-horizontal">
12        <hr />
13        <h4>Edit customer details</h4>
14        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
15        <div class="form-group">
16            @Html.LabelFor(model => model.CustomerID, htmlAttributes: new { @class = "control-label col-md-2" })
17            <div class="col-md-10">
18                @Html.EditorFor(model => model.CustomerID, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
19            </div>
20        </div>
21
22        <div class="form-group">
23            @Html.LabelFor(model => model.CustomerName, htmlAttributes: new { @class = "control-label col-md-2" })
24            <div class="col-md-10">
25                @Html.EditorFor(model => model.CustomerName, new { htmlAttributes = new { @class = "form-control" } })
26                @Html.ValidationMessageFor(model => model.CustomerName, "", new { @class = "text-danger" })
27            </div>
28        </div>
29
30        <div class="form-group">
31            @Html.LabelFor(model => model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
32            <div class="col-md-10">
33                @Html.DropDownListFor(model => model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", @id="Country" })
34                @Html.ValidationMessageFor(model => model.SelectedCountryIso3, "", new { @class = "text-danger" })
35            </div>
36        </div>
37
38        <div class="form-group">
39            @Html.LabelFor(model => model.SelectedRegionCode, htmlAttributes: new { @class = "control-label col-md-2" })
40            <div class="col-md-10">
41                @Html.DropDownListFor(model => model.SelectedRegionCode, new SelectList(Model.Regions, "Value", "Text"), htmlAttributes: new { @class = "form-control", @id="Region" })
42                @Html.ValidationMessageFor(model => model.SelectedRegionCode, "", new { @class = "text-danger" })
43            </div>
44        </div>
45
46        <div class="form-group">
47            <div class="col-md-offset-2 col-md-10">
48                <input type="submit" value="Save" class="btn btn-primary" />
49            </div>
50        </div>
51    </div>
52}

HTML

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

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

Cũng lưu ý rằng thứ tự của các chỉ thị này là không bắt buộc, nhưng vì chức năng AJAX quan trọng hơn đối với hoạt động đúng của trang so với xác thực phía máy khách, nên nên tải thư viện đó ngay sau thư viện jQuery để giảm thiểu Khả năng các lỗi tải sẽ ngăn thư viện AJAX tải. Điều này đặc biệt quan trọng khi thêm sự phức tạp của việc tải các thư viện JavaScript từ các 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 như là một dự phòng khi CDN không có sẵn.

1@{
2    Layout = null;
3}

HTML

Cuối cùng, lưu ý rằng các yếu tố

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

Các kịch bản cụ thể thực hiệnCustomerEditPartial.cshtml

Trang khách hàng/chỉnh sửa bao gồm các chức năng JavaScript dành riêng cho triển khai, trang web các giá trị cho danh sách thả xuống quốc gia và tiểu bang/khu vực trong cả hai chi tiết khách hàng chỉnh sửa và thêm một phần địa chỉ bưu chính 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 một chế độ xem một phần trong tệp .cshtml cho chế độ xem cha mẹ (đâ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).Customer/Edit page is used, the customer already exists, so there is an existing record including values for the customer's Country and State/Region. Accordingly, the script needs to populate the list of values for the State/Region field with values associated with the existing value for Country and set the value of the Region control accordingly, as follows in the first of the JavaScript functions in Customer/Edit.cshtml, shown below.

Thực hiện khách hàngDitPartial.cshtml

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

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

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

1<script type="text/javascript">
2    $(document).ready(function () {
3        var selectedCountry = $("#Country").val();
4        var selectedRegion = $("#Region").val();
5        var regionsSelect = $('#Region');
6        AddRegions(selectedCountry, regionsSelect);
7        if (selectedRegion != null && selectedRegion != '') {
8            regionsSelect.val = selectedRegion;
9        };
10    });
11...
12</script>

HTML

Lưu ý các phương pháp trợ giúp

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude,
              markerData.Description, markerData.Title);
});

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

Ngoài ra, lưu ý mã dao cạo sau:

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<script type="text/javascript">
2...
3function AddRegions(selectedCountry, regionsSelect) {
4    $.getJSON('@Url.Action("GetRegions")', { iso3: selectedCountry }, function (regions) {
5        if (regions != null && !jQuery.isEmptyObject(regions)) {
6            regionsSelect.append($('<option/>', {
7                value: null,
8                text: ""
9            }));
10            $.each(regions, function (index, region) {
11                regionsSelect.append($('<option/>', {
12                    value: region.Value,
13                    text: region.Text
14                }));
15            });
16        };
17    });
18</script>

HTML

Vì khách hàng đã được tải trong chế độ xem cha mẹ chỉnh sửa. Không có chỉ thị này, động cơ dao cạo bị nhầm lẫn và hiển thị các yếu tố từ tệp bố cục, chẳng hạn như chân trang.

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 Information</h2>
14    </div>
15</div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19</div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23</div>
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>
36</div>
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($('<option/>', {
66                    value: null,
67                    text: ""
68                }));
69                $.each(regions, function (index, region) {
70                    regionsSelect.append($('<option/>', {
71                        value: region.Value,
72                        text: region.Text
73                    }));
74                });
75            };
76        });
77    }
78    </script>
79}

Tập lệnh cho khách hàngDitPartial.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 có phần khác so với việc thêm một địa chỉ bưu chính mới, vì vậy chức năng tập lệnh cũng có phần khác nhau. Khi khách hàng/trang chỉnh sửa được sử dụng, khách hàng đã tồn tại, do đó, có một hồ sơ 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 đưa ra danh sách các giá trị cho trường Trạng thái/Vùng với các giá trị liên quan đến giá trị hiện có của quốc gia và đặt giá trị của điều khiển khu vực phù hợp, như sau trong các hàm đầu tiên của JavaScript trong Khách hàng/Chỉnh sửa. CSHTML, hiển thị dưới đây..cshtml. JavaScript functions can be bound to elements on the partial view; the partial view is rendered at the same time as the parent view. This happens when loading the partial view with 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 Information</h2>
14    </div>
15</div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19</div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23</div>
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>
36</div>
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($('<option/>', {
66                    value: null,
67                    text: ""
68                }));
69                $.each(regions, function (index, region) {
70                    regionsSelect.append($('<option/>', {
71                        value: region.Value,
72                        text: region.Text
73                    }));
74                });
75            };
76        });
77    }
78    </script>
79}

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.
    ...
    // Declare addMarker function
    function addMarker(latitude, longitude, title, description, map)
    {
        var latLng = new google.maps.LatLng(latitude, longitude);
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    // Now add markers
    @foreach (var item in Model) {
        @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
    }
</script>

HTML

Các chế độ xem một phần của customerEditPartial.cshtml và địa chỉTypePartial.cshtml cho phép "thành phần" của chế độ xem khách hàng/edit.cshtml. Cả hai chế độ xem một phần được hiển thị cùng lúc với chế độ xem cha mẹ, và do đó các phần tử

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

1<!DOCTYPE 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 Application</title>
7    @Styles.Render("~/Content/css")
8    @Scripts.Render("~/bundles/modernizr")
9    @RenderSection("header", required: false)
10</head>
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 Application</p>
36        </footer>
37    </div>
38
39    @Scripts.Render("~/bundles/jquery")
40    @Scripts.Render("~/bundles/bootstrap")
41    @RenderSection("scripts", required: false)
42</body>
43</html>

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 Information</h2>
14    </div>
15</div>
16
17<div id="EditCustomerPartial">
18    @Html.Action("EditCustomerPartial", new { id = Url.RequestContext.RouteData.Values["id"] })
19</div>
20
21<div id="SelectAddressTypePartial">
22    @Html.Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })
23</div>
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>
36</div>
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($('<option/>', {
66                    value: null,
67                    text: ""
68                }));
69                $.each(regions, function (index, region) {
70                    regionsSelect.append($('<option/>', {
71                        value: region.Value,
72                        text: region.Text
73                    }));
74                });
75            };
76        });
77    }
78    </script>
79}