CODEWITHSUNDEEP
jqueryajaxasp.net-mvcasp.net-mvc-4
rumi
rumi

Reputation: 3298

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

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

}

Upvotes: 0

Views: 6852

Answers (1)

Zabavsky
Zabavsky

Reputation: 13640

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.

Upvotes: 2

Related Questions