連携dropdownlistをAjaxで行う

dropdownlistが1つ選ばれたら、もう1つのdropdownlistの中身をDBに接続にいって変更したい。という要求があったのでUpdatePanelを使ってみました。

1. dropdownlistを2つ用意（ddl1とddl2）
2. ddl1にセットする用のbtnSetも用意
3. Codebehindに対応するイベント(btnSetのClickとddl1のSelectedIndexChanged）を書く。それぞれDBに接続に行って値を取得する
4. ここで1回通常通り動くかを確認。ddlのイベントでポストバックを走らせたいのでddl1のAutoPostBackはtrueに設定しておく。
5. ddl2の表示をポストバックなしに行いたいので、Ajax化する
   1. UpdatePanelを用意
   2. Triggerを作ってddl1のSelectedIndexChangedを設定

以上！DBにいちいちアクセスに行くのかとか、jqueryは使わないのかとかそういうことはちょっと脇に置いておいて。

codebehindサイド

    /// 

    /// ddlに値をセット
    /// 
    protected void btnSet_Click(object sender, EventArgs e)
    {
        DataTable dt = GetDdl1Data();　//ここでDB接続いって取得
        ddl1.DataSource = dt;
        ddl1.DataBind();
    }

    /// 

    /// ddl変更時
    /// 
    /// 
    /// 
    protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
    {
        string code = ddl1.SelectedValue;
        DataTable dt = GetDdl1Data(code);　//ここでDB接続いって取得
        ddl2.DataSource = dt;
        ddl2.DataBind();
    }

.aspxサイド