Mtk's Blog: [ASP.NET] 動的に追加したイベントが動作しない

2015年6月6日土曜日

[ASP.NET] 動的に追加したイベントが動作しない

How to keep additional events after PostBack
ASP.NETでユーザーの操作によって画面にボタンを追加するアプリを作ったときに悩んだ内容をまとめました。
ボタンをクリックしたら新しいボタンを画面に追加するアプリを作ったのですが、新しいボタンのイベントが実行されません。

環境

・Windows8.1
・Visual Studio Community 2013
・C#

イベントが動作しない例

1. Button1をクリックすると新しいボタンを追加する
2. 新しいボタンをクリックするとラベルの文字を変化させる
というWebアプリを作ろうとして失敗した例です。

DynamicControls.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicControls.aspx.cs" Inherits="CoreTweetApp.DynamicControls" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DynamicControls.aspx</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

DynamicControls.aspx.cs

using System;
using System.Web.UI.WebControls;

namespace CoreTweetApp {
    public partial class DynamicControls : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            Button1.Click += new EventHandler(Button1_Click);

        }

        private void Button1_Click(object sender, EventArgs e) {
            Button newButton = new Button();
            newButton.Text = "New Button";
            newButton.Click += new EventHandler(NewButton_Click);
            form1.Controls.Add(newButton);
        }

        private void NewButton_Click(object sender, EventArgs e) {
            Label1.Text = "new Button がクリックされました";
        }

    }
}

DynamicControls.aspx.designer.cs

//コメントは省略
namespace CoreTweetApp {
    public partial class DynamicTextBox {
        protected global::System.Web.UI.HtmlControls.HtmlForm Form1;
        protected global::System.Web.UI.WebControls.Button Button1;
        protected global::System.Web.UI.WebControls.Label Label4;
        protected global::System.Web.UI.WebControls.Label Label3;
        protected global::System.Web.UI.WebControls.Label Label2;
        protected global::System.Web.UI.WebControls.Label Label1;
    }
}

実行するとこうなります。

Button1をクリックすると新しいボタンが追加されるまではいいのですが

新しいボタンをクリックしても期待通りに動作しません。

修正後

[HOWTO] Visual C# .NET を使用して ASP.NET で動的にコントロールを作成する方法
http://support.microsoft.com/kb/317794/ja
によると
OnInit イベントハンドラまたは Page_Load イベントハンドラで、作成したコントロールをコントロールコレクションに追加する必要があります。
とのことです。

上のソースで期待通りに操作しなかった原因は、動的に追加するボタンをOnInitイベントやPage_Loadイベントで追加しなかったためです。

新しいボタンを追加する処理をPage_Loadイベントで発生させるように修正します。
ただし、ASP.NETはイベントごとにポストバックが発生し、OnInitイベントやPage_Loadイベントが処理されます。
Button1をクリックしたときだけPage_Loadで新しいボタンを追加するように工夫します。

ボタンのUseSubmitBehaviorプロパティをFalseに設定すると、ポストバックした際Page_LoadイベントのRequest["__EVENTTARGET"]にボスとバックさせたボタンのIDが設定されます。

というわけで
・ボタンの追加をPage_Loadイベントで処理
・ボタンのUseSubmitBehaviorをFalseに設定
に修正したのが次のソースです。

using System;
using System.Web.UI.WebControls;

namespace CoreTweetApp {
    public partial class DynamicControls : System.Web.UI.Page {
        private const string NEW_BUTTON_ID = "NewButton";

        protected void Page_Load(object sender, EventArgs e) {
            //ポストバックを発生さたのは
            //Button1または新しいボタンか？
            if ((string)Request["__EVENTTARGET"] == Button1.ID
            || (string)Request["__EVENTTARGET"] == NEW_BUTTON_ID) {
                Button newButton = new Button();
                newButton.Text = "New Button";
                newButton.Click += new EventHandler(NewButton_Click);
                newButton.ID = NEW_BUTTON_ID;        //追加
                newButton.UseSubmitBehavior = false; //追加
                form1.Controls.Add(newButton);
            }

            Button1.UseSubmitBehavior = false;      //追加
            //Button1.Click += new EventHandler(Button1_Click);   //削除

        }

        //新しいボタンを追加する処理はPage_Loadに移動
        //private void Button1_Click(object sender, EventArgs e) {
        //}

        private void NewButton_Click(object sender, EventArgs e) {
            Label1.Text = "new Button がクリックされました";
        }

    }
}

これで期待通りに動作しました。

まとめ

動的に追加したイベントはポストバック後のPage_Loadより後に発生します。
動的にコントロールを追加する場合はポストバックの前と後に画面に配置するように工夫すればすればいいと思います。

※ボタンを配置して生成されるHTMLタグはUseSubmitBehaviorプロパティが
Trueの場合は<input type="submit">
Falseの場合は<input type="button"> とonclickイベントのJavaScript
に変わります。プロパティ名通り振る舞いが変わるのでリファクタリングするときは要注意です。

Mtk's Blog

新アプリケーション

2015年6月6日土曜日

[ASP.NET] 動的に追加したイベントが動作しない

環境

イベントが動作しない例

修正後

まとめ

関連ブログ

0 件のコメント:

コメントを投稿