AJAX/jQuery Populated Cascading Dropdowns mit MVC 5

Question

Ich versuche, einen kaskadierenden Dropdown-Filter für eine seitenweise Tabelle in meiner MVC Razer Ansicht zu erstellen. Ich würde gerne die Cascading-Arbeit in einer nahtlosen Weise für den Benutzer arbeiten, also versuche ich, das zweite Dropdown-Menü über AJAX und jQuery zu füllen.

Hier wird Aktion mein Controller verwendet, um die Tabelle zu füllen

public ActionResult Index(int? page, string sortOrder, string partyToken, Guid? groupId, string threadTitle) 
{ 
    var parties = db.T_Party.Select(p => new { p.PartyToken, p.PartyName }); 
    var groups = db.T_Group.Where(g => string.IsNullOrEmpty(partyToken) || 
             g.T_Party.Contains(db.T_Party.Where(p => p.PartyToken == partyToken).FirstOrDefault())) 
          .Select(g => new { g.GroupId, g.GroupText }); 

    ViewBag.Parties = new SelectList(parties.AsEnumerable(), "PartyToken", "PartyName",partyToken); 
    ViewBag.Groups = new SelectList(groups.AsEnumerable(), "GroupId", "GroupText", groupId); 
    ViewBag.ThreadTitleSortParam = "ThreadTitle"; 
    ViewBag.ImportanceSortParam = "Importance"; 
    ViewBag.ExternalTokenSortParam = "ExternalToken"; 
    ViewBag.GroupNameSortParam = "GroupName"; 
    ViewBag.PartyNameSortParam = "PartyName"; 

    var t_Thread = db.T_Thread.Include(t => t.T_Group).Include(t => t.T_Party).Include(t => t.T_User); 

    if (!string.IsNullOrEmpty(partyToken)) 
    { 
     t_Thread = t_Thread.Where(t => t.PartyToken == partyToken); 
    } 

    if (!string.IsNullOrEmpty(threadTitle)) 
    { 
     t_Thread = t_Thread.Where(t => t.ThreadText.Contains(threadTitle)); 
    } 

    switch (sortOrder) 
    { 
     case ("ThreadTitle_desc"): 
      t_Thread = t_Thread.OrderByDescending(t => t.ThreadText); 

      break; 
     case ("Importance"): 
      t_Thread = t_Thread.OrderBy(t => t.ThreadImportance); 
      ViewBag.ImportanceSortParam = "Importance_desc"; 

      break; 
     case ("Importance_desc"): 
      t_Thread = t_Thread.OrderByDescending(t => t.ThreadImportance); 

      break; 
     case ("ExternalToken"): 
      t_Thread = t_Thread.OrderBy(t => t.ExternalToken); 
      ViewBag.ExternalTokenSortParam = "ExternalToken_desc"; 

      break; 
     case ("ExternalToken_desc"): 
      t_Thread = t_Thread.OrderByDescending(t => t.ExternalToken); 

      break; 
     case ("GroupName"): 
      t_Thread = t_Thread.OrderBy(t => t.T_Group.GroupText); 
      ViewBag.GroupNameSortParam = "GroupName_desc"; 

      break; 
     case ("GroupName_desc"): 
      t_Thread = t_Thread.OrderByDescending(t => t.T_Group.GroupText); 

      break; 
     case ("PartyName"): 
      t_Thread = t_Thread.OrderBy(t => t.T_Group.T_Party.FirstOrDefault().PartyName); 
      ViewBag.PartyNameSortParam = "PartyName_desc"; 

      break; 
     case ("PartyName_desc"): 
      t_Thread = t_Thread.OrderByDescending(t => t.T_Group.T_Party.FirstOrDefault().PartyName); 

      break; 
     default: 
      t_Thread = t_Thread.OrderBy(t => t.ThreadText); 
      ViewBag.ThreadTitleSortParam = "ThreadTitle_desc"; 

      break; 
    } 

    int pageToRender = page ?? 1; 

    return View(t_Thread.ToPagedList(pageToRender, 20)); 
} 

Hier ist die Aktion Ich verwende die Daten für das Drop-Down zu erhalten:

public ActionResult IndexByPartyToken(string id) 
{ 
    var t_Group = db.T_Group.Where(g => string.IsNullOrEmpty(id) || 
             g.T_Party.Contains(db.T_Party.Where(p => p.PartyToken == id).FirstOrDefault())) 
          .Select(g => new { ID = g.GroupId, GroupText = g.GroupText }); 

    return Json(t_Group, JsonRequestBehavior.AllowGet); 
} 

Hier ist meine Razer Ansicht

Mein Problem, dass ich Daten zurück vom AJAX-Anruf bekomme, aber es wird nicht in die d platziert Ropdown. Weiß jemand, warum das der Fall ist?

Answer 1

Gemäß dem ersten Kommentar, Mein Selektor war falsch für mein Dropdown.

Es sollte

gewesen

var ddlGroupSearch = $("#ddlGroupSearch"); 

statt

var ddlGroupSearch = $("ddlGroupSearch"); 

Answer 2

Ich nehme an, das Problem in Ihrem ist:

success: function (data) { 

Dies ist eine JavaScript-Funktion und und wählt Option zur Liste hinzufügen können Sie tun:

 var ddlGroupSearch = $("#ddlGroupSearch"); 
     ddlGroupSearch.empty(); 

     ddlGroupSearch.append($('<option>', {text: 'All', value: ''})); 

     //$.each(data, function (id, option) { 
      //ddlGroupSearch.append(new Option(option.GroupText, option.ID)); 
      ddlGroupSearch.append($('<option>', {text: 'option.GroupText', value: 'option.ID'})); 
     //}); 

     ddlGroupSearch.trigger("chosen:updated");