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加载时部分视图结果的渲染。

希望这会在将来对某人有所帮助，并且一如既往，如果您知道解决此问题的更好方法，请分享。