根据下拉列表中的选定项目显示复选框

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

通过处理 Change 事件获取城市列表：

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