CODEWITHSUNDEEP
c#ajaxasp.net-corerazor-pagespartial-views
ChrisNemITN
ChrisNemITN

Reputation: 1

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

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?

Upvotes: 0

Views: 358

Answers (2)

ChrisNemITN
ChrisNemITN

Reputation: 1

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

Upvotes: 0

Mike Brind
Mike Brind

Reputation: 30110

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.

Upvotes: 0

Related Questions