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可用，它将创建名称[2]。如果3可用，但是2和4不可用，它将仍然创建名称[3]）。

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

}

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

如您所见，我正在创建具有ID的元素，例如名称1或电话[2]。该代码完全按预期工作。但是...

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

@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）可能有一种更简便的方法将我当前需要的信息传递给控制器，而不必具有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格式正确设置名称（不是ID） 代替“ id = email 1”，我们使用“ name = 1。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);

通过添加新方法来更新Controller

public ActionResult ExampleName(List<Contact> contacts)
    {

        var X = contacts;

        return View();
    }

创建MVC格式的动态元素

1 个答案: