MVC, Ajax beginform in partial view only works once

Question

I am having an odd issue with a partial view that has an ajax form in it. It works once but after that it, the controller at least believes it works fine but the partial view content does not update even though the data at least in the controller has actually has an updated model.

I have no clue what do to.

Can it have something to do with the div I an replacing the data with is outside the partial view?

Should I just not use the ajax form and just use jquery to do an ajax request to the controller?

So I have this form in my View (doesn't matter if it is in my view or the partial view) and a div that holds the html from the partial

 @using (Ajax.BeginForm("ChangePage", "Staging", null, new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.ReplaceWith, UpdateTargetId = "divResults", OnBegin = "showLoading", OnComplete = "hideLoading" }, new { id = "frmPage" }))
    {
        <input type="hidden" id="pageDir" name="pageDir" />
        <input type="hidden" id="codeFilter" name="codeFilter" />
        <input type="hidden" id="glauFilter" name="glauFilter" />
        <input type="hidden" id="gacctnoFilter" name="gacctnoFilter" />
        <input type="hidden" id="glcoFilter" name="glcoFilter" />
        <input type="hidden" id="employeeFilter" name="employeeFilter" />
        <input type="hidden" id="maxPages" name="maxPages" />
        <input type="hidden" id="page" name="page" />
    }
<div id="divResults" name="divResults">
    @Html.Partial("~/Views/Staging/_stagingResults.cshtml", Model)
</div>

I have JS that does the form submit in the partial view. All of this works just fine. I can click the button, controller gets hid, generates my new model, the partial view generates HTML and it gets displayed in divResults BUT ONLY on the first time.

Any other page change made does everything above but it won't put the new HTML in divResults. In chrome's dev console I can see the new request come out and come back with the correct HTML but it is never replaced.

1) Verify you've loaded the NuGet Microsoft.jQuery.Unobtrusive.Ajax. 2) Verify you don't have any script errors in the debug console. 3) Be sure the controller returns a PartialView("_stagingResults"). 4) How are you triggering the AJAX submission? — Jasen
Should I just not use the ajax form and just use jquery to do an ajax request to the controller? You'll find many more examples for jQuery ajax and it will be easier to customize the request when you eventually encounter that use-case. — Jasen

Mahaveer Jangid Mahaveer Jangid · Accepted Answer · 2019-04-27T02:31:44

You can add a javascript function on success() method in AJAX begins form properties, which will fire after your ajax request completely loaded

  @using (Ajax.BeginForm("AjaxOptionPostData", "Home", new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess" }))

Here OnSuccess will be your javascript method

    function OnSuccess()
     {
       //You can do your stuff here
     }

MVC, Ajax beginform in partial view only works once

1 Answers