Javascript 创建MVC格式的动态元素

我在ASP.NET MVC应用程序中有3个输入框。用户最多可以向页面添加10个联系人。它们通过单击“添加行”按钮添加额外行，并使用“删除行”按钮删除行（并单击复选标记）

这个很好用

然而，我突然想到它应该是某种模型格式，但现在我有了标准HTML格式

HTML:

    <INPUT type="button" value="Add Row" onclick="getId('Table')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('Table')" />

<TABLE class="table" id="Table">
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Phone Number</th>


        </tr>
    </thead>
    <TR>
        <TD><INPUT type="checkbox" class="form-control" id="checkbox[0]" /></TD>
        <TD><INPUT type="text" class="form-control" id="Name[0]" /></TD>
        <TD><INPUT type="email" class="form-control" id="Email[0]" /> </TD>
        <TD><INPUT type="tel" class="form-control" id="PhoneNo[0]" /> </TD>
    </TR>
</TABLE>

<input type="submit" id="submit" value="submit" />

function getId(tableId) {

    var idNumber = 0;
    var stop = false;


    while (stop == false) {
        var checkId = document.getElementById("witnessName[" + idNumber + "]");

        if (idNumber >= 11) {
            alert("Max number of witnesses reached");
            stop = true;
        } else {
            if (checkId) {
                stop = false;
            } else {
                alert(idNumber);
                addRow(tableId, idNumber)
                stop = true;
            }
            idNumber++;
        }
    }
}

function addRow(tableID, idNumber) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.id = "Name[" + idNumber + "]";
    element2.className = "form-control";
    cell2.appendChild(element2);

}

同样，这很好。这是引起问题的下一部分

JavaScript第2部分（发布阶段）：

    <INPUT type="button" value="Add Row" onclick="getId('Table')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('Table')" />

<TABLE class="table" id="Table">
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Phone Number</th>


        </tr>
    </thead>
    <TR>
        <TD><INPUT type="checkbox" class="form-control" id="checkbox[0]" /></TD>
        <TD><INPUT type="text" class="form-control" id="Name[0]" /></TD>
        <TD><INPUT type="email" class="form-control" id="Email[0]" /> </TD>
        <TD><INPUT type="tel" class="form-control" id="PhoneNo[0]" /> </TD>
    </TR>
</TABLE>

<input type="submit" id="submit" value="submit" />

function getId(tableId) {

    var idNumber = 0;
    var stop = false;


    while (stop == false) {
        var checkId = document.getElementById("witnessName[" + idNumber + "]");

        if (idNumber >= 11) {
            alert("Max number of witnesses reached");
            stop = true;
        } else {
            if (checkId) {
                stop = false;
            } else {
                alert(idNumber);
                addRow(tableId, idNumber)
                stop = true;
            }
            idNumber++;
        }
    }
}

function addRow(tableID, idNumber) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.id = "Name[" + idNumber + "]";
    element2.className = "form-control";
    cell2.appendChild(element2);

}

请注意，此代码（显然）是删节的。其他元素在实际副本中，但它们都是相同的，所以我忽略了它们

如您所见，我正在创建带有ID的元素，如name或phone[2]。该代码的工作原理与预期完全相同。然而

问题： 因为它不是MVC模型格式，所以我很难将它转换为一个类/对象，这个类/对象很容易传递给控制器（下面不是我的代码，只是我认为它应该是什么样子的一个示例）

潜在解决方案 因此，我认为有两个潜在的解决方案，我无法找到。1） 可能有一种更简单的方法可以将我当前拥有的信息传递给控制器，而不必有30个参数（10个姓名、10封电子邮件、10个电话号码）。或者2）有更好的方法使用MVC模型添加字段/元素

---

如果我能澄清什么，请告诉我。提前谢谢你

谢谢格雷格的帮助您发布的文章非常有用：

有一门课（之前忘了发这篇文章，但它就在那里）

在HTML中正确设置名称（而不是ID）的格式 我们使用了“name=.email”而不是“id=email”。我们对id也做了同样的事情，但这不是解决办法

function addRow(tableID, idNumber) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.id = "[" + idNumber + "].Name";
    element2.name = "[" + idNumber + "].Name";
    element2.className = "form-control";
    cell2.appendChild(element2);

通过添加新方法更新控制器

public ActionResult ExampleName(List<Contact> contacts)
    {

        var X = contacts;

        return View();
    }

public ActionResult示例名称（列出联系人）
{
var X=触点；
返回视图（）；
}

将列表绑定到mvc中的模型并不完全是直截了当的。您是正确的，因为您需要为输入

name

属性遵循正确的命名约定。这应该会有帮助：这个链接确实解决了我所有的问题。你太棒了！