partial view refresh not working after ajax call on a button click

Question

I have a partial view and and submitting form on a button click using ajax. After submitting I want to reload the partial view and show a success message. Ajax request is submitting correctly but I m unable to reload the partialview in the desired div with class divPartial. The partial view is loading on a separate page for some reasons. I do have jquery.unobtrusive-ajax.min.js on my layout page. I m just wondering if this is the best way to refresh the partial page and if so then why partial view is not loading in the correct container div.

Below is my partial view code

<div class="divPartial">
  @using (Html.BeginForm("UpdateRequest", "Request", FormMethod.Post, new { @class = "form", id = "RequestForm", enctype = "multipart/form-data" }))
  {
    @Html.ValidationSummary(true)
    <div class="row">
      <div class="form-group">
        <div class="col-sm-2 control-label">
          @Html.LabelFor(model => model.RequestFrom, new { @class = "required" })
        </div>
        <div class="col-sm-4">
          @Html.TextBoxFor(model => model.RequestFrom, new { @class = "form-control required" })
          @Html.ValidationMessageFor(model => model.RequestFrom)
        </div>
        <div class="col-sm-1 control-label">
          @Html.LabelFor(model => model.RequestId)
        </div>
        <div class="col-sm-4">
          @Html.TextBoxFor(model => model.RequestId, new { @class = "form-control" })
          @Html.ValidationMessageFor(model => model.RequestId)
        </div>
      </div>
    </div>
    @Html.HiddenFor(model => model.TimeStamp);

    <div class="row">
      <div class="form-group">
        <div class="col-sm-5 control-label">
        </div>
        <div class="col-sm-6">
          <input class="btn btn-danger pull-right" type="submit" id="btnUpdateRequest" value="Update" />&nbsp;  
        </div>
      </div>
    </div>
  }
</div>

The Ajax call is below

$(document).ready(function () {
  $('#btnUpdateRequest').click(function (e) {
  {
    $.ajax({
      url: '/request/UpdateRequest',
      data: $('#RequestForm').serializeArray(),
      type: 'POST',
      success: function (data) {                           
        $('.divPartial').html(data);                          
        $('#ResponseContainer').addClass('show').removeClass('hide');
      }
    });
  }
  });
});

My Controller has the following code

[HttpPost]
public PartialViewResult UpdateRequest(ChangeRequestModel changeRequestModel)
{
  var model = changeRequestModel;
  ChangeRequest changeRequest = new ChangeRequest();
  changeRequest = model.ToDbEntity();
  this.unitOfWork.ChangeRequestModelRepository.Update(changeRequest);
this.unitOfWork.ChangeRequestModelRepository.CommitApplicationEntities();
  return PartialView("_Request", changeRequestModel);     

}

Also If I move the div at the end of the form, it does not make a difference — rumi
You don't cancel the standard submit so the instance you start the ajax call, you also do a standard submit. Add e.preventDefault() or change the button to <button type="button" id="btnUpdateRequest">Update</button> — user3559349

Zabavsky Zabavsky · Accepted Answer · 2015-01-27T11:27:56

You don't prevent the default form submitting which is caused by clicking on the submit button. This can be done by returning false from the button's click handler or e.preventDefault():

$('#btnUpdateRequest').click(function (e) {
    e.preventDefault(); //preventing the default action
    var $form = $('#RequestForm');
    $.ajax({
        url: $form.prop('action'),
        data: $form.serializeArray(),
        type: 'POST',
        success: function (data) {
            $('.divPartial').html(data);
            $('#ResponseContainer').addClass('show').removeClass('hide');
        }
    });
    // or just
    //return false;
});

By the way, jquery.unobtrusive-ajax.min.js is a library for supporting @Ajax.* helpers, so unless you are using ones it will not give you any advantage.

Edit: Never use the hardcoded urls like this in ASP.NET MVC, you should utilize the Url helpers instead. You can get the correct url from the action property of your form. See the updated code.

partial view refresh not working after ajax call on a button click

1 Answers