Javascript MVC3 AJAX将数据传递给控制器。它'；它被提交了两次

因此，我有一个表，它通过以下方式转换为数组：

var result = $("#enrolledStudents").sortable('toArray');

但当我头球传给我的控球手时，就像这样：

$("#update-enroll").click(function () {
            var result = $("#enrolledStudents").sortable('toArray');
            $.ajax({
                url: '@Url.Action("Enrollment", "Classroom")',
                data: { students: result },
                type: 'POST',
                traditional: true
            });
        });

---

我的调试断点被设置了两次，导致出现问题。发布时向我的控制器提交数据的正确方式是什么？

您确定要阻止提交按钮的默认行为（表单发布）？使用

preventDefault

执行此操作

$("#update-enroll").click(function (e) {
  e.preventDefault();
 //rest of the code

});

编辑：根据评论

$(document).ready(function () {
    $("saveStudents").click(function(){
        var result = $("#enrolledStudents").sortable('toArray');
        if(result !== null){ /* do some kind of check here. */
            $.ajax({
                url: '@Url.Action("Enrollment", "Classroom")',
                data: { students: result },
                type: 'POST',
                traditional: true,
                success : function(data) {
                    if (data.status) {
                        window.location = data.route;
                    }               
                }
            })
        } else {
            /* notify ui that save didn't happpen */
        }           
    });
});

要在ajax处理程序中执行重定向，需要在

JSON

响应中将要重定向的URL返回给被调用方

[HttpPost]
public ActionResult Classroom(string students)
{
  //do some operaton
  if(Request.IsAjax())
  {
     //This is an Ajax call
     return Json(new
                   {
                     Status="Success",
                     NewUrl = Url.Action("Index","Home")
                   });
  }
  else
  {
     //Normal request. Use RedirectToActiom
      return RedirectToAction("Index","Home");
  }

}

现在在ajax调用中检查JSON结果并执行重定向

 $.ajax({
         url: '@Url.Action("Enrollment", "Classroom")',
         data: { students: result },
         type: 'POST',           
         dataType: "json",
         contentType: "application/json; charset=utf-8",
         success: function (data) {
               if(data.Status=="Success")
               {
                  window.location.href = data.Newrl;
               }
               else
               {
                   alert("some error");
               }
         }

});

---

是否确实要阻止“提交”按钮的默认行为（表单过账）？使用

preventDefault

执行此操作

$("#update-enroll").click(function (e) {
  e.preventDefault();
 //rest of the code

});

编辑：根据评论

$(document).ready(function () {
    $("saveStudents").click(function(){
        var result = $("#enrolledStudents").sortable('toArray');
        if(result !== null){ /* do some kind of check here. */
            $.ajax({
                url: '@Url.Action("Enrollment", "Classroom")',
                data: { students: result },
                type: 'POST',
                traditional: true,
                success : function(data) {
                    if (data.status) {
                        window.location = data.route;
                    }               
                }
            })
        } else {
            /* notify ui that save didn't happpen */
        }           
    });
});

要在ajax处理程序中执行重定向，需要在

JSON

响应中将要重定向的URL返回给被调用方

[HttpPost]
public ActionResult Classroom(string students)
{
  //do some operaton
  if(Request.IsAjax())
  {
     //This is an Ajax call
     return Json(new
                   {
                     Status="Success",
                     NewUrl = Url.Action("Index","Home")
                   });
  }
  else
  {
     //Normal request. Use RedirectToActiom
      return RedirectToAction("Index","Home");
  }

}

现在在ajax调用中检查JSON结果并执行重定向

 $.ajax({
         url: '@Url.Action("Enrollment", "Classroom")',
         data: { students: result },
         type: 'POST',           
         dataType: "json",
         contentType: "application/json; charset=utf-8",
         success: function (data) {
               if(data.Status=="Success")
               {
                  window.location.href = data.Newrl;
               }
               else
               {
                   alert("some error");
               }
         }

});

---

根据我的评论，有几件事可能导致这种情况

您已多次加载不引人注目的文件

您的表单定义了一个操作方法，您的按钮作为提交按钮位于表单标记内。这将提交表单，然后单击也将提交表单-参见示例

示例

<form action="/somerowout/someaction">
  <input type="text" id="text1"/>
  <input type="text" id="text1"/>
  <input type="submit" />
</form>

然后，您的表单代码将如下所示：

$(document).ready(function () {
    $("form").submit(function(){
        var result = $("#enrolledStudents").sortable('toArray');
        if(result == null){
            //do something to show validation failed
            return false;
        }
        return true;        
    });
});

@using (@Ajax.BeginForm(new AjaxOptions { })) { 
    <input type="text" id="text1"/>
    <input type="text" id="text1"/>
    <input type="submit" />
}

控制器动作示例 使用Ajax发布数据时，下面是一个如何传递路由的示例

[HttpPost]
public ActionResult SomethingPost(SomeModel model) {
    if (Request.IsAjaxRequest()) {
        var json = new {
                   status = true,
                   route = @Url.RouteUrl("MyRouteName", new { /* route values */ })
        };
        return Json(json, JsonRequestBehavior.AllowGet);
    }
}

---

根据我的评论，有几件事可能导致这种情况

您已多次加载不引人注目的文件

您的表单定义了一个操作方法，您的按钮作为提交按钮位于表单标记内。这将提交表单，然后单击也将提交表单-参见示例

示例

<form action="/somerowout/someaction">
  <input type="text" id="text1"/>
  <input type="text" id="text1"/>
  <input type="submit" />
</form>

然后，您的表单代码将如下所示：

$(document).ready(function () {
    $("form").submit(function(){
        var result = $("#enrolledStudents").sortable('toArray');
        if(result == null){
            //do something to show validation failed
            return false;
        }
        return true;        
    });
});

@using (@Ajax.BeginForm(new AjaxOptions { })) { 
    <input type="text" id="text1"/>
    <input type="text" id="text1"/>
    <input type="submit" />
}

控制器动作示例 使用Ajax发布数据时，下面是一个如何传递路由的示例

[HttpPost]
public ActionResult SomethingPost(SomeModel model) {
    if (Request.IsAjaxRequest()) {
        var json = new {
                   status = true,
                   route = @Url.RouteUrl("MyRouteName", new { /* route values */ })
        };
        return Json(json, JsonRequestBehavior.AllowGet);
    }
}

---

---

检查是否没有两次加载jquery文件。我有这种行为，问题是文件加载了两次。

检查jquery文件是否没有加载两次。我有这种行为，问题是文件加载了两次。

查看加载的脚本，确保不引人注目的文件不会被加载两次。我见过这种情况发生在两次事件挂钩时。此外，“更新注册”按钮是否为提交类型按钮？如果是这样，那么您将挂接一个事件，单击提交表单的按钮，然后再进行另一次调用。你能提供表单的HTML吗？是的，我必须这样做？我有一个变量var结果。。。。我需要作为一个参数传入，如果我没有这样做，它将显示为NULL，我如何修复它？我不希望通过挂接事件来单击按钮。请查看已加载的脚本，并确保不引人注目的文件不会被加载两次。我见过这种情况发生在两次事件挂钩时。此外，“更新注册”按钮是否为提交类型按钮？如果是这样，那么您将挂接一个事件，单击提交表单的按钮，然后再进行另一次调用。你能提供表单的HTML吗？是的，我必须这样做？我有一个变量var结果。。。。我需要作为一个参数传入，如果我没有这样做，它将显示为NULL，我如何修复它？我不希望挂接事件来单击按钮；不起作用。如何解决这个问题？因为这是一个ajax调用，RedirectoAction无法工作，您可以将JSON响应发送回被调用方，并使用该响应重定向。正如上面提到的，我不太喜欢创建一个新的事件钩子来发送ajax，从而导致两次提交。有没有更好的方法来实现这一点？对不起，但上面的答案似乎是对问题的一种破解。如果您没有使用表单的预期用途，那么就不要使用它。只需序列化要通过Ajax发送回的数据。请看我的更新示例。好的，现在，控制器中的代码返回RedirectToAction（“索引”）；不起作用。如何解决这个问题？因为这是一个ajax调用，RedirectoAction无法工作，您可以将JSON响应发送回被调用方，并使用该响应重定向。正如上面提到的，我不太喜欢创建一个新的事件钩子来发送ajax，从而导致两次提交。有没有更好的方法来实现这一点？对不起，但上面的答案似乎是对问题的一种破解。如果您没有使用表单的预期用途，那么就不要使用它。只需序列化要通过Ajax发送回的数据。请参阅我更新的示例。将var结果传递给控制器参数的代码在哪里？因为您的示例没有包含HTML代码，所以我假设“#Enrolled Students”在表单标记中。不是吗？对不起#Enrolled Students是表中一个tbody的ID。我正在使用jquerysortable序列化表行（这是可行的）。我已将代码更改为类似于您的代码，但现在控制器中的重定向操作不起作用。为什么呢？因为您的调用很可能是ajax调用，所以您不能使用RedirectToAction。我将更新示例，并给出如何处理此问题的建议。我已经更新了示例。请参阅“success”函数和示例控制器。将var结果传递给我的控制器参数的代码在哪里？因为您的示例不包含HTML代码，所以我假设“#Enrolled Students”在表单标记中。不是吗？对不起#Enrolled Students是表中一个tbody的ID。我正在使用jquerysortable序列化表行（这是可行的）。我已将代码更改为与您的代码相似，但现在我的重拨