如何将带有对象列表的数据 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>
}

这是测试结果：