jquery - 单击按钮上的 ajax 调用后，部分 View 刷新不起作用

Question

我有一个部分 View ，并使用 ajax 单击按钮提交表单。提交后我想重新加载部分 View 并显示成功消息。 Ajax 请求已正确提交，但我无法使用类 divPartial 重新加载所需 div 中的部分 View 。由于某些原因，部分 View 正在单独的页面上加载。我的布局页面上确实有 jquery.unobtrusive-ajax.min.js 。我只是想知道这是否是刷新部分页面的最佳方式，如果是的话，那么为什么部分 View 没有加载到正确的容器 div 中。

下面是我的部分 View 代码

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

Ajax 调用如下

$(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');
      }
    });
  }
  });
});

我的 Controller 有以下代码

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

}

Answer 1

您不会阻止由于单击提交按钮而导致的默认表单提交。这可以通过从按钮的 click 处理程序或 e.preventDefault() 返回 false 来完成:

$('#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;
});

顺便说一句，jquery.unobtrusive-ajax.min.js是一个用于支持@Ajax.*帮助程序的库，因此除非您使用它，否则它不会给您带来任何优势。

编辑:切勿在 ASP.NET MVC 中使用像这样的硬编码 url，您应该使用 Url 帮助程序。您可以从表单的 action 属性中获取正确的 url。查看更新后的代码。