Asp.net core 如何在asp.net核心mvc中制作级联下拉菜单？

我以前试过，但没能成功

---

有人能举个例子告诉我吗？

在ASP.Net核心中应该没有什么特别之处，因为视图仍然是从基本的HTML和CSS构建的，您可以使用JS

我建议您遵循W3Schools提供的本教程中的主题：

如您所见，在本教程中，将此嵌套数组用作下拉数据：

var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"] 
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}

如果您的下拉列表数据是静态的，您可以直接将其放入JS代码中，但我建议在服务器端生成它，然后：

将其作为视图数据传递，将其序列化为json，并用文本json字符串替换JS代码中的数组初始化

从客户端向服务器（例如，使用XHR）向某种API端点发出第二个请求，并将下拉数据加载为json，然后对其进行反序列化，并将数据放入下拉数据数组中。（在这种情况下，不要忘记重新加载实际的下拉元素选项）

---

如果有不容易理解的地方，请随时询问澄清。

在ASP.Net Core中，这应该没有什么特别之处，因为视图仍然是基于基本HTML和CSS构建的，您可以使用JS

我建议您遵循W3Schools提供的本教程中的主题：

如您所见，在本教程中，将此嵌套数组用作下拉数据：

var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"] 
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}

如果您的下拉列表数据是静态的，您可以直接将其放入JS代码中，但我建议在服务器端生成它，然后：

将其作为视图数据传递，将其序列化为json，并用文本json字符串替换JS代码中的数组初始化

从客户端向服务器（例如，使用XHR）向某种API端点发出第二个请求，并将下拉数据加载为json，然后对其进行反序列化，并将数据放入下拉数据数组中。（在这种情况下，不要忘记重新加载实际的下拉元素选项）

---

如果有不容易理解的地方，请随时询问澄清。

您可以参考以下步骤在asp.net core MVC中创建级联下拉列表

使用以下内容创建模型：

在视图页面（CreateIndex.cshtml）中编写代码，在页面加载时只填充类别下拉列表，然后使用JQuery调用操作方法并填充子类别：

 public class HomeController : Controller
 { 
     private readonly ApplicationDbContext _context; //db context.
     private readonly IRepository _repository;
     public HomeController( ApplicationDbContext context, IRepository repository)
     { 
         _context = context; 
         _repository = repository;
     }

     public IActionResult CreateIndex() {

         //get the categories.
         ViewBag.CategoryId = _repository.GetCategories().Select(c => new SelectListItem { Value= c.Id.ToString(),Text = c.CategoryName }).ToList();

         return View();
     }
     //get Subcategory based on the category id
     public IActionResult GetSubCategory(int cid)
     {
         var SubCategory_List = _repository.GetCategories().Where(s => s.Id == cid).FirstOrDefault().SubCategories.Select(c => new { Id = c.Id, Name = c.SubCategoryName }).ToList();
         return Json(SubCategory_List);
     }
     [HttpPost]
     public IActionResult CreateIndex(ProductViewModel product)
     { 
         return View();
     }

 @model MVCDemo.Models.ProductViewModel

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

 <div class="row">
     <div class="col-md-4">
         <form asp-action="CreateIndex">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             <div class="form-group">
                 <label asp-for="Name" class="control-label"></label>
                 <input asp-for="Name" class="form-control" />
                 <span asp-validation-for="Name" class="text-danger"></span>
             </div>
             <div class="form-group"> 
                     <label asp-for="CategoryTypeId" class="control-label">Category Type</label> 
                     <select asp-for="CategoryTypeId" asp-items="ViewBag.CategoryId" class="form-control">
                         <option value="">Select Category</option>
                     </select>  
             </div>
             <div class="form-group"> 
                     <label asp-for="SubCategoryTypeId" class="control-label">SubCategory Type</label> 
                     <select asp-for="SubCategoryTypeId" class="form-control"></select> 
             </div>
             <div class="form-group">
                 <input type="submit" value="Create" class="btn btn-primary" />
             </div>
         </form>
     </div>
 </div>

 @section Scripts{ 
 <script>
     $(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>`);
                 });
             });
         })
     });
 </script>
 }

@model MVCDemo.Models.ProductViewModel
@{
ViewData[“Title”]=“CreateIndex”；
}
类别类型
选择类别
子类别类型
@节脚本{
$（函数（）{
$（“选择#CategoryTypeId”）.change（函数（）{
var cid=$（this.val（）；
$（“选择#子类别类型ID”）.empty（）；
$.getJSON（`/Home/GetSubCategory？cid=${cid}`，函数（数据）{
//控制台日志（数据）；
$。每个（数据、功能（i、项）{
$（“选择#子类别类型ID”）.append（`${item.name}`）；
});
});
})
});
}

屏幕截图如下：

---

您可以参考以下步骤在asp.net核心MVC中创建级联下拉列表

使用以下内容创建模型：

在视图页面（CreateIndex.cshtml）中编写代码，在页面加载时只填充类别下拉列表，然后使用JQuery调用操作方法并填充子类别：

 public class HomeController : Controller
 { 
     private readonly ApplicationDbContext _context; //db context.
     private readonly IRepository _repository;
     public HomeController( ApplicationDbContext context, IRepository repository)
     { 
         _context = context; 
         _repository = repository;
     }

     public IActionResult CreateIndex() {

         //get the categories.
         ViewBag.CategoryId = _repository.GetCategories().Select(c => new SelectListItem { Value= c.Id.ToString(),Text = c.CategoryName }).ToList();

         return View();
     }
     //get Subcategory based on the category id
     public IActionResult GetSubCategory(int cid)
     {
         var SubCategory_List = _repository.GetCategories().Where(s => s.Id == cid).FirstOrDefault().SubCategories.Select(c => new { Id = c.Id, Name = c.SubCategoryName }).ToList();
         return Json(SubCategory_List);
     }
     [HttpPost]
     public IActionResult CreateIndex(ProductViewModel product)
     { 
         return View();
     }

 @model MVCDemo.Models.ProductViewModel

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

 <div class="row">
     <div class="col-md-4">
         <form asp-action="CreateIndex">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             <div class="form-group">
                 <label asp-for="Name" class="control-label"></label>
                 <input asp-for="Name" class="form-control" />
                 <span asp-validation-for="Name" class="text-danger"></span>
             </div>
             <div class="form-group"> 
                     <label asp-for="CategoryTypeId" class="control-label">Category Type</label> 
                     <select asp-for="CategoryTypeId" asp-items="ViewBag.CategoryId" class="form-control">
                         <option value="">Select Category</option>
                     </select>  
             </div>
             <div class="form-group"> 
                     <label asp-for="SubCategoryTypeId" class="control-label">SubCategory Type</label> 
                     <select asp-for="SubCategoryTypeId" class="form-control"></select> 
             </div>
             <div class="form-group">
                 <input type="submit" value="Create" class="btn btn-primary" />
             </div>
         </form>
     </div>
 </div>

 @section Scripts{ 
 <script>
     $(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>`);
                 });
             });
         })
     });
 </script>
 }

@model MVCDemo.Models.ProductViewModel
@{
ViewData[“Title”]=“CreateIndex”；
}
类别类型
选择类别
子类别类型
@节脚本{
$（函数（）{
$（“选择#CategoryTypeId”）.change（函数（）{
var cid=$（this.val（）；
$（“选择#子类别类型ID”）.empty（）；
$.getJSON（`/Home/GetSubCategory？cid=${cid}`，函数（数据）{
//控制台日志（数据）；
$。每个（数据、功能（i、项）{
$（“选择#子类别类型ID”）.append（`${item.name}`）；
});
});
})
});
}

屏幕截图如下：

---

有很多教程和视频介绍如何一步一步地执行此操作，因此您可以像这样进行操作。您可以在更改父下拉列表值时使用jQuery Ajax调用。下面是一个关于类别和子类别下拉列表的示例-我也尝试过这种方法，但无法通过大量教程和视频了解如何一步一步地完成此操作，因此您可以像这样进行操作。您可以在更改父下拉列表值时使用jQuery Ajax调用。下面是一个关于类别和子类别下拉列表的示例-我也尝试过这种方法，但无法工作如何从数据库中获取数据？您的方法是正确的，但我尝试从我的数据库中获取数据，但它不起作用（使用EF）Hi@DishankPatil，从数据库中获取数据时是否遇到任何错误？根据您的描述，您使用的是EF，而不是EF core，对吗？使用EF core，在从数据库获取数据期间我没有任何错误，但在使用数据库获取数据时，我的子类别无法显示。您的方法是正确的，并且工作正常，但使用database i无法在选择first dropdownFirst后获取第二个下拉数据，您可以在GetSubCategory操作方法中设置断点，并检查是否可以