DropDownList値を選択した後にリストを表示するRazor

Question

私はJQueryを使用して解決する方法を知っていますが、サーバーサイドコードを使用して解決する必要があります。Razor View 事は次のとおりです。

私は他のDropDownListコントロールを使用して選択し、私は、国に属するいくつかの都市を表示したいDropDownListから国のいずれかをクリックしたかつて米国からいくつかの状態を示す、とされて@Html.DropDownlistを持って、私はないんだけど選択したフィールドの値をRazor syntaxを使って取得する方法と、1つの州が選択されているときに、他のDropDownListの州に属する都市を表示するには、SelectListを使用しており、バインドするには​​都市...私は働いているDropDownListの中のすべての国を示しています。私のカミソリビュー

public States(int id, string name, List<string> list) 
     { 
      StateID = id; 
      Name = name; 
      Cities = list; 
     } 
     public int StateID { get; set; } 
     public string Name { get; set; } 
     public List<string> Cities { get; set; } 
    } 


    public static class Fill 
    { 
     public static List<States> GiveMeStates() 
     { 
      List<States> li = new List<States>() { 
      new States(1, "Alabama",new List<string> {"Adamsville", "Addison", "Anderson","Anniston", "Arab" }), 
      new States(2,"Alaska", new List<string> {"Anchorage","Juneau","Fairbanks","Sitka"}), 
      new States(3,"Arizona", new List<string> { "Avondale", "Benson", "Besbee"}) 
      }; 
      return li; 
     } 
    } 

そして今、これは次のとおりです：これらは、私はいくつかのプロパティを持つSelectListのを埋めるために使用しているだけで2つのクラスがある

： ここに私のコードです

@using RazorMVC.Models; 

@{ 
    List<States> aux = Fill.GiveMeStates(); 
    SelectList states = new SelectList(aux, "StateID", "Name"); 
} 
<form> 
    @Html.DropDownList("ddlStates", states); 

</form> 

Answer 1

javascript/jQueryを使用したくない場合は、フォームを（選択した状態IDで）送信し、投稿された状態IDに基づいて状態を取得して表示することができます。

選択した州の都市を同じビューに表示すると仮定します。

@{ 

    var stateId = Request.QueryString["ddlStates"] as string; 
    List<States> aux = Fill.GiveMeStates(); 
    SelectList states = new SelectList(aux, "StateID", "Name"); 
    List<SelectListItem> cities = new List<SelectListItem>(); 
    if (!String.IsNullOrEmpty(stateId)) 
    {  
    var state = aux.FirstOrDefault(f => f.StateID == Convert.ToInt32(stateId)); 
    if (state != null) 
    { 
     cities = state.Cities 
         .Select(x => new SelectListItem {Value = x, Text = x}).ToList(); 
    } 
    } 
} 
<label>Select a state and hit submit </label> 
@using (Html.BeginForm("Index", "Home", FormMethod.Get)) 
{ 
    @Html.DropDownList("ddlStates", states) 
    <label>Cities < /label> 
    @Html.DropDownList("City", cities) 
    <input type="submit" /> 
} 

私は個人的にかみそりビューでC＃コードの多くを入れないことを好みます。私は通常、ビューモデルを作成し、それを使用してビューに必要な値を渡します。したがって、ビュー内に表示されている上記コードのほとんどは私のアクションメソッドに入ります。

jQuery/javascript（なぜそうではありませんか？）を使用したい場合は、最初のドロップダウンの変更イベントを聞き取り、選択したオプション値を取得して、それをajax呼び出しでサーバーに送信します。あなたのサーバーアクションメソッドがjson形式の状態を返し、あなたのajax metodのコールバックがjsonデータを解析して都市のドロップダウンを更新できるようにします。 sampleから始まる