无法将数组从 jQuery 发送到 MVC 4 控制器答案

【问题标题】：Can't send array from jQuery to MVC 4 controller无法将数组从 jQuery 发送到 MVC 4 控制器
【发布时间】：2014-02-21 23:07:29
【问题描述】：

我已经用谷歌搜索了这个并检查了整个 StackOverflow，但我一定遗漏了一些东西......我有一个不显眼的 jQuery，它可以劫持一个简单的按钮点击。它计算复选框并将每个复选框的值添加到数组中。当我在 jQuery 中使用警报框时，列表是正确的，但数组永远不会到达控制器端。代码流向控制器，但我打破了 var resolutionViewModel=new ResolutionViewModel();并检查 trans - 参数为空。我是 jQuery 新手，真的可以在这里使用帮助。

jQuery

// Return the selected transactions

function resolveTransactions() {

     $('#btnResolve').click(function() {

        var selectedTransactions = new Array();

        $('input[name="chkTransaction"]:checked').each(function() {
            selectedTransactions.push(this.value);
        });

        if (selectedTransactions.length > 0) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'http://localhost/AuditLog/Home/ResolutionFormDisplay',
                contentType: 'application/json; charset=utf-8',
                data: {trans : selectedTransactions},
                traditional: true,
                success: function (data) { alert(data); },
                error: function(xhr, status, errorThrown) { alert("Error: " + errorThrown); }
            });
        }
    });
};

控制器端

[HttpPost]
public PartialViewResult ResolutionFormDisplay(List<string> trans)
{
    var resolutionViewModel = new ResolutionViewModel();

    // fill Usernames dropdown selector in ViewModel
    // fill Status dropdown selector in ViewModel
    // fill list of transactionIds in ViewModel

    return PartialView("_ResolutionDialog", resolutionViewModel);
}

【问题讨论】：

我还在错误警报框中看到一个错误，显示 [object Object]
请注意，错误回调按以下顺序采用 3 个参数：xhr、status、errorThrown，因此我将更改您的错误处理程序，因此传入这些参数并发出警报，而不是 xhr，这转换为字符串只会显示 [object Object] 就像你注意到的那样。
@Dismissile 你的意思是这样的：error: function(xhr, status, errorThrown) { alert("Status:" + status +" Error:" + errorThrown); } - 如果是这样，它只是说错误：未找到。
未找到意味着 404
@Dismissile 谢谢 - 这很奇怪，因为它在 ResolutionFormDisplay 方法中遇到了断点。我想知道它没有找到什么......

标签： javascript jquery arrays asp.net-mvc json

【解决方案1】：

尝试让你的控制器接受一个列表，而不仅仅是一个字符串（因为你没有传递一个字符串）：

[HttpPost]
public PartialViewResult ResolutionFormDisplay(List<string> value)
{
    var resolutionViewModel = new ResolutionViewModel();

    // fill Usernames dropdown selector in ViewModel
    // fill Status dropdown selector in ViewModel
    // fill list of transactionIds in ViewModel

    return PartialView("_ResolutionDialog", resolutionViewModel);
}

【讨论】：

我修改了Colin，重启后没有任何区别。不过感谢您的建议。

【解决方案2】：

发布的 JSON 需要在您的控制器方法中具有与参数匹配的命名属性。检查 Chrome 开发工具中的“网络”选项卡，看看您发布的确切内容，可能是这样的：

"{\"value\":\"...\"}"

没有value 属性可以传递给控制器方法的value 参数。我认为最好的办法就是摆脱“JSON.stringify”并接受像 Colin 的答案这样的列表，但是如果你想把它作为一个字符串，JSON 字符串需要是一个对象的 value 属性，而不是反过来：

data: {value : JSON.stringify(selectedTransactions)},

【讨论】：

我摆脱了 JSON.Stringify 并将签名更改为 List 但行为没有变化。尝试过 Goggle Chrome 网络选项卡和表头中的表单数据列出了数据。
Jason，Google Chrome 中的数据列表如下：transaction_table_length=10&chkTransaction=22&chkTransaction=23&chkTransaction=24&chkTransaction=25&chkTransaction=26&chkTransaction=27&chkTransaction=28&chkTransaction=29&chkTransaction=30&chkTransaction=31

【解决方案3】：

尝试按如下方式传递您的数组：

data:"{'trans':" + JSON.stringify(selectedTransactions)+"}"

你的方法应该如下：

 public void Method(List<string> trans)
{
    //Your implementation
}

【讨论】：

抱歉，没有效果。

【解决方案4】：

解决方案： $.ajax 回发未向控制器发送格式正确的数据。我通过使用 IE 中的网络选项卡并查看 POSTed http 的请求正文发现了这一点。它看起来像这样：transaction_table_length=10&chkTransaction=22&chkTransaction=23 -- 它应该看起来像这样：{"trans":["22","23"]}。为了解决这个问题，我将属性名称和数组进行了字符串化，如下所示，将 dataType 更改为“text”，并使控制器操作方法上的参数采用 String[] 传输。

jQuery

// Return the selected transactions
function resolveTransactions() {
    $('#btnResolve').click(function() {

        var selectedTransactions = new Array();

        $('input[name="chkTransaction"]:checked').each(function() {
            selectedTransactions.push(this.value);
        });

        if (selectedTransactions.length > 0) {
            $.ajax({
                type: 'POST',
                dataType: 'text',
                url: 'http://localhost/AuditLog/Home/ResolutionFormDisplay',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({ trans:selectedTransactions }),
                traditional: true,
                success: function (data) { alert(data); },
                error: function(xhr, status, errorThrown) { alert(" Error: " + errorThrown); }
            });
        } else {
            alert('You must select (check) at least one transaction to apply a resolution.');
            return false;
        }
        return false;
    });
};

MVC 4 控制器动作

[HttpPost]
public PartialViewResult ResolutionFormDisplay(string[] trans)
{
    var resolutionViewModel = new ResolutionViewModel();

    // fill Usernames dropdown selector in ViewModel
    // fill Status dropdown selector in ViewModel
    // fill list of transactionIds in ViewModel

    return PartialView("_ResolutionDialog", resolutionViewModel);
}

【讨论】：