javascript - 如何将使用 `getElementsByClassName` 创建的集合发送到我的 Controller ？

Question

我正在努力尝试将 getElementsByClassName 生成的集合发送到 VB.Net、MVC5 中的 Controller 。该特定页面用于由用户编辑项目，并且同一页面用于每种项目类型。此外，所有项目类型的所有字段都存储在一个表中，我相信这使得使用默认模型绑定(bind)器不再是一种选择。所有字段都有一个唯一的标识号，用作 View 中的 id。

我用来收集各个字段的脚本:

function submitEdit(editRow) {
                alert('edit function');

                var edits = document.getElementsByClassName('edit');
                alert('get complete');
                var i;
                for (i = 0; i < edits.length; i++) {
                    alert('in loop');
                    alert(edits[i].checked);
                }

我尝试过不同的警报，并且在我的集合中得到了我需要的值。

这是我试图将集合传递给的函数:

Function EditConfirmation(edits As Collection) As ActionResult

我尝试将此集合作为 url 参数发送。我也尝试通过 ajax 传递它，如下所示:

            $.ajax({
                url: '/ViewDetails/EditConfirmation',
                type: 'POST',
                data: { 'edits': edits },
                success: function (result) {
                    alert("success");
                }
                .error(function (xhr, status) {
                    alert(status);
                })
            });

有没有办法将此集合传递给我的 Controller ，或者有其他我忽略的方法吗？

Answer 1

1. 您确实应该使用 console.log 而不是alert。
2. 使用真正的调试器进行调试会更容易(查看 Chrome 的开发人员工具 javascript debugging )。
3. 您的 javascript 代码中 .error(function 附近有一些错误

你的代码应该是这样的:

$.ajax({
    url: '/ViewDetails/EditConfirmation',
    type: 'POST',
    data: { 'edits': edits },
    success: function (result) {
        alert("success");
    },
    error: function (status) {
        alert(status);
    })
});

您的主要问题是 document.getElementsByClassName 为您提供了一个 DOM 元素数组，并且您无法将这些元素直接传递到服务器。您需要将它们更改为可以发送到服务器的数据(例如字符串/数字/ bool 值/简单对象/数组。

我不确定您到底想发送什么，但这里有一个您可以使用的示例:

var edits = document.getElementsByClassName('edit');
var dataToSend = {};
for (i = 0; i < edits.length; i++) {
    dataToSend[edits[i]['name']] = edits[i].checked;
}
// Now you can use the object dataToSend (which is a simple object) as the data to send to the server
$.ajax({
    ...
    ...
    data: { 'edits': dataToSend },
    ...
    ...
});