Професионална програма
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