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

Posted 2023-02-22

【中文标题】使用 AJAX 将 JavaScript 数组发布到 asp.net MVC 控制器

【英文标题】：Post JavaScript array with AJAX to asp.net MVC controller

【发布时间】：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 中）。

【参考方案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; 

【讨论】：

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

【参考方案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。