用MVC中视图的输入值替换脚本中的数组值

Question

我有这个视图代码（模型的值）：

@foreach (var item in Model)
{
  <input name="DepID" type="text" value="@item.DepID" id="id">
  <input name="DepName" type="text"  value="@item.DepName" id="depname">
  <input name="DepID_Parent" type="text"  value="@item.DepID_Parent" 
id="parent">
}

另一方面，我的脚本中有一个如下所示的数组：

var testData = [
 { id: 1, name: 'my organization', parent: 0 },
 { id: 2, name: 'ceo office', parent: 1 },
 { id: 3, name: 'division 1', parent: 1 },
 { id: 4, name: 'division 2', parent: 1 },
 { id: 6, name: 'division 3', parent: 1 },
 { id: 7, name: 'division 4', parent: 1 },
 { id: 8, name: 'division 5', parent: 1 },
 { id: 5, name: 'sub division', parent: 3 },
];

我想替换所有输入到 testData 数组的值，并在我的脚本中使用它们。

所以，我用这段脚本代码更改了 testData 的定义：

var testData = $('#id,#depname,#parent').map(function () {
            return testData.value;
        }).get();

但是当我用这段代码替换 testData 时，没有返回值。

必须进行哪些更改？

Answer 1

您的代码有一些问题。您正在为循环内的输入元素设置静态 id 属性值。因此，当 razor 执行您的代码时，它会为具有相同 id 属性值的多个输入生成标记。即无效HTML！元素 ID 在文档中应该是唯一的

根据您添加到问题的评论，您想通过读取 DOM 中的输入值来创建一个类似于 testData 变量中的数组 javascript .我建议您将集合中每个项目的输入包装在包装器 div 中。稍后您可以在此包装器 div 上使用 jQuery 选择器来获取构建数组的项目。确保删除在循环中设置相同 id 属性值的代码

@foreach (var item in Model)
{
    <div class="item-row">
        <input name="DepID" type="text" value="@item.DepID" />
        <input name="DepName" type="text"  value="@item.DepName" />
        <input name="DepID_Parent" type="text"  value="@item.DepID_Parent" />
    </div>
}

现在在您的 javascript 中，使用 item-row class 获取所有 div，并获取输入（使用 name 选择器）和使用 3 个属性构建对象。

这应该有效

var testData = $("div.item-row").map(function () {
    var t = $(this);

    return {
        id: t.find("[name='DepID']").val(),
        name: t.find("[name='DepName']").val(),
        parent: t.find("[name='DepID_Parent']").val()
    };
}).get();
//testData is an array of js objects with 3 properties
console.log(testData);

用MVC中视图的输入值替换脚本中的数组值

Replacing an array values in script with input values of view in MVC

javascript

arrays

asp.net-mvc

ienumerable

jquery