Metoda post

Cześć wszystkim,

Jako, że jestem "nietechniczny" czyli bez szkoły/studiów technicznych i tuż po przebranżowieniu trochę się gubię w niektórych tematach i mam wrażenie, że brakuje mi po prostu fundamentalnej wiedzy. To mniej więcej tak jakby dziecku które nie potrafi chodzić kazano jeździć na rowerze :) to tak off topic. Do rzeczy.

Mój kod html:

<form method="post">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label asp-for="Name"></label>
                <input asp-for="Name" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <button type="submit" class="btn btn-primary">Dodaj kategorię</button>
        </div>
        <div class="col-md-6">
            @for (int i = 0; i < SubcategoriesData.Count(); i++)
            {
            <div id="container">
                <div class="form-group row">
                    <input asp-for="Subcategories[i].Name" value="@SubcategoriesData[i].Name" />
                    <span asp-validation-for="Subcategories[i].Name" class="text-danger"></span>
                </div>
            </div>
            }
            <button class="btn btn-primary" id="addSubCategory">Dodaj podkategorię</button>
        </div>
    </div>

</form>

<script>

        $(document).ready(function () {
            var i = @SubcategoriesData.Count()-1;
            $("#addSubCategory").click(function (e) {
                e.preventDefault();
                i++;
                var name = '<div class="form-group row"><input name = "Subcategories[' + i + '].Name" type="text"/><button class="btn btn-danger" id="removeSubcategory">Usuń</button></div>';
                $("#addSubCategory").before('<div id="container">' + name + '</div>');
            });
            $("#container").on('click', '#removeSubcategory', function (e) {

                    $(this).parent('div').remove();

            });
        });
</script>

Mam problem z przyciskiem usuwania, który pojawia się tuż przy inpucie. W momencie gdy chcę usunąć pole - zostaje wysyłane żądanie POST. Moje pytanie brzmi - dlaczego? Skoro przy dodawaniu nowych podkategorii jest ok i jquery dorzuca kolejne inputy? Czy to dlatego, że button znajduje się w <form>?

Tak, dlatego, że button masz wewnątrz form. Domyślnie button ma type = "submit", co powoduje próbę wysłania formularza na serwer.
Daj type="button" na buttonie.

Wpisz w konsoli, to zobaczysz.

var btn = document.createElement('button')
btn.type

Ok, nadałem type="button" i nie wysyłam już żądania do serwera. Nie działa mi natomiast skrypt z usuwaniem, mam go analogicznie wykonanego w innym widoku i tam śmiga. Pewnie jakaś literówka, albo błędne zagnieżdżenie... Jesteś w stanie spojrzeć na to drugą parą oczu?

<script>

        $(document).ready(function (e) {
            var i = @SubcategoriesData.Count()-1;
            $("#addSubCategory").click(function (e) {
                e.preventDefault();
                i++;
                var name = '<div class="form-group row"><input name = "Subcategories[' + i + '].Name" type="text"/><button type="button" class="btn btn-danger" id="removeSubcategory">Usuń</button></div>';
                $("#addSubCategory").before(name);
            });
            $("#container").on('click', '#removeSubcategory', function (e) {

                    $(this).parent('div').remove();

            });
        });
</script>

Aa, nieważne, patrzyłem na kod z pierwszego listingu.

Czy ktoś jest w stanie pomóc w tym temacie?

Dobra, masz tu coś nawalone. Przede wszystkim addSubCategory to jest zwykły button, więc nie musisz mu dawać preventDefault. To jest do submit formularza, więc pewnie w tym miejscu Ci skrypt się wywala. Tak podejrzewam. Teraz druga sprawa. Po wciśnięciu guzika Dodaj, tworzysz HTMLa z nowym guzikiem Usuń. I teraz są dwie złe rzeczy:

1. Nie twórz guzika USUŃ za pomocą HTMLa. Po prostu daj go w kodzie, tylko ukryj całego diva (visibility: collapse zdaje się). A po kliknięciu guzika Dodaj pokaż tego diva po prostu.
2. No i druga sprawa - Guzik USUŃ. Zwróć uwagę na to, że na CAŁEJ stronie atrybut ID ma być UNIKALNY. Z Twojego kodu tak nie wynika. Z Twojego kodu wynika, że możesz mieć kilka guzików o takim samym id.

Przemodelowałem nieco mój kod, w tej chwili od strony użytkownika jest ok - dodaję i usuwam podkategorię.

@model AplikacjaFryzjer_v2.Models.Category
@{
    ViewData["Title"] = "Edytuj kategorię";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var SubcategoriesData = (IList<AplikacjaFryzjer_v2.Models.Subcategory>)ViewBag.Subcategories;
}

<h1>Edytuj kategorię</h1>


<form method="post">
    <div class="form-group row">
        <div class="col">
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Name" class="col-sm-10 col-form-label"></label>
                <div class="col-sm-10">
                    <input asp-for="Name" disabled class="form-control" />
                </div>
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <button class="btn btn-primary" type="submit" id="update">Aktualizuj kategorię</button>
        </div>
        <div class="col">
            @if (SubcategoriesData != null)
            {
                <div class="col-sm-10 col-form-label">
                    <div id="subcatContainer">
                        @foreach (var subcategory in SubcategoriesData.ToList())
                        {
                            <div class="form-group col-sm-6">
                                <input asp-for="@subcategory.Name" />
                                <button class="btn btn-danger" type="button" id="remove">Usuń</button>
                                <span asp-validation-for="@subcategory.Name" class="text-danger"></span>
                            </div>
                        }
                    </div>
                    <button type="button" class="btn btn-secondary" id="add">Dodaj podkategorię</button>
                </div>
            }
            else
            {
                <div id="container" class="col-md-6">
                    <label id="labelName">Nazwa podkategorii</label>
                    <input id="inputName" />
                    <button type="button" class="btn btn-secondary" id="addNew">Dodaj</button>
                </div>
            }
        </div>
    </div>
</form>
    <script>
        $(document).ready(function (e) {
            // Variables
            var i = @SubcategoriesData.Count()-1;
           
            // Add rows to the form
            $("#add").click(function (e) {
                var html = '<p /><div class="form-group col-sm-6"><input asp-for="Subcategories[' + i + '].Name" /><button class="btn btn-danger" type="button" id="remove">Usuń</button></div>';
                i++;
                $("#subcatContainer").append(html).before();
            });

            // Remove rows from the form
            $("#subcatContainer").on('click', '#remove', function (e) {
                i--;
                $(this).parent('div').remove();

            });

            // Populate values from the first row
        });
    </script>

Problem mam jednak z przekazaniem tych danych do kontrolera. Model danych to Category. Dodałem też zmienną w formie listy poprzez ViewBag dotyczącą podkategorii (Subcategory). Niestety do modelu przenoszona jest tylko nazwa kategorii, bez jakichkolwiek podkategorii...

Dodatkowo znalazłem też drugi problem (przynajmniej tak mi się wydaje) w tej chwili niewidoczny dla użytkownika, ale po stronie przeglądarki w kodzie html po dodawaniu/usuwaniu pola input mam nieścisłości w odwołaniach. Tzn chodzi o to że np. po dodaniu otrzymuję:

<div class="form-group col-sm-6"><input asp-for="Subcategories[3].Name"></div>
<div class="form-group col-sm-6"><input asp-for="Subcategories[4].Name"></div>
<div class="form-group col-sm-6"><input asp-for="Subcategories[5].Name"></div>

Usuwam rekord [4] pozostaje mi więc

<div class="form-group col-sm-6"><input asp-for="Subcategories[3].Name"></div>
<div class="form-group col-sm-6"><input asp-for="Subcategories[5].Name"></div>

Moim zdaniem w tym miejscu powinienem już zmienić [5] na [4]. Pytanie jak to najlepiej wykonać poprzez jQuery?