ajax 调用按钮单击后局部视图刷新不起作用

Question

我有部分视图，并使用 ajax 单击按钮提交表单。提交后我想重新加载部分视图并显示成功消息。 Ajax 请求提交正确，但我无法使用 class 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 助手。您可以从表单的操作属性中获得正确的 url。查看更新后的代码。

ajax 调用按钮单击后局部视图刷新不起作用

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

ajax

asp.net-mvc

jquery

asp.net-mvc-4