0

以下のコードを使用して、Asp.net MVC アクションで 2 つのドロップダウン リストを初期化します。

ViewData["first"]=List<SelectListItem>(){...};
ViewData["second"]=List<SelectListItem>(){...};

この 2 つを Asp.net MVC ビューに次のように表示します。

@Html.DropdownList(...,(List<SelectListItem>)ViewData["first"], ...);
@Html.DropdownList(...,(List<SelectListItem>)ViewData["second"], ...);

上記のコードは正常に動作し、私がやりたいことは次のとおりです。最初のドロップダウン リストの値を変更すると、2 番目のドロップダウン リストが動的に変更されます。この目標を達成するには ajax を使用する必要があると思いますが、それ以上のアイデアはありません。誰でも助けることができます、事前に感謝します!!!

4

1 に答える 1

2

最初のドロップダウンの変更イベントをリッスンし、選択された値を読み取り、2 番目のドロップダウンのコンテンツの JSON データを返すアクション メソッドに送信します。JSON を読み取り、2 番目のドロップダウンにロードします。

$(function(){
  $("#CountryDropdDown").change(function(e){
    var country=$(this).val();
    $.getJSON("@Url.Action("States","Home")?id="+country,function(data){
        var items="";
        $.each(data,function(index,item){
           items+="<option value='"+item.ID+"'>"+item.Name+"</option>";
        });            
        $("#States").html(items);
    });

  });
});

Homecontroller に States というアクション メソッドがあり、ID を受け取り、JSON を以下の形式で返すと仮定します。

[
    {  "ID": "1", "Name": "MI" },
    {  "ID": "2", "Name": "NY" }
]

編集： コメントの質問に従って

このような状態エンティティのクラスがあると仮定します。

public class StateVM
{
  public int ID { set;get;}
  public string Name { set;get;}
}

アクション メソッドで、StateVMクラスのリストを作成し、Jsonメソッドを使用して、そこからJSONデータを作成します。

public AtionResult States(int id)
{
  var stateList=GetStatesForCountry(id);
  return Json(stateList,JsonRequestBehavior.AllowGet);
}

private List<StateVM> GetStatesForCountry(id);
{
  List<StateVM> states=new List<StateVM>();
  //Hard coding the items for demo.
  // TO DO : Replace the below lines with code for reading
  // your database and filling the list

  states.Add(new StateVM { ID=1, Name="MI"});
  states.Add(new StateVM { ID=2, Name="NY"});    
  return states;
}
于 2013-08-30T17:42:49.273 に答える