MVC 操作方法调用开始表单方法，即使它将 JSON 返回到另一个操作方法

Question

嗨，我目前正在研究MVC Razor。 这是场景。 任何人都可以有解决方案吗？我在BeginForm中有一个Web网格。

 @using(Html.BeginForm("AllocationOnlyEdit", "AllocationModel", FormMethod.Post, new {
  block = @Model.block
 })) {
  if (Model != null) {
   var grid = new WebGrid(rowsPerPage: Model.RecordsPerPage);
   grid.Bind(Model.AllocModelsListView, autoSortAndPage: false, rowCount: Model.NumberOfRecords); < div class = "wrap" >
    < div id = "gridContent" >
    @grid.GetHtml(
     htmlAttributes: new {
      id = "gdvsearch"
     },
     fillEmptyRows: false,
     tableStyle: "mGrid",
     columns: new [] {
      grid.Column(header: null, canSort: false, format: @ < text > < input id = "[e-mail]"
        onclick = "javascript: DeleteCheckBox(this)"
        name = "[e-mail]"
        class = "delete-chkbox"
        type = "checkbox"
        value = "@item.AllocId" / > < /text>),
        grid.Column("AllocYear", header: "Year", format: @ < input name = "[e-mail]"
         id = "AllocYear"
         type = "text"
         style = "font-weight:bold;width:50px;"
         value = "@item.AllocYear"
         disabled = "disabled"
         title = "@item.AllocYear"
         class = "editY-mode" / > ),
        grid.Column("AllocPercentage", header: "Percentage", format: @ < input name = "[e-mail]"
         id = "[e-mail]"
         type = "text"
         style = "font-weight:bold;width:50px;"
         value = "@item.AllocPercentage"
         disabled = "disabled"
         title = "@item.AllocPercentage"
         class = "editPer-mode" / > ),
        grid.Column("LocationDesc", header: "Location", format: @ < input name = "[e-mail]"
         id = "[e-mail]"
         type = "text"
         style = "font-weight:bold;width:50px;"
         value = "@item.LocationDesc"
         disabled = "disabled"
         title = "@item.LocationDesc"
         class = "editPer-mode" / > ) 

网格在同一单击上同时执行多个操作（添加/更新/删除）。因此，下面的 javascript 循环并调用要编辑/添加/删除的所有网格行的操作方法。

  $.ajax({
 type: "GET",
 contentType: "application/json; charset=utf-8",
 url: '@Url.Action("DeleteAndSaveAtSameTimeModels")',
 data: {
  "AllocId": AllocId,
  "Allocpercentage": Allocpercentage,
  "sumtrans": sumtrans,
  "tempsumtrancs": tempsumtrancs,
  "Location": Location,
  "rowCount": rowCount
 },
 dataType: "json",
 beforeSend: function() {},
 success: function(data) {
  debugger;
  tempsumtrancs++;
  if (data.sumtrans == tempsumtrancs) {
   window.location.href = data.result;
  }
 }
});

如果要删除 3 行并添加 1 行，它应该调用操作方法 "DeleteAndSaveAtAtSameTimeModels" 4 次，然后调用默认路由，即搜索 ActionMethod 并返回更新的网格。

但它所做的是调用BeginForm操作方法"AllocationOnlyEdit"，然后爆炸。操作方法返回，

return Json(new { ok = true, AllocId = AllocId, y = y, newRows = newRows, sumtrans = sumtrans, tempsumtrancs = tempsumtrancs, result = Url.Action("AllocationModelSearch", objAllocationModels) }, JsonRequestBehavior.AllowGet);

Answer 1

我的假设是您的保存按钮位于表单内部，当您单击该按钮时，它正在执行正常的表单提交行为。在进行 ajax 调用之前，应阻止默认的表单提交行为。您可以使用 jQuery preventDefault 方法来执行此操作。

$(function(){
  $("#YourButtonId").click(function(e){
     e.preventDefault();   // This line does it !
     //Now continue with your ajax code here
     // $.ajax({});
  });
});

此外，我建议使用 POST 而不是 GET，因为 GET 对它可以通过查询字符串传递的数据量有限制。