ASP.NET Core Razor Pages Update Partial View Nested HTML Table after AJAX POST

Question

I am attempting to update a nested HTML table in a partial view after an AJAX post. The partial view table has add/edit functionality using a modal popup triggered by an add button or row click for edit. The post works fine and persists the data to my database however the partial view table needs to be updated after the add/edit ajax post and that is where I am having a challenge.

Below is the code in the razor page:

    @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...
}

The ajax post is below:

$.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);
    }
});

The partial view html is here:

 @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);
        }
    }
}

I don't understand what code I need to write to get the partial view to refresh after the modal popup ajax post save.

Answer 1

I don't understand what code I need to write to get the partial view to refresh after the modal popup ajax post save.

To refresh the partial view using JQuery Ajax, you could refer to the following code:

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

and

<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>
}

Since, you are using the Nested Html Table, perhaps you want to update special row's partial view, in the success function, you could find the special row according to the triggered button and the partial view container, then re-populated the partial view.

Reference:

Partial Page Update with AJAX in Razor Pages

Load Partial Views Using Ajax In ASP.NET Core MVC And Razor Pages

Answer 2

So what I ended up discovering is that I had my OnGetAddressList method returning the PartialViewResult in the actual partial view cs file. When I attempted to call the jquery load on my div with:

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

The entire page was being returned and nested in the div I just called load on. When I moved my OnGetAddressList method into the CustomerList parent page the PartialViewResult only contained my table html output which is what I wanted. So in the end I had a few issues finding the div I wanted to update using the correct jQuery selector. I decided to look for it by a named data attribute with the customerId as the parent. Then the second issue was the rendering of the partial view result when using a jQuery load.

Hopefully this will help someone in the future and as always if you know of a better way to resolve this issue please share.