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. 你必須有不顯眼的文件（S）加載多次
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輔助，使用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

您確定您正在阻止提交按鈕的默認行爲（表單張貼）嗎？使用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文件兩次。我有這種行爲，問題是文件加載兩次。