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

时间:2012-07-27 17:14:11

标签: javascript ajax asp.net-mvc asp.net-mvc-3

所以我有一个表,使用:

转换为数组
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时向控制器提交数据的正确方法是什么?

3 个答案:

答案 0 :(得分:3)

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

  1. 您已多次加载不显眼的文件
  2. 您的表单已定义操作方法,您的按钮位于表单标记内作为提交按钮。这将提交表单,然后点击也会提交表单 - 参见示例
  3. 示例

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

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

答案 1 :(得分:1)

您确定要阻止提交按钮的默认行为(表单POSTING)吗?使用preventDefault来执行此操作。

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

});

编辑:根据评论

要在ajax处理程序中执行重定向,您需要将要在JSON响应中重定向的URL返回给calle。

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

});

答案 2 :(得分:1)

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