javascript - 创建 MVC 格式的动态元素

Question

我在 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" />

我将 id 作为“name[0]”作为标准元素。 JavaScript 将找到最小的可用数字(因此如果 2 可用，它将创建 name[2]。如果 3 可用但 2 和 4 不可用，它仍将创建 name[3])。

JavaScript 第 1 部分:

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++;
        }
    }
}

同样，这很好。这是导致问题的下一部分。

JavaScript Pt 2(问题阶段):

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);

}

请注意，此代码(显然)已被删节。其他元素在实际副本中，但它们都是相同的，所以我将它们排除在外。

如您所见，我正在创建具有名称 1 等 ID 的元素或电话[2]。该代码完全按照预期的方式工作。然而……

问题:因为它不是 MVC 模型格式，所以我很难将它转换成可以轻松传递给 Controller ​​的类/对象(不是我下面的代码，只是我认为它应该是什么样子的一个例子)。

@using (Html.BeginForm("Contact", "HomeController", FormMethod.Post))
{
    @Html.LabelFor(x => x.Name)
    @Html.TextBoxFor(x => x.Name)
//Insert more code here for email and phone number
}

潜在的解决方案所以我认为有 2 个我找不到的潜在解决方案。 1) 可能有一种更简单的方法可以将我目前拥有的内容传递给 Controller ​​，而无需 30 个参数(10 个姓名、10 个电子邮件、10 个电话号码)。或者 2) 有一种使用 MVC 模型添加字段/元素的更好方法。

如果我能澄清任何事情，请告诉我。提前致谢!

Answer 1

感谢 GregH 的帮助!您发布的文章非常有帮助:haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

上课(忘记早点发布了，但它在那里)

    public class Contact
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string PhoneNumber { get; set; }
}

在 HTML 中正确格式化 NAMES(不是 id)我们使用“name = 1 .email”代替“id=email 1”。我们也为 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);

通过添加新方法更新 Controller

public ActionResult ExampleName(List<Contact> contacts)
    {

        var X = contacts;

        return View();
    }