Question

How do i display a set of checkboxes depending on the item that has been selected in a dropdownlist?

I got a dropdownlist that contains ‘states’. The user can add cities to a state. Doing this with 2 dropdownlists (one that contains all states, and the other one containing all possible cities) would take forever for the user to add them all.

So in this case a set of checkboxes of all cities would be a more user-friendly approach. But how do i do that? And how do I get everything posted back?

I simply don’t have any idea on how to do this, so i don’t have code to show either! 🙁

[EDIT]

Part of my controller:

public ActionResult Index()
{
   IEnumerable<SelectListItem> ddlStates= dataContext.States
                              .Select(c => new SelectListItem
                              {
                                  Value = c.StateID.ToString(),
                                  Text = c.Name
                              });

   ViewBag.States = ddlStates;

   return View();
}

The view:

@model dataContext.States

@{
    ViewBag.Title = "Details";
}

@Html.DropDownList("States")

This is as far as i came.

Answer 1

ok first of all rendering states (i assume that you have provided list of states with you’r view model):

<select id="stateList">
<option value="0">-------- select state ------ </option>
@foreach(var state in Model.States)
{
     <option value="@state.Id">
              @state.Name
     </option>
}
</select>

<div id="cityContainer">

</div> 

<input type="button" id="submitChanges"> 

for getting list of cities by handling Change event:

$("#stateList").change(function(){
      var id = $("option:selected",$(this)).attr("Id");
      $.ajax({
             url:'@Url.Action("getStateCities","YourController")'               
             data = {stateId = id},
             success:function(data){
                   $.each(cities, function () {
                            var $cityList = $("#cityContainer");
                            var $checkbox= $("<input type='checkbox'></input>").attr("value",this.Id).text(this.CityName);
                            if (this.isInState)
                             {
                                $checkbox.attr("checke","checked");  
                             }
                            $checkbox.appendTo($cityList);
                        });
             } 
      })
});

and you’r controller action can look something like this :

public JsonResult getStateCities(int stateId)
        {
            var data = _addressService.GetStateCities(Id).Select(c => new { c.CityName, c.Id  ,  isInState = isCityInEstate(cityId)});
            return new JsonResult { Data = data };
        }

implementing GetStateCities and isCityInEstate is up to you.now sending form data back to controller :

  $("#submitChanges").click(function(){
       var citiesToSubmit = [];
       $("input[type=checkbox]",$("#cityContainer")).each(function(){                
            var include = $(this).prop('checked'),              
                cityId = $(this).attr("Id"); 
            citiesToSubmit.push({CityId:cityId, Include : include});
       });
       $.ajax({
            url:'@Url.Action("SubmitCities","YourController")',
            data :{StateId = $("#estateList").attr("Id") , Cities : citiesToSubmit}
            success:function(){
                  alert('cities submitted');
            }
       });
  });

and finally the controller :

   public class SubmitedCityViewModel
   {
       public int StateId {get;set;}

       public List<CityViewModel> Cities {get;set;}
   }

   public class CityViewModel
   {
       public int cityId {get;set;}
       public bool Include {get;set;}    
   }



   public JsonResult SubmitCities(SubmitedCityViewModel model){
           foreach(var city in model.Cities)
           { 
               if (city.Inclue)
               {
                     //update db to include 
                     _addressService.AddCityToState(city.Id,model.StateId);
               }                  
               else
               { 
                   //update db to remove
                     _addressService.RemoveCityFromState(city.Id,model.StateId);
               }
           } 
   }