Make Cascade Dropdown-Liste (ASP.NET MVC)

Question

Ich habe Unternehmen und Stellenangebote Tabellen.

Unternehmen hat n Anzahl der offenen Stellen. Ich muss zwei Dropdown-Listen erstellen.

In einem wird es Unternehmen sein, wenn ich es auswähle, wird es freie Stellen geben, die mit diesem Unternehmen verbunden sind.

Hier ist das Modell der Unternehmen

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

Hier ist das Modell für Stellenangebote

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

Hier Controller ist, wo ich brauche diese

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

zu tun, wie ich Cascade machen müssen Dropdown-Liste?

UPDATE

Ich versuche Lösung

Hier ist mein Controller (Fragen Controller)

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

Hier Skript

<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> 

Und hier View ist

<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> 

Aber AJAX funktioniert nicht.

Answer 1

Die Idee des Dropdown-Menüs kaskadieren lautet: Wenn Sie die Seite laden, laden Sie den Dropdown-Inhalt für das erste SELECT-Element. Das zweite SELECT-Element wird leer sein. Wenn der Benutzer eine Option aus dem ersten Dropdown-Menü auswählt, sendet er diese an den Server, der den Inhalt zurückgibt, der zum Erstellen des zweiten Dropdown-Menüs erforderlich ist.

Also in der GET-Aktion Ihrer Seite, erhalten Sie die Daten zum Rendern der ersten Dropdown-Liste.

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

nun in der Ansicht können Sie die Dropdownlist-Helfer-Methode verwenden, um das SELECT-Element mit den Daten machen wir auf die ViewBag.Companies gesetzt. Wir werden auch unser zweites Dropdown-Menü hinzufügen.

@Html.DropDownList("Company", ViewBag.Companies as SelectList) 
<select name="id" id="vacancy" data-url="@Url.Action("Vacancies","Home")"> 

Jetzt werden wir einig Ajax-Code (mit jQuery in diesem Beispiel), um den Inhalt für die zweite Dropdown-Liste zu erhalten. Registrieren Sie einen Event-Handler für das Ereignis 10 des ersten Dropdown-Menüs, rufen Sie den ausgewählten Wert ab, führen Sie einen Ajax-Aufruf für die Aktion Vacancies aus, die die zum Erstellen des zweiten Dropdown-Menüs im JSON-Format erforderlichen Daten zurückgibt. Verwenden Sie diese JSON-Daten, um das zweite Dropdown in JavaScript zu erstellen.

$(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>'); 
      }); 
     }); 
    });  
}); 

Jetzt ist der letzte Teil, die Leerstandsmethode implementierend.

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 Unter der Annahme, ist Ihr DbContext Klassenobjekt.

Ajax ist für die Implementierung kaskadierter Dropdown-Menüs nicht erforderlich. Sie können das Formular mit der ausgewählten Firmen-ID posten, und die Aktionsmethode kann dasselbe mit dem zweiten Dropdown-Feld zurückgeben. Aber die Menschen in der Regel Ajax verwenden, um einen netten User Experience