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

Question

所以我有一个表，它使用转换为数组

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

我的调试断点被设置了两次，导致出现问题。在POST上将数据提交给我的控制器的正确方式是什么？

Answer 1

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

1. 您已多次加载不引人注目的文件
2. 您的表单定义了一个操作方法，并且您的按钮在表单标记中作为提交按钮。这将提交表单，然后单击也将提交表单-参见示例

示例

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

如果您需要在发布前验证表单上的值，请不要挂接额外的Ajax调用。您的javascript看起来像：

$(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而不是HtmlHelpers，请使用div而不是表单，这样就不会得到重复的帖子。以下是实现这一目标的方法：

<div id="enrolledStudents">
  <--! your elements -->
  <button id="saveStudents">Save</button>
</div>

JavaScript

$(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发布数据时，这里有一个如何通过路由的示例

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

Answer 2

您确定要阻止提交按钮的默认行为（表单POSTING）吗？使用preventDefault执行此操作。

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

编辑：根据评论

要在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");
               }
         }
});

Answer 3

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