ASP.NETの「PlaceHolder」を利用して、1つのWeb画面でパネルを切り替える

現在、「DevExpress社のASP.NET」と「OpenLayers」を利用して、WebGISを開発中でして、ブラウザのみで動くデスクトップ風GISを目指しております。

ただし、デスクトップ風GISの場合、画面遷移させずに、1つのWeb画面で各機能パネルを切り替えなければなりません。この切り替え処理で、苦労したので、備忘録として残しておきます。

以下、開発中の画面です。「DvExpress社のWinForms」風のスタイルにするため、cssを工夫して、それっぽいの見た目にしました。最近はcssだけで、グラデーション画像など、かなりデスクトップに近いスタイルが再現できるようになりましたね。
ただ、cssのファイルが複雑になってしましましたが…

今回は、コンテンツのマップをクリックした際に、メインパネルに地図を表示し、利用者をクリックした際に、利用者一覧を表示に切り替える処理を作成します。
切り替えの際、画面全体ではなく、メインパネルのみを切り替えるため、UpdatePanelを使用しています。また、UpdatePanel内のボタンは、コンテンツ内のノードをクリックした際に、
疑似的にザーバーにイベントを飛ばすために登録しています。ノードをクリックした際にサーバー側のButton3_Clickが呼ばれるようになっています。

各画面のファイルは以下の通りです。

メイン画面…Map.aspx
地図コントロール…MapControl.ascx
利用者一覧コントロール…UserListControl.ascx

失敗した例

まず、今後の参考のために、失敗した例かから紹介します。
失敗した例では、UserListPanelのインスタンスをサーバー側で（System.Web.UI.Page.LoadControlメソッドを使って）生成し、動的に追加する方法
で実装しました。見た目上は変わりませんが、UserListPanelの検索処理が動いておりませんでした。おそらくUserListPanel内の子Controlがうまく作成されていなかったと思われます。

Map.aspx

<form id="form1" runat="server">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" Height="100%" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:PlaceHolder ID="PlaceHolder" runat="server" Visible="true">
            <uc:MapControl ID="MapControl" runat="server" />
        </asp:PlaceHolder>
        <dx:ASPxButton ID="Button3" runat="server" Text="Button3" ClientInstanceName="button3" ClientVisible="False" OnClick="Button3_Click"></dx:ASPxButton>
    </ContentTemplate>
</asp:UpdatePanel>
</form>

<asp:UpdatePanel ID="UpdatePanel3" runat="server" Height="100%" UpdateMode="Conditional">

<asp:PlaceHolder ID="PlaceHolder" runat="server" Visible="true">

<uc:MapControl ID="MapControl" runat="server" />

</asp:PlaceHolder>

<dx:ASPxButton ID="Button3" runat="server" Text="Button3" ClientInstanceName="button3" ClientVisible="False" OnClick="Button3_Click"></dx:ASPxButton>

</ContentTemplate>

</asp:UpdatePanel>

</form>

Map.aspx.cs

    public partial class Map: System.Web.UI.Page
    {
        protected void Button3_Click(object sender, EventArgs e)
        {
            var nodeName = TreeView.SelectedNode.Name;
            if (nodeName == "map")
            {
                this.PlaceHolder.Controls.Clear();
                var uc = AspxUtil.LoadControl("~/View/Control/UserListControl.ascx");
                this.PlaceHolder.Controls.Add(uc);
            }
            else if (nodeName == "user")
            {
                this.PlaceHolder.Controls.Clear();
                var uc = AspxUtil.LoadControl("~/View/Control/UserListControl.ascx");
                this.PlaceHolder.Controls.Add(uc);
            }

        }
    }

public partial class Map: System.Web.UI.Page

{

protected void Button3_Click(object sender, EventArgs e)

{

var nodeName = TreeView.SelectedNode.Name;

if (nodeName == "map")

{

this.PlaceHolder.Controls.Clear();

var uc = AspxUtil.LoadControl("~/View/Control/UserListControl.ascx");

this.PlaceHolder.Controls.Add(uc);

}

else if (nodeName == "user")

{

this.PlaceHolder.Controls.Clear();

var uc = AspxUtil.LoadControl("~/View/Control/UserListControl.ascx");

this.PlaceHolder.Controls.Add(uc);

}

成功した例

成功した例では、Map.aspx内でUserListPanelを生成し、PlaceHolderのVisibleを切り替える方法で実装しました。この方法だと、UserListPanelでの検索が正常に動作していました。

Map.aspx

<form id="form1" runat="server">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" Height="100%" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:PlaceHolder ID="MapPanel" runat="server" Visible="true">
            <uc:MapControl ID="MapControl" runat="server" />
        </asp:PlaceHolder>
        <asp:PlaceHolder ID="UserListPanel" runat="server" Visible="false">
            <uc:UserListControl ID="UserListControl1" runat="server" />
        </asp:PlaceHolder>
        <dx:ASPxButton ID="Button3" runat="server" Text="Button3" ClientInstanceName="button3" ClientVisible="False" OnClick="Button3_Click"></dx:ASPxButton>
    </ContentTemplate>
</asp:UpdatePanel>
</form>

<asp:UpdatePanel ID="UpdatePanel3" runat="server" Height="100%" UpdateMode="Conditional">

<asp:PlaceHolder ID="MapPanel" runat="server" Visible="true">

<uc:MapControl ID="MapControl" runat="server" />

</asp:PlaceHolder>

<asp:PlaceHolder ID="UserListPanel" runat="server" Visible="false">

<uc:UserListControl ID="UserListControl1" runat="server" />

</asp:PlaceHolder>

<dx:ASPxButton ID="Button3" runat="server" Text="Button3" ClientInstanceName="button3" ClientVisible="False" OnClick="Button3_Click"></dx:ASPxButton>

</ContentTemplate>

</asp:UpdatePanel>

</form>

Map.aspx.cs

    public partial class Map : System.Web.UI.Page
    {
        protected void Button3_Click(object sender, EventArgs e)
        {
            var nodeName = TreeView.SelectedNode.Name;
            if (nodeName == "map")
            {
                this.MapPanel.Visible = true;
                this.UserListPanel.Visible = false;
            }
            else if (nodeName == "user")
            {
                this.MapPanel.Visible = false;
                this.UserListPanel.Visible = true;
            }

        }
    }