创建 MVC 格式的动态元素

Question

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

This works fine.

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

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

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

JavaScript Pt 2 (the issue stage):

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.

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

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
}

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!

Answer 1

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

Properly Format NAMES (not ids) in HTML instead of "id=email 1 " 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);

Update the Controller by adding a new method

public ActionResult ExampleName(List<Contact> contacts)
    {

        var X = contacts;

        return View();
    }