javascript - MVC3 AJAX 将数据传递到 Controller 。已提交两次

Question

所以我有一个表，可以使用以下方法将其转换为数组:

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

但是当我像这样将其传递到我的 Controller 时:

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

我的调试断点被设置两次，导致出现问题。在 POST 上向我的 Controller 提交数据的正确方法是什么？

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 而不是 Html Helpers，请使用 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 */
        }           
    });
});

Controller 操作示例使用 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);
    }
}