Question

我有部分视图，并使用ajax单击按钮提交表单。提交后我想重新加载局部视图并显示成功消息。 Ajax请求正确提交但我无法使用类divPartial在所需的div中重新加载partialview。由于某些原因，部分视图正在单独的页面上加载。我的布局页面上有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帮助程序。您可以从表单的action属性中获取正确的url。请参阅更新的代码。

在单击按钮上调用ajax后，部分视图刷新无法正常工作

1 个答案: