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();
});
Вы можете запустить код, нажать кнопку на форме, и вы получите все значения в контроллере, используя "привязку модели".