Loading...
Quake3 avatar Quake3 546 Точки

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


Благодаря!

 

 

Тагове:
0
C# MVC Frameworks - ASP.NET 12/10/2019 16:38:21
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.