Блог

У меня есть 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, оно создаст 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 Часть 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);

}
 

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

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

Пожалуйста, дайте мне знать, если я смогу что-нибудь прояснить. Заранее благодарю вас!

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