Update partial view on non-MVC Asp.Net Core 6 RazorPages with Ajax

Question

I'am working on a ASP.Net Core 6 Web application using RazorPages (no MVC). The RazorPage includes a partial view which I want to update after model-update. The model-update is done successfully by calling a handler on code-behind using Ajax.

But: how can the partial view be updated to show the changed model? The handler returns an new generated PartialView but till now all tested options to update failed.

So there is a RazorPage MappingDetail which includes a partial:

<div id="detailPartial" class="col-6">
      <partial name="shared/AdminLTE/_MappingDetailPartial" model=Model.SelectedDetailsList />
  </div>

The partial _MappingDetailPartial receives and uses a model like this:

@model List<EpaMdetail>
...
foreach(EpaMdetail detail in Model)
{
 //do some stuff to show
}

My handler in code-behind of RazorPage MappingDetail looks like this (successfully called by Ajax):

public async Task<PartialViewResult> OnPostSetSelectedId([FromBody]string id)
        {

            //some testdata
            MappingDetailsList = await _repositoryService.GetMappingDetailsByHeader(MappingId);
            EpaMdetail detail = new EpaMdetail();
            detail.ItmIid = "E0_I_001";
            detail.SnomedFsn = "xcvdxfgvfxgfd";
            detail.SnomedId = "12321324324324234";
            MappingDetailsList.Add(detail);


            SelectionId = id;
            SelectedDetailsList = new List<EpaMdetail>();
            SelectedDetailsList.AddRange(MappingDetailsList.Where(x=>x.ItmIid == id));

            //return partial view with updated model and update on client-side???
            //...or can we update the partial from handler directly???

            return Partial("_MappingDetailPartial", SelectedDetailsList);
           
        }

This returns a partial. The Ajax of RazorPage MappingDetail looks like this:

<script type="text/javascript">
    function Edit(name, iid, id) {
       alert('click');
        var vIid = document.getElementById('DetailIID');
        vIid.value = iid;
        var vName = document.getElementById('DetailName');
        vName.value = name;

        var sIid = document.getElementById('SelectionId');
        sIid.value = iid;

        $.ajax({
            url: "@Url.Page("/MappingDetail")?handler=SetSelectedId",
            method: "POST",       
            contentType: 'application/json',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: JSON.stringify(iid),
            success: function (data) {
                            
                alert('ok');
                
            },
            error: function (data) {
               
                alert('error');
            }


        });
    };



</script>

And is called by an onClick-Event:

 <tr data-widget="expandable-table" aria-expanded="false" onClick="Edit('@childItem.ItmNameKombDe', '@childItem.ItmIid', @childItem.Id)">

This calls my handler via Ajax and updates the model. But how to handle the returned data to update/render the partial? Currently this results in an error after leaving the handler when a PartialViewResult is returned.

For MVC there are multiple options on using something like

success: function (result) {
            $("#partial").html(result);
}

but nothing seemed to work/update the partial. So what is the right way to do this?

Is there a @page directive in your partial view? If so, take it out and in your ajax success call, you can set $('#detailPartial').html(data); See this link for more help: https://stackoverflow.com/questions/74932798/razor-pages-updating-a-model-with-ajax-and-partialview — SoftwareDveloper, Aug 25 '23 at 13:58
@SoftwareDveloper: thanks for comment. this saved my day cause after rewriting I figured out a typing-mismatch (data vs Data). See below for final state... — ChrisNemITN, Aug 25 '23 at 16:55

score 0 · Answer 1 · answered Aug 25 '23 at 15:55

Don't send the id in the AJAX request as JSON unless there is a very good reason to do so. It's not accessible from the request body directly. You need to deserialize the request from JSON to get the value in your page handler. Life will be easier if you pass an object instead of a string to the data parameter:

data: {id: iid}

You should check the network tab of your developer tools to see if the request is being made and what response it gets. Your header name for the request verification token (XSRF-TOKEN) is not standard and might result in a 400 Bad Request. The default header name is simply RequestVerificationToken.

score 0 · Answer 2 · edited Aug 25 '23 at 17:26

0

After the comment from @SoftwareDveloper—thanks!—I rechecked the variant using $("#partial").html(result); and found a typing mismatch (result vs Result) on this.

Now it works on using:

$('#detailPartial').html(result);

And in addition getting the correct PartialView:

return Partial("/Pages/Shared/AdminLTE/_MappingDetailPartial.cshtml", SelectedDetailsList);

edited Aug 25 '23 at 17:26

Jeremy Caney

7,102
69
48
77

answered Aug 25 '23 at 16:55

ChrisNemITN

1

Update partial view on non-MVC Asp.Net Core 6 RazorPages with Ajax

2 Answers2