如何將數據添加到下拉列表中？

Question

嗨，朋友我想開發一個註冊頁面詮釋該頁面的兩個字段 1.state 2.district（都是下拉列表）。 現在我的問題是如何動態獲取數據，即如果選擇狀態字段，它將顯示所有可用的狀態。 例如有三種狀態1.A 2.B 3.C 每個狀態包含4個區

state  district1 district1  district1 district1 
A   AAA1  AAA2   AAA3   AAA4  
B   BBB1  BBB2   BBB3   BBB4 
c   CCC1  CCC2   CCC3   CCC4 

如果我選擇狀態的它，只顯示說出一個地區

請跟我說清楚如何做到這一點在asp.net

Answer 1

與往常一樣通過定義視圖模型開始：

public class MyViewModel 
{ 
    [Required] 
    [DisplayName("Select a state:")] 
    public string SelectedState { get; set; } 
    public IEnumerable<SelectListItem> States { get; set; } 

    [Required] 
    [DisplayName("Select a district:")] 
    public string SelectedDistrict { get; set; } 
    public IEnumerable<SelectListItem> Districts { get; set; } 
} 

然後控制器：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new MyViewModel 
     { 
      // TODO: load the states initially 
      States = new[] { "A", "B", "C" }.Select(x => new SelectListItem 
      { 
       Value = x, 
       Text = x 
      }), 
      // Initially we don't have districts 
      Districts = Enumerable.Empty<SelectListItem>() 
     }; 
     return View(model); 
    } 

    public ActionResult Districts(string state) 
    { 
     // TODO: given a state select its districts 
     var districts = Enumerable 
      .Range(1, 4) 
      .Select(x => string.Format("district {0} of state {1}", x, state)); 
     return Json(districts, JsonRequestBehavior.AllowGet); 
    } 
} 

然後一個觀點：

@model MyViewModel 

<div> 
    @Html.LabelFor(x => x.SelectedState) 
    @Html.DropDownListFor(
     x => x.SelectedState, 
     Model.States, 
     "-- State --", 
     new { 
      id = "states", 
      data_url = Url.Action("districts") 
     } 
    ) 
</div> 

<div> 
    @Html.LabelFor(x => x.SelectedDistrict) 
    @Html.DropDownListFor(
     x => x.SelectedDistrict, 
     Model.Districts, 
     "-- District --", 
     new { id = "districts" } 
    ) 
</div> 

最後一些JavaScript級聯的States下拉：

$(function() { 
    $('#states').change(function() { 
     var url = $(this).data('url'); 
     var selectedState = $(this).val(); 
     $.get(url, { state: selectedState }, function (districts) { 
      var districtsDdl = $('#districts'); 
      districtsDdl.empty(); 
      $.each(districts, function (index, district) { 
       districtsDdl.append(
        $('<option/>', { 
         value: district, 
         text: district 
        }) 
       ); 
      }); 
     }); 
    }); 
});