如何將帶有對象列表的數據 object 傳遞給 controller

Question

我在 IT 方面是初級（或低於初級）。 我在將數據從視圖傳遞到 controller 時遇到問題...我想要實現的目標：當用戶單擊時：

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

我想將整個 object“類別”傳遞給 controller（也帶有列表子類別）。 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>

我在 controller 中的操作 CreateCategory：

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

還有我的 object（型號）：

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

Answer 1

提交復雜模型時，需要確保這些綁定到子類別 class 字段的控件的名稱屬性以集合索引的形式顯示。

並在js中觸發addSubCategory點擊事件，添加Subcategory控件和數據。

由於您添加了 model 驗證，我建議您使用ViewBag.Subcategories保存已添加到當前頁面的 Subcategories 數據，以防止單擊驗證后數據丟失。

您只需要在表單中添加一個 asp-validation-summary 。 由於這些字段屬於一個 model 並且在一個表單中，因此它們的錯誤信息將計入 asp-validation-summary div。

這是一個完整的例子：

   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; }
    }

Controller：

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>
}

這是測試結果：