ASP.NETにて実装したDropDownListのSelectedIndexChangedイベントを発生させたい

###前提・実現したいこと
ASP.NETにて実装したDropDownListのSelectedIndexChangedイベントを発生させたい。
DropDownListはjavascriptで動的に作成しているためなのか、SelectedIndexChangedイベントが発生しません。

SelectedIndexChangedイベントを発生させることは可能でしょうか？

###該当のソースコード
↓コントロールの定義

asp.net
1<asp:DropDownList runat="server" ID="SelectList" CssClass="select-ui" AutoPostBack="true"></asp:DropDownList>

↓ドロップダウンリストは動的に作成

javasript
1          $("#SelectList").empty();
2          $.each(response.d, function (index, val) {
3            $("#SelectList").append(
4              "<option value='" + val.Code + "'>" + val.Name + "</option>"
5            );
6          });
7          $("#SelectList").selectmenu("refresh");

↓このイベントが発生しない。

vb.net
1    Private Sub SelectList_SelectedIndexChanged(sender As Object, e As EventArgs) Handles SelectList.SelectedIndexChanged
2        'ここにイベント発生時の処理を記述
3    End Sub

###試したこと
ドロップダウンリストを動的に作成しない場合はSelectedIndexChangedイベントは発生する。

###補足情報(言語/FW/ツール等のバージョンなど)
ドロップダウンは「jquery-ui-1.12.1.min.js」を使用

行動規範の内容に同意します

回答1件

ベストアンサー

SelectedIndexChangedイベントを発生させることは可能でしょうか？

サーバーコントロールではない、単なる html 要素では不可能です。

ASP.NET Web Forms アプリで、本来ステートレスな Web アプリが Windows Forms アプリのようにイベントドリブンになるのは、(1) サーバーコントロール、(2) ビューステート、(3) ポストバックの 3 つがあってこそです。

今回のケースでは (1) も (2) もないので何ともなりません。

DropDownList サーバーコントロールを使うか、それがダメならサーバー側でのイベントに頼らない全く別の手段を考えるほかないと思います。

****** 2017/5/5 17:40 追記 ******

2017/05/05 17:27 の私のコメントで「後で具体例を回答欄に書いておきます」と書きましたが、それを以下に追記します。

DB から取得するデータを DropDownList に表示するということで、SqlDataSource コントロールと併用します。DB は Microsoft の Northwind サンプルデータベースの Categories テーブルと Products テーブルを例に使い、1 つめの DropDownList にカテゴリーを表示し、その選択を変えると自動的に 2 つめの DropDownList に選んだカテゴリーに属する商品一覧を表示するようにしています。

Visual Studio のウィザードを利用して、イベントハンドラの中身以外は一切コードを書かずに実装しています。

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

    protected void ProductDripdown_SelectedIndexChanged(object sender, EventArgs e)
    {
        Label2.Text = "Selected Value: " + ((DropDownList)sender).SelectedValue;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" 
            runat="server" 
            ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" 
            SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
        </asp:SqlDataSource>

        <asp:DropDownList ID="categoryDropdown" 
            runat="server" 
            AutoPostBack="True" 
            DataSourceID="SqlDataSource1" 
            DataTextField="CategoryName" 
            DataValueField="CategoryID">
        </asp:DropDownList>

        <br />

        <asp:SqlDataSource ID="SqlDataSource2" 
            runat="server" 
            ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" 
            SelectCommand="SELECT [ProductID], [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
            <SelectParameters>
                <asp:ControlParameter ControlID="categoryDropdown" 
                    Name="CategoryID" 
                    PropertyName="SelectedValue" 
                    Type="Int32" />
            </SelectParameters>
        </asp:SqlDataSource>

        <asp:DropDownList ID="ProductDripdown" 
            runat="server" 
            AutoPostBack="True" 
            DataSourceID="SqlDataSource2" 
            DataTextField="ProductName" 
            DataValueField="ProductID" 
            OnSelectedIndexChanged="ProductDripdown_SelectedIndexChanged">
        </asp:DropDownList>

        <br />
        <asp:Label ID="Label2" runat="server"></asp:Label>
    </form>
</body>
</html>

見慣れないかもしれませんが、上記は Web サイトプロジェクトでコードは分離していません。

投稿2017/05/05 02:02

編集2017/05/05 08:43

退会済みユーザー

総合スコア0

yamakawa03

2017/05/05 02:17 編集

「DropDownList サーバーコントロール」とはサーバ側でリストを作成したドロップダウンコントロールのことでしょうか？jQueryでリストを作成した場合はサーバコントロールにならないとのことでしょうか？例えば以下のような場合がサーバーコントロールでしょうか？ ```vb Private Sub SetHogeList() Me.hogeList.Items.Clear() Me.hogeList.Items.Add(New ListItem("なまえ１", "S")) Me.hogeList.Items.Add(New ListItem("なまえ２", "J")) Me.hogeList.SelectedIndex = 0 End Sub ```

退会済みユーザー

2017/05/05 03:03 編集

すみません、見落としてました。DropDownList 本体はサーバーコントロールで、中身はサーバーコントロールの ListItem ではない（JavaScript で option タグを生成して追加）ということですね。 ListItem を含めて全てをサーバー側で生成するようにしてください。SelectedIndexChanged イベントが発生しないという問題以外に、以下の記事にあるように検証に引っかかってうまくいかないこともあります。 EnableEventValidation http://surferonwww.info/BlogEngine/post/2012/01/15/EnableEventValidation.aspx 質問者さんがコメントに書かれたようにして、サーバー側で動的に ListItem を生成して追加しても OK です。ただし、サーバー側で動的に生成する場合は、ポストバックの際にも動的に生成する必要がありますので注意してください。

yamakawa03

2017/05/05 05:23

度々すいません。 javascriptにて作成してたリストをサーバー側で作成するために以下のように実装してみました。 ※一部分のみ更新したかったのでUpdatePanelを使用しています。 <asp:DropDownList runat="server" ID="ListA" CssClass="select-ui" AutoPostBack="true"></asp:DropDownList> <asp:UpdatePanel runat="server" > <ContentTemplate> <asp:DropDownList runat="server" ID="ListB" CssClass="select-ui" AutoPostBack="true"></asp:DropDownList> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ListA" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> サーバー側 Private Sub ListA_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ListA.SelectedIndexChanged Dim val = Me.ListA.SelectedValue Dim lst = GetData(val) ' DBからデータ取得 Me.ListB.DataSource = lst Me.ListB.DataTextField = "Name" Me.ListB.DataValueField = "Code" Me.ListB.DataBind() End Sub Private Sub ListB_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ListB.SelectedIndexChanged 'ここで処理したい. End Sub ListAのSelectedIndexChangedイベントでListBのリストをサーバー側で作成できるようになったのですが、 ListBのリストを変更してもSelectedIndexChangedイベントが発生しないです。なにか根本的に実装方法が間違ってるのでしょうか？

yamakawa03

2017/05/05 05:34

すいません、追記です。イベントが発生しないのは、jQuery-UIのSelectmenuを使っているのが関係しているようでした。以下の処理をコメントアウトすると、ListBのSelectedIndexChangedイベントが発生しました。 $("#ListB").selectmenu();

退会済みユーザー

2017/05/05 05:39

前のスレッドで「サーバー側で動的に生成する場合は、ポストバックの際にも動的に生成する必要がありますので注意してください」と書きましたが、それはどうなってますか？もし、ListA の SelectedIndexChanged イベントで動的に ListB の ListItem を生成して追加したのであれば、ListB の AutoPostBack でポストバックした時は ListB の ListItem は生成されないと思うのですが。それはともかく、何をしたいのですかね？　ListA の選択結果で ListB に表示される項目を絞って表示（例えば、以下の記事の例のように　ListA で商品のカテゴリーを選択すると、選択されたカテゴリーに属する商品一覧を ListB に表示するとか）なら別の方法がありそうですが。 DetailsView 中の連動 DropDownList http://surferonwww.info/BlogEngine/post/2010/12/04/Dual-DropDownLists-in-DetailsView.aspx

退会済みユーザー

2017/05/05 05:43 編集

レスが前後してしまいました。2017/05/05 14:34 のコメントの意味は、ListB の option は依然としてクライアントスクリプトで作っているということですか？

yamakawa03

2017/05/05 06:03

> 前のスレッドで「サーバー側で動的に生成する場合は、ポストバックの際にも動的に生成する必要がありますので注意してください」と書きましたが、それはどうなってますか？こちらはUpdatePanelを使用してるので値は保持できていました。 > それはともかく、何をしたいのですかね？ ListAの選択結果でListBを作成し、さらにListBの選択によって別のコントロールListViewを作成したいと考えております。 > ListB の option は依然としてクライアントスクリプトで作っているということですか？サーバー側の処理(ListA_SelectedIndexChanged)で作成するように変更して試しています。

退会済みユーザー

2017/05/05 07:06

ということは解決（ListB の選択変更で SelectedIndexChanged イベントは発生するようになった）したのでしょうか？

yamakawa03

2017/05/05 07:56

はい、本題の件は解決いたしました。ありがとうございます。サーバー側でリストを作成すると、イベントが発生しました。

yamakawa03

2017/05/05 08:01 編集

動的に作成したDropDownListにjQuery-UIのSelectmenuを適用するとSelectedIndexChanged イベントが発生しないという問題は残りましたが、本題とは関係ないので、解決とさせて頂きます。

退会済みユーザー

2017/05/05 08:27

解決したとのことですので今さらながらですが・・・コードを拝見すると DB から取得するデータを DropDownList に表示するようですが、であれば SqlDataSource などのデーターソースコントロールと併用するのがよさそうです。後で具体例を回答欄に書いておきます。

退会済みユーザー

2017/05/06 01:06

これも今さらながらですが、気が付いたので一言・・・ > こちらはUpdatePanelを使用してるので値は保持できていました。 ListB の DropDownList 本体は静的にページに配置してあって、ListA の SelectedIndexChanged イベントで動的に生成するのは中身の ListItem だけの場合、ListItem を生成・追加後は ViewState に情報が維持され、ポストバックの際は ViewState から ListItem が再生成され ListB に追加されるようです。 UpdatePanel は ListItem の再生成・追加とは関係ないです。UpdatePanel を使わなくても同じ結果が得られるはずです。 ViewState に ListItem の情報が保持されるというのは、ListB の EnableViewSate を false にして試すと ListItem は再生成・追加されないことから分かると思います。

行動規範の内容に同意します