Mtk's Blog: [ASP.NET] 動的に追加したラベルやテキストボックスが消える現象の対策

How to keep the Panel controls in PostBack
ASP.NETでアプリ開発中に悩んだことがあったのでまとめてみました。

環境

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

動的にラベルやテキストボックスを追加する

ASP.NETのPanelコントロールはラベルやテキストボックスを動的に追加することが出来ます。
本来はHTMLのデザインは静的に定義しておいた方がメンテナンスしやすいのですが、動的に追加したいことがあると思います。

次のソースはボタンをクリックするとPanelに現在時刻のラベルを追加するサンプルですが期待通りの動作ではありません。

index.aspx.cs

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

namespace ControlsAddSample {
    public partial class index : System.Web.UI.Page {

        protected void Page_Load(object sender, EventArgs e) {
        }

        protected void Button1_Click(object sender, EventArgs e) {
            Label newLabel = new Label();
            newLabel.Text = DateTime.Now.ToString() + "<br /%gt;";
            Panel1.Controls.Add(newLabel);
        }
    }
}

index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="ControlsAddSample.index" %>
<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:Panel ID="Panel1" runat="server"></asp:Panel>
    </div>
    </form>
</body>
</html>

index.asp.designer.cs

namespace ControlsAddSample {
    public partial class index {
        protected global::System.Web.UI.HtmlControls.HtmlForm form1;
        protected global::System.Web.UI.WebControls.Panel Panel1;
        protected global::System.Web.UI.WebControls.Button Button1;
    }
}

実際に操作すると何度クリックしてもPanelには一つのラベルしか追加されません。
WindowsFormと違い、ASP.NETはボタンをクリックするとポストバックが処理され、Panelが初期化されてしうためです。
ソースは省略しますがUpdatePanelを使ったASP.NET Ajaxで作り替えてもWebアプリでも同様に一つのラベルしか追加されません。
ASP.NET Ajaxは画面遷移しませんがポストバックと同様のイベントが処理されるためです。

解決策

PanelにWebコントロールを追加する処理は、Page_LoadイベントでWebコントロールをすべて追加するようにしました。
クリックした時の時刻を文字列のリストに格納してリストの内容をPanelにすべて表示します。リストはSession変数に保存します。

修正したindex.aspx.cs

using System;
using System.Web.UI.WebControls;
using System.Collections.Generic;

namespace ControlsAddSample {
    public partial class index : System.Web.UI.Page {
        private List<string> DateArray;

        protected void Page_Load(object sender, EventArgs e) {
            DateArray = (List<string>)Session["DateArray"];
            if (DateArray == null) {
                DateArray = new List<string>();
            }
        }

        protected void Button1_Click(object sender, EventArgs e) {
            DateArray.Add(DateTime.Now.ToString());
            Session["DateArray"] = DateArray;

            foreach(var now in DateArray){
                Label newLabel = new Label();
                newLabel.Text = now + "<br />";
                Panel1.Controls.Add(newLabel);
            }
        }
    }
}

List<string>はシリアライズ可能なのでViewState変数に保存することも出来ます。

ViewState変数を使うように修正したindex.aspx.cs

using System;
using System.Web.UI.WebControls;
using System.Collections.Generic;

namespace ControlsAddSample {
    public partial class index : System.Web.UI.Page {
        private List<string> DateArray;

        protected void Page_Load(object sender, EventArgs e) {
            DateArray = (List<string>)ViewState["DateArray"];
            if (DateArray == null) {
                DateArray = new List<string>();
            }
        }

        protected void Button1_Click(object sender, EventArgs e) {
            DateArray.Add(DateTime.Now.ToString());
            ViewState["DateArray"] = DateArray;

            foreach(var now in DateArray){
                Label newLabel = new Label();
                newLabel.Text = now + "<br />";
                Panel1.Controls.Add(newLabel);
            }
        }
    }
}

MVCモデルでいうビューとコントローラーの分離が出来ないのが難点です。

Mtk's Blog

2015年5月30日土曜日

[ASP.NET] 動的に追加したラベルやテキストボックスが消える現象の対策

環境

動的にラベルやテキストボックスを追加する

解決策

関連ブログ

0 件のコメント:

コメントを投稿