Динамично добавяне/премахване от колекция. ASP MVC + Jquery/Ajax
Здравейте,
Искам да се извиня, ако въпросите ми звучат глупаво. Това е защото съм съвсем "зелен" в уеб програмирането.
Задачата която се опитвам да реша е как да добавя/премахна елемент от лист, който е пропърти на модел, като изполвазм jquery + ajax, без да презареждам страницата.
Проблемът ми е, че след като изтрия елемент се трябва да реиндексирам всички id и name на html елементите от листа, защото явно трябва да са последоватлени... А още по-големият проблем е в добавянето на елемент.
Има доста не мой код с валидация, който трябва да продължи да работи и при submit, променените полета трябва да се запазят.
Моделът ми изглежда така:
public IList<Address> Addresses { get; set; }
Address:
public class Address
{
public Address()
{
this.Selected = false;
}
public int Id { get; set; }
public string RawText { get; set; }
public bool Selected { get; set; }
...
}
Contoller:
[HttpPost]
public ActionResult AddAddressForCustomerID(string email, string newAddress)
{
Customer customer = customerRepository.GetCustomer(email);
Address address = new Address
{
CustomerId = customer.Id,
...
RawText = newAddress
};
addressRepository.Insert(address);
Response.StatusCode = (int)HttpStatusCode.NoContent;
return Json(null, MediaTypeNames.Text.Plain);
}
View:
function AddAddress(button) {
let currentRow = $(button).closest("tr");
let newAddress = currentRow.find("#add-address").val();
$.ajax({
url: "@Url.Action("AddAddressForCustomerID", "CustomerData")",
type: "POST",
data: {
email: '@Model.Email',
newAddress: newAddress
},
cache: false,
dataType: "json",
success: function () {
Тук трябва да стои кодът, който ще добави новият адрес, вместо:
location.reload(true);
},
error: function (e) {
alert(e.status + ' / ' + e.responseText);
window.location = '@Url.Action("Order", "Menu")';
}
});
}
...
@for (int i = 0; i < Model.Addresses.Count; i++)
{
<tr class="address-tr" id="tr@(Model.Addresses[i].Id)">
<td class="address-td">
@Html.HiddenFor(m => m.Addresses[i].Id)
@Html.RadioButtonFor(m => m.Addresses[i].Selected, true, new { data_group = "radio-buttons-group" })
</td>
<td class="text-right" style='position:relative;'>
@Html.TextBoxFor(m => m.Addresses[i].RawText, "", new { @class = "form-control", @placeholder = "Address" })
</td>
<td style='position:relative;'>
<span class="delete-address op-fas-icon" onclick="deleteAddress('tr@(Model.Addresses[i].Id)', @(Model.Addresses[i].Id));">
<i class="fas fa-trash"></i>
</span>
</td>
</tr>
}
<tr>
<td></td>
<td id="add-address-td" class="text-right" style='position:relative;'>
@Html.TextBox("add-address", "", new { @class = "form-control", @placeholder = "New Address *" })
</td>
<td style='position:relative;'>
<span class="add-address-button op-fas-icon" onclick="AddAddress(this);">
<i class="fas fa-plus"></i>
</span>
</td>
</tr>
Има ли начин това което искам да се направи?
Къде трябва да се конструира html-то за новодобавения item - в view или в controller? Как?? :)
Приемам всякакви съвети, линкове, книги и т.н.
Благодаря!