用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 在文档中应该是唯一的

从您添加到问题的 cmets 中，您希望通过从 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 类获取所有 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);