Динамично добавяне/премахване от колекция. 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? Как?? :)
Приемам всякакви съвети, линкове, книги  и т.н.
Благодаря!