制作级联下拉列表（ASP.NET MVC）

我有公司和职位空缺表。

公司有多个职位空缺。 我需要制作两个下拉列表。

其中一个是公司，当我选择它时，会有与该公司有关的职位空缺。

这是公司的模型

public Company() { this.Clients = new HashSet(); this.Vacancies = new HashSet(); } [Key] public int CompanyID { get; set; } public string CompanyName { get; set; } public string Id { get; set; } public virtual AspNetUser AspNetUser { get; set; } [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")] public virtual ICollection Clients { get; set; } [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")] public virtual ICollection Vacancies { get; set; } } 

这是职位空缺的模型

  public partial class Vacancy { [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")] public Vacancy() { this.Interviews = new HashSet(); } [Key] public int VacancyId { get; set; } public string VacancyName { get; set; } public Nullable CompanyID { get; set; } public virtual Company Company { get; set; } [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")] public virtual ICollection Interviews { get; set; } 

这是控制器，我需要这样做

  [HttpGet] public ActionResult WelcomeScreen() { // Формируем список команд для передачи в представление SelectList teams = new SelectList(db.Vacancy, "VacancyId", "VacancyName"); ViewBag.Teams = teams; return View(); } //Заносим инфу о вакансии в таблицу [HttpPost] public ActionResult WelcomeScreen(Interview interview) { db.Interview.Add(interview); db.SaveChanges(); //Int32 id = interview.Interview_Id; //TempData["id"] = id; return RedirectToAction("Index", "Questions", new { id = interview.Interview_Id }); } 

我如何制作Cascade Dropdown列表？

UPDATE

我尝试解决方案

这是我的控制器（问题控制器）

  [HttpGet] public ActionResult WelcomeScreen() { // Формируем список команд для передачи в представление //SelectList teams = new SelectList(db.Vacancy, "VacancyId", "VacancyName"); //ViewBag.Teams = teams; ViewBag.Companies = new SelectList(db.Companies, "CompanyID", "CompanyName"); return View(); } //Заносим инфу о вакансии в таблицу [HttpPost] public ActionResult WelcomeScreen(Interview interview) { db.Interview.Add(interview); db.SaveChanges(); //Int32 id = interview.Interview_Id; //TempData["id"] = id; return RedirectToAction("Index", "Questions", new { id = interview.Interview_Id }); } public ActionResult Vacancies(int companyId) { var items = db.Vacancy .Where(x => x.CompanyID == companyId) .Select(x => new SelectListItem { Value = x.VacancyId.ToString(), Text = x.VacancyName }) .ToList(); return Json(items, JsonRequestBehavior.AllowGet); } 

这是脚本

   $(function () { $("#Company").change(function (e) { var $vacancy = $("#vacancy"); var url = $vacancy.data("url") + '?companyId=' + $(this).val(); $.getJSON(url, function (items) { $.each(items, function (a, b) { $vacancy.append('' + b.Text + ''); }); }); }); });  

这是View

  
 
 @Html.DropDownList("Company", ViewBag.Companies as SelectList, new { @class = "greeting"}) @Html.ValidationMessageFor(model => model.VacancyId, "", new { @class = "text-danger" }) 
 
  
  

但AJAX不起作用。

Answer 1

级联下拉列表的想法是，当您加载页面时，您加载第一个SELECT元素的下拉内容。 第二个SELECT元素是空元素。 当用户从第一个下拉列表中选择一个选项时，将其发送到服务器，该服务器返回构建第二个下拉列表所需的内容。

因此，在页面的GET操作中，获取呈现第一个下拉列表所需的数据。

 public ActionResult Welcome() { ViewBag.Companies = new SelectList(db.Companies, "CompanyID", "CompanyName"); return View(); } 

现在在视图中，您可以使用DropDownList帮助器方法使用我们设置为ViewBag.Companies的数据呈现SELECT元素。 我们还将添加第二个下拉列表。

 @Html.DropDownList("Company", ViewBag.Companies as SelectList)  

现在我们将使用一些ajax代码（ 在此示例中使用jQuery ）来获取第二个下拉列表的内容。 为第一个下拉列表的change事件注册事件处理程序，获取所选值，对Vacancies操作方法进行ajax调用，该方法返回以JSON格式构建第二个下拉列表所需的数据。 使用此JSON数据在javascript中构建第二个下拉列表。

 $(function(){ $("#Company").change(function (e) { var $vacancy = $("#vacancy"); var url = $vacancy.data("url")+'?companyId='+$(this).val(); $.getJSON(url, function (items) { $.each(items, function (a, b) { $vacancy.append('' + b.Text + ''); }); }); }); }); 

现在最后一部分是实施空缺方法。

 public ActionResult Vacancies(int companyId) { var items = db.Vacancies .Where(x=>x.CompanyID==comapnyId) .Select(x => new SelectListItem { Value = x.VacancyId.ToString(), Text = x.VacancyName }) .ToList(); return Json(items, JsonRequestBehavior.AllowGet); } 

假设db是您的DbContext类对象。

实现级联下拉列表不需要Ajax。 您可以使用选定的companyId发布表单，并且操作方法可以返回相同的第二个下拉列表。 但人们通常使用ajax来提供良好的用户体验