根據下拉列表中選定的項目顯示覆選框

Question

根據在下拉列表中選擇的項目，我如何顯示一組複選框？

我收到了一個包含'狀態'的下拉列表。用戶可以將城市添加到某個州。使用2個下拉列表（一個包含所有狀態，另一個包含所有可能的城市）執行此操作將永久持續給用戶添加全部內容。

所以在這種情況下，所有城市的一組複選框將是一個更加用戶友好的方法。但我該怎麼做？我如何將所有內容都發回來？

我根本沒有任何想法如何做到這一點，所以我沒有代碼顯示！ :(

[編輯]我的控制器的

部分：

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

    ViewBag.States = ddlStates; 

    return View(); 
} 

的觀點：

@model dataContext.States 

@{ 
    ViewBag.Title = "Details"; 
} 

@Html.DropDownList("States") 

這是據我來到

Answer 1

確定首。所有渲染狀態（我假設你已經提供了你的視圖模型的狀態列表）：

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

通過處理更改事件讓城市的名單：

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

和找你控制器動作可以是這個樣子：

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

實施GetStateCities和isCityInEstate是由你。將表單數據發送回控制器：

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

終於控制器：

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