jQuery對象發佈到mvc控制器與jQuery和ajax

Question

我想提交一些值從窗體到我的mvc控制器。

這裏是我的控制器：

//Post/ Roles/AddUser 
    [HttpPost]  
    public ActionResult AddUser(String json) 
    { 
     Log.submit(json);    
     return View(); 
    } 

這裏是JS：

<script> 
function submitForm() { 

    var usersRoles = new Array; 
    $("#dualSelectRoles2 option").each(function() { 
     usersRoles.push($(this).val()); 
    }); 
    console.log(usersRoles); 

    jQuery.ajax({ 
     type: 'POST', 
     url: "@Url.Action("AddUser")", 
     contentType: "application/json; charset=utf-8", 
     datatype: 'json', 
     data: JSON.stringify(usersRoles), 
     success: function (data) { alert(data); }, 
     failure: function (errMsg) { 
      alert(errMsg); 
     } 
    }); 
} 

當調試控制器讓我的參數爲空嗎？ console.log(usersRoles)爲我提供了數據。

我在做什麼不正確？

如何在控制器中接收json對象？

Answer 1

而不是接收json字符串模型綁定更好。例如：

[HttpPost]  
public ActionResult AddUser(UserAddModel model) 
{ 
    if (ModelState.IsValid) { 
     return Json(new { Response = "Success" }); 
    } 
    return Json(new { Response = "Error" }); 
} 

<script> 
function submitForm() {  
    $.ajax({ 
     type: 'POST', 
     url: "@Url.Action("AddUser")", 
     contentType: "application/json; charset=utf-8", 
     dataType: 'json', 
     data: $("form[name=UserAddForm]").serialize(), 
     success: function (data) { 
      console.log(data); 
     } 
    }); 
} 
</script> 

Answer 2

我在您的代碼中看到您正在嘗試將ARRAY傳遞給POST操作。在這種情況下，按照以下工作代碼 -

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script> 
    function submitForm() { 
     var roles = ["role1", "role2", "role3"]; 

     jQuery.ajax({ 
      type: "POST", 
      url: "@Url.Action("AddUser")", 
      dataType: "json", 
      contentType: "application/json; charset=utf-8", 
      data: JSON.stringify(roles), 
      success: function (data) { alert(data); }, 
      failure: function (errMsg) { 
       alert(errMsg); 
      } 
     }); 
    } 
</script> 

<input type="button" value="Click" onclick="submitForm()"/> 

而控制器動作將是 -

public ActionResult AddUser(List<String> Roles) 
    { 
     return null; 
    } 

然後當你點擊按鈕 -

Answer 3

什麼我做錯了嗎？

您必須將html轉換爲javascript對象，然後作爲json通過JSON.Stringify的第二步。

如何在控制器中接收json對象？

查看：

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="https://raw.githubusercontent.com/marioizquierdo/jquery.serializeJSON/master/jquery.serializejson.js"></script> 

var obj = $("#form1").serializeJSON({ useIntKeysAsArrayIndex: true }); 
$.post("http://localhost:52161/Default/PostRawJson/", { json: JSON.stringify(obj) }); 

<form id="form1" method="post"> 
<input name="OrderDate" type="text" /><br /> 
<input name="Item[0][Id]" type="text" /><br /> 
<input name="Item[1][Id]" type="text" /><br /> 
<button id="btn" onclick="btnClick()">Button</button> 
</form> 

控制器：

public void PostRawJson(string json) 
{ 
    var order = System.Web.Helpers.Json.Decode(json); 
    var orderDate = order.OrderDate; 
    var secondOrderId = order.Item[1].Id; 
}