ASP.NET Core Razor 頁面在 AJAX POST 后更新部分視圖嵌套 HTML 表

Question

我試圖在 AJAX 帖子后更新局部視圖中的嵌套 HTML 表。 局部視圖表具有添加/編輯功能，使用由添加按鈕或行單擊觸發的模態彈出窗口進行編輯。 該帖子工作正常並將數據保留到我的數據庫中，但是在添加/編輯 ajax 帖子后需要更新部分視圖表，這就是我遇到的挑戰。

以下是剃刀頁面中的代碼：

    @foreach (var address in Model.CustomerAddresses)
                {
                    <tr>
                        <td suppress-unlock-key-row-click>
                            <img src="~/images/plus.png" />
                            <div style="display: none;">
                                <partial id="addresses-partial" name="Shared/_AddressListPartial" model="@ucustomer.Addresses" />  
                            </div>
                        </td>
MORE TD data for customer...
}

ajax帖子如下：

$.ajax({
    type: "POST",
    url: "/MySite/CustomerList?handler=EditCustomerAddress",
    beforeSend: function (xhr) { xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val()); },
    data: JSON.stringify({
        customerAddressId: customerAddressId,
        address: address,
        city: city,
        state: state,
        zip: zip, 
        customerId: customerId
    }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        // TODO: WHAT SHOULD I DO HERE
    },
    failure: function (response) {
        alert(response);
    }
});

部分視圖 html 在這里：

 @model List<MySite.Models.CustomerAddress>

<div class="input-group mb-3">
    <button type="button" class="btn btn-primary" id="add-customer-address-submit" data-parent-id="Model.CustomerId">Add</button>
</div>
<table id="customerAddressList" class="child-grid">
    <thead>
        <tr>
            ...
        </tr>
    </thead>
        @foreach (var address in Model)
        {
            <tr>
                <td suppress-configuration-row-click data-configuration-id="@address.CustomerAddressId">
                    <input type="checkbox" id="address-selected" />
                </td>
                <td data-address="@address.Address">@address.Address</td>
                <td data-city="@address.City">@address.City</td>
                <td data-state="@address.State">@address.State</td>
                <td data-zip="@address.Zip">@address.Zip</td>
           </tr>
        }
</table>



  namespace MySite.Pages.Shared
{
    using System.Collections.Generic;

    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;

    using UnlockKeyManagementWeb.DataAccess;
    using UnlockKeyManagementWeb.Models;

    public class AddressListPartialModel : PageModel
    {
        private readonly ICustomerAddressDataAccess customerAddressDataAccess;

        public AddressListPartialModel (ICustomerAddressDataAccess customerAddressDataAccess)
        {
            this.customerAddressDataAccess = customerAddressDataAccess;
        }

        public List<CustomerAddress> CustomerAddresses{ get; set; }

        public PartialViewResult OnGetUnlockKeyConfigurationsListPartial(int unlockKeyId)
        {
                      this.CustomerAddresses = this.customerAddressDataAccess.GetCustomerAddresses(customerId);
            return this.Partial("_AddressListPartial", this.CustomerAddresses);
        }
    }
}

我不明白我需要寫什么代碼才能在模態彈出 ajax post 保存后刷新局部視圖。

Answer 1

我不明白我需要寫什么代碼才能在模態彈出 ajax post 保存后刷新局部視圖。

使用JQuery Ajax刷新局部視圖，可以參考如下代碼：

public PartialViewResult OnGetCarPartial()
{
    Cars = _carService.GetAll();
    return Partial("_CarPartial", Cars);
}

和

<p><button class="btn btn-primary" id="load">Load</button></p>
@*partial view container*@
<div id="grid"></div>
@section scripts{
    <script>
        $(function () {
            $('#load').on('click', function () {
                $('#grid').load('/ajaxpartial?handler=CarPartial');
            });
        });
    </script>
}

由於您使用的是嵌套 Html 表，可能您想更新特殊行的局部視圖，在成功函數中，您可以根據觸發的按鈕和局部視圖容器找到特殊行，然后重新填充局部視圖。

參考：

在 Razor 頁面中使用 AJAX 進行部分頁面更新

在 ASP.NET Core MVC 和 Razor 頁面中使用 Ajax 加載部分視圖

Answer 2

所以我最終發現的是，我的 OnGetAddressList 方法在實際的局部視圖 cs 文件中返回 PartialViewResult。 當我嘗試在我的 div 上調用 jquery 負載時：

$('[data-address-table-id=' + customerId + ']')load('/Mysite/CustomerList?handler=AddressList&customerId=' + customerId);

整個頁面被返回並嵌套在我剛剛調用加載的 div 中。 當我將 OnGetAddressList 方法移動到 CustomerList 父頁面時， PartialViewResult 只包含我想要的表格 html 輸出。 所以最后我在使用正確的 jQuery 選擇器找到我想要更新的 div 時遇到了一些問題。 我決定通過以 customerId 為父級的命名數據屬性來查找它。 然后第二個問題是使用jQuery加載時部分視圖結果的渲染。

希望這會在將來對某人有所幫助，並且一如既往，如果您知道解決此問題的更好方法，請分享。