Как передать объект данных со списком объектов в контроллер

Question

Я младший (или младший) в IT. У меня проблема с передачей данных из представления в контроллер ... Чего я хочу достичь: когда пользователь нажимает:

<button type="submit" class="btn btn-primary">Dodaj kategorię</button>

Я хочу передать весь объект «Категория» контроллеру (также с подкатегорией списка). Вторая кнопка с id = "addSubCategory" добавит поле для ввода следующей подкатегории, но я хочу отправить все после нажатия кнопки type = submit. Как я могу передать все названия подкатегорий в список и отправить один метод публикации?

Это мой взгляд:

@model AplikacjaFryzjer_v2.Models.Category
@{
    ViewData["Title"] = "Dodaj nową kategorię";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Dodaj nową kategorię</h1>


<form method="post">
    <div class="row">
        <div class="col-md-6">
            <div asp-validation-summary="All" class="text-danger"></div>
            <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 offset-6">
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Subcategories"></label>
                <input asp-for="Subcategories" />
                <span asp-validation-for="Subcategories" class="text-danger"></span>
            </div>
            <button class="btn btn-primary" id="addSubCategory" value="table">Dodaj podkategorię</button>
        </div>
    </div>
</form>

Мое действие CreateCategory в контроллере:

        [HttpPost]
    public IActionResult CreateCategory(Category category)
    {
        _categoriesRepository.AddCategory(category);
        return RedirectToAction("ManageCategories");
    }

И мой объект (модель):

    public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Subcategory> Subcategories {get;set;}
}

Answer 1

Для отправки сложных моделей вам необходимо убедиться, что атрибут name этих элементов управления, привязанных к полям класса Subcategory, отображается в форме индекса коллекции .

И запускает addSubCategory щелкните событие в js, чтобы добавить элемент управления и данные подкатегории.

Поскольку вы добавили проверку модели, я предлагаю вам использовать ViewBag.Subcategories для сохранения данных подкатегорий, которые были добавлены на текущую страницу, в предотвратить потерю данных после нажатия кнопки проверки .

И вам нужно только добавить an asp -validation-summary в вашу форму. Поскольку эти поля принадлежат модели и находятся в форме, их информация об ошибках будет учитываться в div asp -validation-summary.

Вот полный пример:

   public class Category
    {
        public int Id { get; set; }
        [Required] 
        public string Name { get; set; }
        public List<Subcategory> Subcategories { get; set; }
    }

    public class Subcategory
    { 
        [Required]
        [DisplayName("Subcategory.Name")]
        public string Name { get; set; }
    }

Контроллер:

public IActionResult CreateCategory()
        {
            ViewBag.Subcategories = new List<Subcategory>() { };
            return View();
        }

        [HttpPost]
        public IActionResult CreateCategory(Category category)
        {
            if (!ModelState.IsValid)
            {
                // store Subcategories data which has been added
                ViewBag.Subcategories = category.Subcategories == null ? new List<Subcategory>() { } : category.Subcategories;
                return View("CreateCategory");

            }
             _categoriesRepository.AddCategory(category);
            return RedirectToAction("ManageCategories");
        }

Просмотр:

@model AplikacjaFryzjer_v2.Models.Category
@{
    ViewData["Title"] = "Dodaj nową kategorię";
    Layout = "~/Views/Shared/_Layout.cshtml";

    var SubcategoriesData = (IList<AplikacjaFryzjer_v2.Models.Subcategory>)ViewBag.Subcategories;

}

<h1>Dodaj nową kategorię</h1>
<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 offset-6">
            @for (int i = 0; i < SubcategoriesData.Count(); i++)
            {
                <div class="form-group">
                    <label>Name@(i)</label>
                    <input asp-for="Subcategories[i].Name" value="@SubcategoriesData[i].Name" />
                    <span asp-validation-for="Subcategories[i].Name" class="text-danger"></span>
                </div>
            }
            <button class="btn btn-primary" onclick="RemoveSubcategory(this)" id="removeSubcategory">remove</button>
            <button class="btn btn-primary" id="addSubCategory" value="table">Dodaj podkategorię</button>
        </div> 
        <div asp-validation-summary="All" class="text-danger"></div>
    </div>

</form>
@section Scripts
{
    <script>

     var i = @SubcategoriesData.Count()-1;
    $(document).ready(function () {
        if (@SubcategoriesData.Count() <= 0) {
            $("#removeSubcategory").hide();
        }

        $("#addSubCategory").click(function (e) {
            e.preventDefault();
            i++;
            var name = '<label>Name' + i + '</label><input name = "Subcategories[' + i + '].Name" type="text"/>'; 
            $("#removeSubcategory").before('<div class="form-group">' + name  + '</div>');
            $("#removeSubcategory").show();
        });


    });
    function RemoveSubcategory(btn) {
        event.preventDefault();
        $(btn).prev("div").remove();
        i--;
        if (i == @SubcategoriesData.Count() -1) {
            $("#removeSubcategory").hide();
        }
    }
    </script>
}

Вот результат теста:

введите описание изображения здесь