创建 MVC 格式的动态元素 [英] Create Dynamic Elements that are MVC Format

问题描述

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

I have 3 input boxes in an ASP.NET MVC application. Users can add up to 10 contacts to the page. They add extra rows by clicking the 'add row' button, and delete rows using the 'delete row' button (and clicking the check marks).

这很好用.

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

However, it occurs to me that it should be in some model format, but right now I have it in standard HTML format.

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]).

I have the id as "name[0]" as a standard element. The JavaScript will find the lowest available number (so if 2 is available, it will create name[2]. If 3 is available but 2 and 4 are not, it will still create 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++;
        }
    }
}

再次这很好.这是导致问题的下一部分.

Again this is fine. It's the next part that is causing issues.

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

}

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

Please note that this code is (obviously) abridged. The other elements are in the actual copy, but they're all identical so I left them out.

如您所见，我正在创建具有 id 的元素，例如 name1或电话[2].该代码完全按照它的预期工作.然而……

As you can see, I am creating elements with ids such as name1 or phone[2]. The code works exactly how its supposed to. HOWEVER...

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

The problem: Because it's not in the MVC model format, I'm having a hard time converting it into a class/object that is easily passable to the controller (not my code below, just an example of how I think it should look).

@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 模型添加字段/元素.

Potential Solutions So I think there are 2 potential solutions out there that I cannot find. 1) there may be an easier way to pass what I currently have to a controller without having to have 30 parameters (10 names, 10 emails, 10 phone numbers). OR 2) there's a better way to add fields/elements using the MVC model.

如果我能澄清什么，请告诉我.提前致谢！

Please let me know if I can clarify anything. Thank you in advance!

推荐答案

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

Thank you GregH for your help! The article you posted was VERY helpful: haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

上一堂课(之前忘记发布了，但它在那里)

Have a Class (forgot to post this earlier, but it was there)

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

在 HTML 中正确格式化名称(而非 ID)而不是id=email1" 我们使用了 "name = 1.email".我们也对 id 做了同样的事情，但这不是解决办法.

Properly Format NAMES (not ids) in HTML instead of "id=email1" we used "name = 1.email". We also did the same thing for id, but that wasn't the fix.

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

这篇关于创建 MVC 格式的动态元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！