ajax - render two partial views

Question

On a button click I fetch some data using jquery $.ajax, calling controller action method and return a strongly typed partial view. Data is displayed in a table.

when data is available I also need to render another strongly typed partial view (same model as for resultSetView) to display page navigation buttons for the resultSetView.

How can I do the second part?

$.ajax({
            type: "POST",
            url: $form.attr('action'),
            data: $form.serialize(),
            error: function (xhr, status, error) {
                //do something about the error   
            },
            success: function (response) {
                $("#resultSetDiv").html(response);
                //need to reload pageNavigationDiv
            }
        });

Markup is like

<div id="pageNavigation >
    @Html.Partial("_pageNavigationView")
</div>
<div id="resultSetDiv">
     @RenderSection("_resultSetView")
</div>

score 0 · Answer 1 · edited May 23 '17 at 12:23

Send a JSON response from your action method in the below format

{
    "success": "true",
    "currentPage": "3",
    "totalPages": "12",
    "viewString": "<div>Somecontent</div>"
}

Where the value inside viewString will be the HTML markup to be loaded to the resultSetDiv.

success: function (response) {
          if(response.sucesss=="true")
          {
              $("#resultSetDiv").html(response.viewString);
              $("#yourPageNumber").html(response.currentPage);
          }
}

This answer explains how to send the ViewResult in JSON

ajax - render two partial views

1 Answers1