Как обрабатывать повторяющиеся поля формы в ASP MVC

У меня есть форма, которая запрашивает у пользователей их личную информацию и членов их семей.
поля членов семьи повторяются.
мой вопрос - это то, что лучше всего подходит для обработки таких повторяющихся форм?
В настоящее время я использую AJAX для повторения форм, но как собирать данные из этих повторяющихся полей? enter image description here


так как кто-то спросил, как я повторяю форму, я делаю это так: Вызов AJAX

$(document).on('click', '.btn-add-item', function (e) {
    e.preventDefault();
    var $results = $('#results');
    $.ajax({
        url: '/AJAX/AddFamilyForm',
        type: 'post',
        success: function (data) {
            $(data).appendTo($results);
            afterAJAX();
        }
    });
});

Код С#

[HttpPost]
public PartialViewResult AddFamilyForm()
{
    if (!Request.IsAjaxRequest()) return null;
    return PartialView("_FamilyForm");
}

Ответы

Ответ 1

Это некоторый код скелета о том, как заставить это работать с надлежащей привязкой модели в MVC. Вам нужно будет написать JS, чтобы иметь возможность удалять/добавлять новые строки.

Model

public class MyModel
{
    public FamilyMembers[] FamilyMembers { get; set; }
}

Вид

<button id="addNewFamilyMember" type="button">Add</button>
@if (Model.FamilyMembers != null)
{
    for (int i = 0; i < Model.FamilyMembers.Length; i++)
    {
        <tr>
            <td>
                <button type="button">Delete</button>
                @Html.Hidden("FamilyMembers.Index", i)
            </td>
            <td>
                @Html.TextBoxFor(m => Model.FamilyMembers[i].Relation)
            </td>
            <td>
                @Html.TextBoxFor(m => Model.FamilyMembers[i].FullName)
            </td>
        </tr>
    }
}

Ниже приведен код для добавления нового участника. Он динамически создает html и может привязываться к опубликованной модели из-за соглашений об именах. time дает каждой добавленной строке уникальный идентификатор, поэтому все данные остаются вместе.

JS (с использованием JQuery)

var hidden = '@Html.Hidden("FamilyMembers.Index", "{id}")';
var relationHtml = '@Html.TextBox("FamilyMembers[{id}].Relation")';
var fullNameHtml = '@Html.TextBox("FamilyMembers[{id}].FullName")';

$("#addNewFamilyMember").on("click", function () {
        var time = Date.now();

        var deleteHtml = "<button type='button'>Delete</button>";

        $("#familyMembers-table").find("tbody")
         .append($("<tr><td>" + hidden.replace("{id}", time) + deleteHtml + "</td>" +
            "<td>" + relationHtml.replace("{id}", time) + "</td>" +
            "<td>" + fullNameHtml.replace("{id}", time) + "</td></tr>"));
});

Ответ 2

Одним из решений может быть комбинация скрытого поля и имени управления.

Шаги:

  • Используйте скрытое поле, чтобы подсчитать количество строк.
  • Создайте элементы управления с именем типа text_relation_1 для первой строки и text_relation_2 для второй строки и т.д.
  • Создайте другие элементы управления таким же образом.
  • Увеличить и уменьшить значение скрытого поля, чтобы при публикации значений вы могли узнать количество строк, добавленных пользователем

В своем действии используйте FormCollection и зациклируйте хотя бы скрытый номер поля и получите значения от FormCollection

Как будто я создал 3 строки, я могу создать действие, подобное ниже

public ActionResult SomeActionMethod(FormCollection formCollection, string hid)
{
    for(int i=1;i<hid;i++)
    {
        var relationId="text_relation_"+i;
        var firstrealtion=formCollection[relationId];
        ...
    }
}

Ответ 3

Для этого вам не нужны дополнительные Ajax-запросы, так как вы можете использовать установленные и стандартные функции <form>.

Просто добавьте [] к имени добавленных форм, и после отправки формы вы получите массив, а не одно значение в своем HTTP-запросе:

<input type="text" name="relation[]" /><input type="text" name="fullname[]" />
<input type="text" name="relation[]" /><input type="text" name="fullname[]" />
<input type="text" name="relation[]" /><input type="text" name="fullname[]" />

В этом примере вы получите массив relation и массив fullname, содержащий ваши наборы данных.