update Partial View after unobtrusive ajax post on Razor Pages-CodePudding

I have a Parent View and Rendered the Partial View in it. And I have Added the Form tag in the partial View. It goes to the controller and return the data but the Partial View Content does not gets updated.

<div class="row main-section-border">
        <div class="col-sm-12">

            @{
                await Html.RenderPartialAsync("_Partial", Model);
            }
        </div>
        </div>

Partial View

    @model RandomModel 
    <form asp-controller="Controller" asp-action="Save" method="POST" data-ajax="true" data-ajax-success="success" data-ajax-failure="failed" data-ajax-update="#spForm">

    <div class="row left-right-padding" id="spForm">
        <input type="text"  id="document" asp-for="Document">
</div>

Backend:

  public IActionResult Save(Random Model model)
        
     {     model.Document= "Random"
            return PartialView("~/Views/RandomFolder/_Partial.cshtml", model);
      }

CodePudding user response：

return PartialView("~/Views/RandomFolder/_Partial.cshtml", model);

Since you use unobtrusive ajax,so it will return the html code of the partial view,but it will not refresh the partial view.If you want to refresh the partial view,you can try to replace the html code with data-ajax-complete.Here is a working demo:

div class="row main-section-border">
        <div id="div1" class="col-sm-12">

            @{
                await Html.RenderPartialAsync("_Partial", Model);
            }
        </div>
        </div>
@section scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js"></script>
    <script>
        completed = function (xhr) {
            $("#div1").html(xhr.responseText);
        };
    </script>
}

Partial view:

@model RandomModel 
    <form asp-controller="Controller" asp-action="Save" method="POST" data-ajax="true" data-ajax-success="success" data-ajax-failure="failed" data-ajax-update="#spForm" data-ajax-complete="completed">

    <div class="row left-right-padding" id="spForm">
        <input type="text"  id="document" asp-for="Document">
</div>

Backend(You need to use ModelState.Clear(); or it will prefer to use the model value in ModelState rather than the model you passed to Partial view.):

public IActionResult Save(RandomModel model)

        {
            ModelState.Clear();
            model.Document = "Random";
            return PartialView("~/Views/B/_Partial.cshtml", model);
        }

result: