love goldsmith Ответов: 2

Как создавать динамические формы в ASP.NET MVC и связывают их значения с модальным связыванием


Привет Программисты,

Я ищу ваш совет о том, как лучше всего поступить с созданием форма, которая является динамической во время выполнения использование ASP.NET MVC.

Например, у меня есть форма для ввода адреса компании, а затем пользователь может ввести больше контактов, связанных с этой компанией. Здесь кнопка будет там для Добавление Контакта, и когда он нажат, то новая часть формы, с контактными данными, загружается динамически с помощью jQuery.

Если кнопка нажата снова, то новая часть формы загружается снова, так что теперь есть два контакта, которые можно добавить из формы.

Я хочу добавить эту часть (больше контактов) с помощью jQuery динамически в свой вид.

Теперь, когда форма отправлена, я хочу убедиться, что данные форм (включая динамическую область формы) правильно привязаны к модели с помощью Привязка модели техника. Как это сделать?

Надеюсь, это имеет смысл,

Спасибо!

Что я уже пробовал:

Я пробовал привязку модели, но данные динамической детали не являются привязкой.

2 Ответов

Рейтинг:
4

Yogi S.

Именно так можно создавать динамические формы и отправлять значения в контроллер с помощью метода привязки модели

У тебя есть Контакт.в CS Модель:

public class Contact
{
    public int StreetNo { get; set; }

    [Required]
    public string Address { get; set; }

    [Required]
    public int Telephone { get; set; }
}


Затем создайте метод действия на контроллере, который имеет параметр IList тип:

[HttpPost]
public IActionResult Index(IList contactList)
{
    if (ModelState.IsValid)
    {

    }
    return View();
}


Далее, в вашем "представлении", создайте "html-таблица и кнопка" добавление строк в таблицу:

<button id="AddButton">Add New Contact</button>
    <form method="post">
        <table>
            <thead>
                <tr>
                    <td>Street No</td>
                    <td>Address</td>
                    <td>Telephone No</td>
                    <td></td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <button>Submit</button>
    </form>
    <input type="hidden" id="totalContacts" value="0" />


У меня также есть скрытый входной контроль это позволит отслеживать на количество добавленных строк к столу.

Теперь добавьте следующее код jQuery к виду, который будет делать сложение строк и вычитание строк.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
    $(document).ready(function () {
        $("#AddButton").click(function () {
            tc = parseInt($("#totalContacts").val());
            tc = tc + 1;
            $("#totalContacts").val(tc)

            $("tbody").append('<input type="text" name="[' + (tc - 1) + '].StreetNo" /><input type="text" name="[' + (tc - 1) + '].Address" /><input type="text" name="[' + (tc - 1) + '].Telephone" />Remove')
        });

        $("tbody").on("click", "span", function () {
            tc = parseInt($("#totalContacts").val());
            tc = tc - 1;
            $("#totalContacts").val(tc)

            $(this).parents("tr").remove();
        });
    });
</script>


Объяснение: При нажатии кнопки AddButton в таблицу добавляется новая строка из приведенного ниже кода:

$("tbody").append('<input type="text" name="[' + (tc - 1) + '].StreetNo" /><input type="text" name="[' + (tc - 1) + '].Address" /><input
type="text" name="[' + (tc - 1) + '].Telephone" />Remove')


Переменная 'tc' дает строка итогов в настоящее время там в таблице и используется для создания названия элементов (что является самой важной частью). Помнить имена должны быть созданы путем добавления [0]., [1]., [2]. и т. д. до того , как появились имена. Это поможет вам подать заявку Привязка Модели техника в этом сценарии.

Взять для примера:

Если есть 1 строка, то:

<input type="text" name="[0].StreetNo">
<input type="text" name="[0].Address">
<input type="text" name="[0].Telephone">


Если есть 2 строки, то:

<input type="text" name="[0].StreetNo">
<input type="text" name="[0].Address">
<input type="text" name="[0].Telephone">

<input type="text" name="[1].StreetNo">
<input type="text" name="[1].Address">
<input type="text" name="[1].Telephone">


У меня есть элемент span на последнем ТД каждой строки таблицы. Поскольку он генерируется динамически, поэтому я использовал jQuery On способ применения-это событие click. Внутри дома промежутка нажмите событие, я просто удаляю строку (в которой она лежит) с помощью .удалить() метод. Кроме того, я обновляю счетчик строк в скрытом элементе управления вводом.

$("tbody").on("click", "span", function () {
    tc = parseInt($("#totalContacts").val());
    tc = tc - 1;
    $("#totalContacts").val(tc)

    $(this).parents("tr").remove();
});


Вы можете запустить код, нажать кнопку на форме, и вы получите все значения в контроллере, используя "привязку модели".


love goldsmith

Спасибо Вам за это идеальное решение. Я реализовал его на своем веб-сайте. Это сработало идеально.

Yogi S.

с удовольствием.

Рейтинг:
1

love goldsmith

Нет, это общая привязка модели, я искал привязку модели в динамически генерируемых элементах управления.

F-ES Sitecore

Если вы даже не собираетесь смотреть на примеры, которые вам дают, тогда нет особого смысла помогать.

love goldsmith

Я хочу привязки динамической модели, вы не прочитали мой вопрос должным образом.

F-ES Sitecore

Вам придется обновить свой вопрос, чтобы объяснить, почему вы подразумеваете под "привязками динамической модели", поскольку это явно не то, что понимают остальные из нас.