on select change event - Html.DropDownListFor

Question

I have two dropdownlist. The selected value from the first one loads the other. How do I do that when I have the helper methods in a controller?

@using (Html.BeginForm()) { <div>     <table width="100%" cellpadding="0" cellspacing="0">         <tr>             <td><b>Select a District:</b></td>             <td>@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable<SelectListItem>, "Select One")</td>         </tr>         <tr>             <td><b>Select a TM:</b></td>             <td>@Html.DropDownListFor(m => m.TMId, ViewData["TMManagers"] as IEnumerable<SelectListItem>, "Select One")</td>         </tr>     </table> </div> }  private void LoadDistrictManagers() {     var _DMS = (from c in SessionHandler.CurrentContext.ChannelGroups                 join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId                 where cgt.Name == "District Manager"                 select new { c.ChannelGroupId, c.Name }).OrderBy(m => m.Name);     ViewData["DMManagers"] = new SelectList(_DMS, "ChannelGroupId", "Name"); }  private void LoadTerritoryManagers(int districtId) {     var _TMS = (from c in SessionHandler.CurrentContext.ChannelGroups                 join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId                 where cgt.Name == "Territory" && c.ParentChannelGroupId == districtId                 select new { c.ChannelGroupId, c.Name }).OrderBy(m => m.Name);     ViewData["TMManagers"] = new SelectList(_TMS, "ChannelGroupId", "Name"); }  public ActionResult SummaryReport() {     DistrictManagerModel model = new DistrictManagerModel();     LoadDistrictManagers();     return View("AreaManager", model); } 

Answer 1

Give both dropdowns unique IDs using the HTTPAttributes field:

@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable<SelectListItem>, "Select One", new {@id="ddlDMManagers"}) 

2nd dropdown should be initialized as an empty list:

@Html.DropDownListFor(m => m.TMId, Enumerable.Empty<SelectListItem>(), new {@id="ddlTMManagers"}) 

If you don't mind using jQuery ajax to update the 2nd dropdown when a 'change' event is triggered on the 1st dropdown:

$(function() {     $('select#ddlDMManagers').change(function() {         var districtId = $(this).val();           $.ajax({             url: 'LoadTerritoryManagers',             type: 'POST',             data: JSON.stringify({ districtId: districtId }),             dataType: 'json',             contentType: 'application/json',             success: function (data) {                 $.each(data, function (key, TMManagers) {                     $('select#ddlTMManagers').append('<option value="0">Select One</option>');                     // loop through the TM Managers and fill the dropdown                     $.each(TMManagers, function(index, manager) {                         $('select#ddlTMManagers').append(                             '<option value="' + manager.Id + '">'                             + manager.Name +                              '</option>');                     });                 });             }         });     }); }); 

Add this class to your controller namespace:

public class TMManager {     public int Id {get; set;}     public string Name {get; set;} } 

You will need to update your controller action, LoadTerritoryManagers(), to respond to the ajax request and return a JSON array of {Id,Name} objects.

    [HttpPost]     public ActionResult LoadTerritoryManagers(int districtId)     {         var _TMS = (from c in SessionHandler.CurrentContext.ChannelGroups                 join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId                 where cgt.Name == "Territory" && c.ParentChannelGroupId == districtId                 select new TMManager(){ Id = c.ChannelGroupId, Name = c.Name }).OrderBy(m => m.Name);          if (_TMS == null)             return Json(null);          List<TMManager> managers = (List<TMManager>)_TMS.ToList();         return Json(managers);     }