[英]creating category and subcategory dependent list box using asp.net core 2.2
I am trying a create a page where I have a form to create the product.我正在尝试创建一个页面,我有一个表单来创建产品。 here I trying to creating category and subcategory dependent list box.but not understand how I will do that.
在这里,我尝试创建依赖于类别和子类别的列表框。但不明白我将如何做到这一点。 Here is my code:
这是我的代码:
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; }
}
Product Controller产品 Controller
[HttpGet]
public IActionResult Create()
{
ViewData["CategoryId"] = new SelectList(_db.Category.ToList(), "Id", "CategoryName");
ViewData["SubCategoryId"] = new SelectList(_db.SubCategory.ToList(), "Id", "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创建.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");
}
}
above code, I did successfully data-bind of my product controller and view.but I trying to creating category and subcategory dependent list box.but not understand how I will do that.上面的代码,我成功地对我的产品 controller 和视图进行了数据绑定。但我试图创建依赖于类别和子类别的列表框。但不明白我将如何做到这一点。 here my expectation output:
这是我的期望output:
I am an absolute beginner.我是一个绝对的初学者。 please help anyone.
请帮助任何人。
I trying to creating category and subcategory dependent list box.
我试图创建类别和子类别依赖列表框。
To implement cascading dropdown for Category
and Subcategory
, as I mentioned in comment, you can populate SubCategory dropdown based on the previous selection of Category in Category dropdown change
event, like below.要实现
Category
和Subcategory
的级联下拉列表,正如我在评论中提到的,您可以根据先前在 Category 下拉change
事件中选择 Category 来填充 SubCategory 下拉列表,如下所示。
You can try to modify your model class and implement one-to-many relationship between Category
and Subcategory
entities, so that you can store data like below in database and retrieve all sub-categories based on the provided CategoryId.您可以尝试修改您的 model class 并在
Category
和Subcategory
实体之间实现一对多的关系,以便您可以在数据库中存储如下数据并根据提供的 CategoryId 检索所有子类别。
Populate only Category dropdown when page loads页面加载时仅填充类别下拉列表
<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>
Dynamically populate SubCategory dropdown in Category dropdown change
event在类别下拉
change
事件中动态填充子类别下拉列表
$(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>`);
});
});
})
});
Action method GetSubCategory
动作方法
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);
}
Test Result测试结果
Update:更新:
Model classes Model 类
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; }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.