使用 AJAX 将 JavaScript 数组发布到 asp.net MVC 控制器答案

【问题标题】：Post JavaScript array with AJAX to asp.net MVC controller使用 AJAX 将 JavaScript 数组发布到 asp.net MVC 控制器
【发布时间】：2013-03-24 19:52:15
【问题描述】：

我的控制器：

[HttpPost]
public ActionResult AddUsers(int projectId, int[] useraccountIds)
{
    ...
}

我想通过 AJAX 将参数发布到控制器。通过int projectId 不是问题，但我无法发布int[]。

我的 JavaScript 代码：

function sendForm(projectId, target) {
    $.ajax({
        traditional: true,
        url: target,
        type: "POST",
        data: { projectId: projectId, useraccountIds: new Array(1, 2, 3) },
        success: ajaxOnSuccess,
        error: function (jqXHR, exception) {
            alert('Error message.');
        }
    });
}

我用一个测试数组尝试过，但没有成功。 :( 我也尝试设置traditional: true，或contentType: 'application/json; charset=utf-8'，但也没有成功...

发布到我的控制器的int[] useraccountIds 始终为空。

【问题讨论】：

请发布错误信息
我已经调试了控制器方法并且 int[] useraccounts 始终为空。
始终最好查看正在发送的实际数据。要么获取 Fiddler，要么查看 Network 下的开发者工具（即在 Firefox/Firebug 的 Chrome 中）。

标签： javascript ajax asp.net-mvc jquery

【解决方案1】：

你可以定义一个视图模型：

public class AddUserViewModel
{
    public int ProjectId { get; set; }
    public int[] userAccountIds { get; set; }
}

然后调整您的控制器操作以将此视图模型作为参数：

[HttpPost]
public ActionResult AddUsers(AddUserViewModel model)
{
    ...
}

最后调用它：

function sendForm(projectId, target) {
    $.ajax({
        url: target,
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ 
            projectId: projectId, 
            userAccountIds: [1, 2, 3] 
        }),
        success: ajaxOnSuccess,
        error: function (jqXHR, exception) {
            alert('Error message.');
        }
    });
}

【讨论】：

即使是硬编码的 projectId（如 23）也不会发送到控制器。而是发送真实的表单数据（也有一个项目 ID）。 :(
那边的这个sendForm函数，你在哪里调用它？是在某个表单的提交事件中还是在某个提交按钮的单击事件中？您是否确保通过从中返回 false 来取消此事件的默认操作？我猜你没有。
嗨，我可以将 javascript 对象发送到 asp.net 并在 ApiController 中获取该类对象吗？

【解决方案2】：

如果要将数组传递给 mvc 引擎，请多次发送输入。将您的代码更改为以下内容：

function sendForm(projectId, target) {
var useraccountIds = new Array(1, 2, 3);
var data = { projectId: projectId };
for (var i = 0; i < useraccountIds.length; i++) {
  $.extend(true, data, {useraccountIds: useraccountIds[i]});
}
$.ajax({
    traditional: true,
    url: target,
    type: "POST",
    data: data,
    success: ajaxOnSuccess,
    error: function (jqXHR, exception) {
        alert('Error message.');
    }
});

}

【讨论】：

根据 firebug AJAX 中的网络监视器仅发送真正形式的数据，而不是我用数据指定的数据...
是的，我找到了解决方案并编辑了我的答案。但我的代码没有经过测试，但这是解决方案。

【解决方案3】：

把可序列化的属性放在类上。然后它将尝试将您传递的 javascript 对象转换为 C# 类。

在 JS 中：

{
   ProjectId = 0, 
   userAccountIds = []
}

// C#
[Serializable] 
public class AddUserViewModel
{
    public int ProjectId { get; set; }
    public int[] userAccountIds { get; set; }
}

【讨论】：

可以，一个普通的有Serializable属性的类就足够了。

【解决方案4】：

使用$.Ajax()，你可以很容易的从javascript获取数据到MVC中的Controller。

就像，

var uname = 'John Doe';

$.ajax({

        url: "/Main/getRequestID",  // This is path of your Controller with Action Result.
        dataType: "json",           // Data Type for sending the data

        data: {                     // Data that will be passed to Controller
            'my_name': uname,     // assign data like key-value pair       
             // 'my_name'  like fields in quote is same with parameter in action Result
        },

        type: "POST",               // Type of Request
        contentType: "application/json; charset=utf-8", //Optional to specify Content Type.

        success: function (data) { // This function is executed when this request is succeed.
                alert(data);
        },

        error: function (data) {
                alert("Error");   // This function is executed when error occurred.
        }
)};

那么，在控制器端，

public ActionResult getRequestID(String my_name)
{

    MYDBModel myTable = new Models.MYDBModel();
    myTable.FBUserName = my_name;
    db.MYDBModel.Add(myTable);
    db.SaveChanges();              // db object of our DbContext.cs
    //return RedirectToAction(“Index”);   // After that you can redirect to some pages…
    return Json(true, JsonRequestBehavior.AllowGet);    // Or you can get that data back after inserting into database.. This json displays all the details to our view as well.
}

参考。 Send Data from Java Script to Controller in MVC

【讨论】：

感谢 Josh 更新我。我已经更新了链接。请检查。实际上，我已经将我的博客从 Wordpress 转移到了博客。所以那个链接被打破了。现在它的工作..

【解决方案5】：

在 JS 中：

var myArray = new Array();
myArray.push(2);
myArray.push(3);
$.ajax({
            type: "POST",
            url: '/MyController/MyAction',
            data: { 'myArray': myArray.join() },
            success: refreshPage
        });

在 MVC/C# 中：

public PartialViewResult MyAction(string myArray)
{
   var myArrayInt = myArray.Split(',').Select(x=>Int32.Parse(x)).ToArray();
   //My Action Code Here
}

【讨论】：

【解决方案6】：

除非您指定 ajax 请求 (Post/Get) 具有该属性，否则它将不起作用 traditional 设置为真。详情请参考question。

【讨论】：