ASP.NET WebFormでのパネルの表示、表示・非表示時の切り替えコードと実行結果 - ASP.NET コントロールによるdiv枠の表現

ASP.NET WebFormのパネルを利用して、ASP.NETコントロールでdiv枠を表現するコードを紹介します。

プログラム

UI/コード

下図のUIを作成します。WebフォームにPanelを配置し、内部にメッセージテキストを記述します。

aspxファイルのコードは以下になります。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="panel1.aspx.cs" Inherits="PanelDemo.panel1" %>

<!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:Panel ID="Panel1" runat="server">
        <p>このメッセージはPanelコントロール内にあります。</p>
      </asp:Panel>
    </div>
    </form>
</body>
</html>

実行結果

プロジェクトを実行します。aspxファイルをWebブラウザで表示すると以下の画面が表示されます。

このときのソースコードは以下になります。Panelコントロールが実行時にはdivタグで表現されていることが確認できます。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title></head>
<body>
    <form method="post" action="./panel1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ZslWVosE/WXyTIiajLl0surwNfEA2B3xew0DrJPrhWOr+V+OeIGiYluj9X+pUVcKuSas5cjtmqarwW43lbE7Vi9lXDjZyGhkie3YWYDEJJY=" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="D55E96DC" />
</div>
    <div>
      <div id="Panel1">
	
        <p>このメッセージはPanelコントロール内にあります。</p>
      
</div>
    </div>
    </form>
</body>
</html>

プログラム2: パネルの表示非・表示の切り替え

UI

下図のUIを作成します。3つのパネルを配置し、それぞれのパネル内に、メッセージとテキストボックスを配置します。

aspxファイルのコードは下記になります。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="panel2.aspx.cs" Inherits="PanelDemo.panel2" %>

<!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>
      <p>入力欄</p>
      <asp:Panel ID="Panel_Input1" runat="server" Visible="False">
        <p>入力欄その１</p>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      </asp:Panel>
      <asp:Panel ID="Panel_Input2" runat="server" Visible="False">
        <p>入力欄その２</p>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
      </asp:Panel>
      <asp:Panel ID="Panel_Input3" runat="server" Visible="False">
        <p>入力欄その３</p>
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
      </asp:Panel>
    </div>
    </form>
</body>
</html>

コード

下記のコードを記述します。実際に記述するコードはOnLoadイベントの実装です。

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

namespace PanelDemo
{
  public partial class panel2 : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      if (Request.QueryString["mode"] == "1") {
        Panel_Input1.Visible = true;
      }
      if (Request.QueryString["mode"] == "2") {
        Panel_Input2.Visible = true;
      }
      if (Request.QueryString["mode"] == "3") {
        Panel_Input3.Visible = true;
      }
    }
  }
}

解説

Request.QueryString["mode"] でURLのパラメーターの"mode"の値を取得します。値が"1"であった場合は、Panel_Input1を表示し、値が"2"であった場合はPanel_Input2を表示し、値が"3"であった場合は、Panel_Input3を表示します。デフォルトではPanelのVisibleはfalseのため、他の値であった場合やパラメーターが指定されていない場合は、パネルは3つとも表示されない動作になります。