ajax调用按钮点击后部分视图刷新不起作用

Question

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

下面是我的部分视图代码

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

我的控制器有以下代码

[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。查看更新的代码。