Question

我有公司和职位空缺表。

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

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

以下是公司的模型

 public Company()
    {
        this.Clients = new HashSet<Client>();
        this.Vacancies = new HashSet<Vacancy>();
    }

    [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<Client> Clients { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<Vacancy> Vacancies { get; set; }
}

这是职位空缺的模型

 public partial class Vacancy
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public Vacancy()
    {
        this.Interviews = new HashSet<Interview>();
    }

    [Key]
    public int VacancyId { get; set; }
    public string VacancyName { get; set; }
    public Nullable<int> CompanyID { get; set; }

    public virtual Company Company { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<Interview> 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列表？

更新

我尝试解决方案

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

 [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);
    }

这是脚本

 <script>
    $(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('<option value="' + b.Value + '">' + b.Text + '</option>');
                });
            });
        });
    });
</script>

这是View

 <div class="right-grid-in-grid">

                <div style="margin-left:20px;">
                    @Html.DropDownList("Company", ViewBag.Companies as SelectList, new { @class =  "greeting"})
                    @Html.ValidationMessageFor(model => model.VacancyId, "", new { @class = "text-danger" })
                </div>

                <div style="margin-left:20px;">
                    <select name="id" id="vacancy" data-url="@Url.Action("Vacancies","Questions")" class="greeting"/>
                </div>
                </div>

但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)
<select name="id" id="vacancy" data-url="@Url.Action("Vacancies","Home")">

现在我们将使用一些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('<option value="' + b.Value + '">' + b.Text + '</option>');
            });
        });
    });    
});

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

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发布表单，并且action方法可以返回相同的第二个下拉列表。但人们通常使用ajax来提供良好的用户体验

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

1 个答案: