使用asp.net core 2.2创建类别和子类别相关的列表框

问题描述

我正在尝试创建一个页面，在该页面中有一个用于创建产品的表单。在这里，我试图创建类别和子类别相关的列表框。但是我不知道我该怎么做。这是我的代码：

public class Category
    {

        public int Id { get; set; }

        [required]
        [display(Name = "Category Name")]
        public string CategoryName { get; set; }
    }

//my SubCategory model

 public class SubCategory
    {
        public int Id { get; set; }

        [required]
        [display(Name = "SubCategory Name")]
        public string SubCategoryName { get; set; }
    }




//my product model

 public class Product
    {
        public int Id { get; set; }
        [required]
        public String Name { get; set; }
        [required]
        [display(Name = "Category Type")]

        public int CategoryTypeId { get; set; }

        [ForeignKey("CategoryTypeId")]
        public Category Category { get; set; }

        [required]
        [display(Name = "SubCategory Type")]

        public int SubCategoryTypeId { get; set; }

        [ForeignKey("SubCategoryTypeId")]
        public SubCategory SubCategory { get; set; }
    }

产品负责人


        [HttpGet]
        public IActionResult Create()
        {
            ViewData["CategoryId"] = new SelectList(_db.Category.ToList(),"Id","CategoryName");           
            ViewData["SubCategoryId"] = new SelectList(_db.SubCategory.ToList(),"SubCategoryName");
            return View();
        }


        [HttpPost]
        public async Task<IActionResult> Create(Product product)
        {
            if (ModelState.IsValid)
            {
                
                _db.Product.Add(product);
                await _db.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(product);
        }

Create.cshtml


@model Amazon.Models.Product



@{
    ViewData["Title"] = "Create";
}

<br />



<h2 class="text-info">Add New Product</h2>

<form asp-action="Create" method="post" enctype="multipart/form-data">
    <div class="p-4 rounded border">
        <div asp-validation-summary="ModelOnly" class="text-danger">

        </div>

        <h3>@ViewBag.message</h3>

        <div class="form-group row">
            <div class="col-2">
                <label asp-for="Name"></label>
            </div>
            <div class="col-5">
                <input asp-for="Name" class="form-control" />
            </div>
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        <div class="form-group row">
            <div class="col-2">
                <label asp-for="CategoryTypeId"></label>
            </div>
            <div class="col-5">
                <select asp-for="CategoryTypeId" asp-items="ViewBag.CategoryId" class="form-control"></select>
                @*<input asp-for="ProductTypeId" class="form-control" />*@
            </div>
            <span asp-validation-for="CategoryTypeId" class="text-danger"></span>
        </div>
        <div class="form-group row">
            <div class="col-2">
                <label asp-for="SubCategoryTypeId"></label>
            </div>
            <div class="col-5">
                <select asp-for="SubCategoryTypeId" asp-items="ViewBag.SubCategoryId" class="form-control"></select>
                @*<input asp-for="SpecialTagId" class="form-control" />*@
            </div>
            <span asp-validation-for="SubCategoryTypeId" class="text-danger"></span>
        </div>


        <div class="form-group">
            <input type="submit" class="btn btn-primary" value="Save" />
            <a asp-action="Index" class="btn btn-success">Back To List</a>
        </div>
    </div>
</form>

@section Scripts{

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");

    }
}

在代码上方，我确实成功完成了产品控制器和view的数据绑定。但是，我尝试创建依赖于类别和子类别的列表框。但我不知道该怎么做。这是我的期望输出：

我是绝对的初学者。请帮助任何人。

解决方法

我试图创建与类别和子类别有关的列表框。

要在Category和Subcategory中实现级联下拉菜单，正如我在评论中提到的那样，您可以根据类别下拉列表change事件中先前选择的类别来填充SubCategory下拉列表，如下所示

您可以尝试修改模型类，并在Category和Subcategory实体之间实现一对多关系，以便可以将以下数据存储在数据库中，并检索基于以下内容的所有子类别在提供的CategoryId上。

页面加载时仅填充类别下拉列表

<div class="form-group">
    <div class="col-2">
        <label asp-for="CategoryTypeId" class="control-label"></label>
    </div>
    <div class="col-5">
        <select asp-for="CategoryTypeId" asp-items="ViewBag.CategoryId" class="form-control">
            <option value="">Select Category</option>
        </select>
    </div>
                
</div>
<div class="form-group">
    <div class="col-2">
        <label asp-for="SubCategoryTypeId" class="control-label"></label>
    </div>
    <div class="col-5">
        <select asp-for="SubCategoryTypeId"></select>
    </div>
</div>

在类别下拉change事件中动态填充SubCategory下拉

$(function () {
    $("select#CategoryTypeId").change(function () {
        var cid = $(this).val();
        
        $("select#SubCategoryTypeId").empty();

        $.getJSON(`/Home/GetSubCategory?cid=${cid}`,function (data) {
            //console.log(data);
            $.each(data,function (i,item) {
                $("select#SubCategoryTypeId").append(`<option value="${item.id}">${item.name}</option>`);
            });
        });
    })
});

操作方法GetSubCategory

public IActionResult GetSubCategory(int cid)
{
    var SubCategory_List=_db.SubCategory.Where(s => s.CategoryId == cid).Select(c => new { Id = c.Id,Name = c.SubCategoryName }).ToList();
    return Json(SubCategory_List);
}

测试结果

更新：

模型类

public class Category
{
    public int Id { get; set; }

    [Required]
    [Display(Name = "Category Name")]
    public string CategoryName { get; set; }

    public ICollection<SubCategory> SubCategories { get; set; }
}

public class SubCategory
{
    public int Id { get; set; }

    [Required]
    [Display(Name = "SubCategory Name")]
    public string SubCategoryName { get; set; }

    public int CategoryID { get; set; }

    public Category Category { get; set; }
}

asp.net-core asp.net-core-mvc c#c#