以前のリスト（mvc3）に基づいてドロップダウンリストを作成する

Question

私は2つのドロップダウンリストを持っています。最初のものを選択し、2番目のddlをトリガーし、dbから特定のデータを表示します。たとえば、最初にddl1が（states）を含み、ddl2がその都市を動的に表示します。

コントローラは状態をロードします。

ViewBag.ddlStates= new SelectList(db.State, "StateCode", "Title"); 
    return View(); 

ビュー：私は、AJAXを使用して... DDL状態値が変更されたときに、データベースを呼び出し、動的にその都市を取得するトリガーだろうか

@Html.DropDownList("ddlStates") 
    @Html.DropDownList("ddlCities", String.Empty) 

ddl/partialViewをリロードするには？

コントローラのddlState select呼び出しアクション（PartialViewResult）で、都市リストを動的に生成してビューに送り返すことは可能ですか？

Thx！

Answer 1

あなたはjQueryを使って最初のドロップダウンの変化（）イベントを使用することができます。

$('#ddlStates').on('change', function() { 

    $.ajax({ 
     type: "POST", 
     url: 'Controller/GetCities', 
     data: $(this).val(), 
     success: function(response) { 
      $('#ddlCities').html(response); 
     } 
    }); 

}); 

「コントローラ/ GetCitiesは」市<option>のあなたの新しいリストを持つ部分のビューを返しアクションへのルートになります投稿された選択されたvalに基づいています。

あなたはに投稿されたアクションは、次のようなものになります。私は私のサイトのいずれかに似た何かを持っている

@model System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem> 
@{ Layout = null; } 

@foreach (var city in Model) 
{ 
    <option value="@city.Value">@city.Text</option> 
} 

Answer 2

：このようなビューの何かを

  [HttpPost] 
    public ActionResult GetCities(GetCitiesViewModel model) 
    { 
     var selectedState = model.ddlStates; 
     IEnumerable<CityViewModel> cities = GetCitiesInState(selectedState); 
     IEnumerable<SelectListItem> filteredItems = 
      cities.Select(c => new SelectListItem {Text = c.Name, Value = c.CityId.ToString()}); 

     return PartialView("CityList", filteredItems); 
    } 

    private IEnumerable<CityViewModel> GetCitiesInState(int stateId) 
    { 
     // Just returning a list regardless of state ID. But you would look the cities up by state here. 
     return new List<CityViewModel> 
      { 
       new CityViewModel {CityId = 1, Name = "London"}, 
       new CityViewModel {CityId = 2, Name = "Birmingham"}, 
      }; 
    } 

    public class CityViewModel 
    { 
     public int CityId { get; set; } 

     public string Name { get; set; } 
    } 

    public class GetCitiesViewModel 
    { 
     public int ddlStates { get; set; } 
    } 

を。私は都市をJsonとして返すコントローラーアクションを使用します。私が使用しているjQueryは、州のために選択された値がないとき、都市のドロップダウンをクリアして無効にします。ここで

はここに私のマークアップ

@Html.LabelFor(model => model.StateCode) 
@Html.DropDownList("StateCode", string.Empty) 
@Html.LabelFor(model => model.CityID) 
@Html.DropDownList("CityID", string.Empty) 

であるjQueryのです

$("select#StateCode").bind('change', function() { 
    var StateCode = $("select#StateCode option:selected").val(); 
    if (StateCode == "" || StateCode == 0) 
    { 
     $("select#CityID").empty(); 
     $("select#CityID").attr('disabled', 'disabled'); 
    } 
    else 
    { 
     $.getJSON('@Url.Action("GetCityiesForState")', { StateCode: StateCode }, function (data) { 
      $("select#CityID").empty(); 
      $.each(data, function (i, c) { 
       $('select#CityID').append('<option value="' + c.Value + '">' + c.Text + '</option>'); 
      }); 
      $("select#CityID").removeAttr('disabled'); 
      $("select#CityID option:first").attr('selected', 'selected'); 
     }); 
    } 
}); 

コントローラーアクション

public JsonResult GetCityiesForState(string stateCode) { 
    var cities = repository.getCities(stateCode); 
    return Json(cities, JsonRequestBehavior.AllowGet); 
}