Создание динамических элементов в формате MVC

Question

У меня есть 3 поля ввода в приложении ASP.NET MVC.Пользователи могут добавить до 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" />

У меня есть идентификатор "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);

}

Обратите внимание, что этот код (очевидно) сокращен.Остальные элементы находятся в реальной копии, но все они идентичны, поэтому я их пропустил.

Как видите, я создаю элементы с такими идентификаторами, как имя 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

Спасибо, Грег, за вашу помощь! Статья, которую вы опубликовали, была ОЧЕНЬ полезной: 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 = 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);

Обновите контроллер, добавив новый метод

public ActionResult ExampleName(List<Contact> contacts)
    {

        var X = contacts;

        return View();
    }