複数UpdatePanelコントロールの表示制御について～

こんにちは。エンジニアの魯(ろ)です。

今回は、複数UpdatePanelコントロールの表示制御について調べたことをアウトプットしていきたいと思います。

目次

  1. UpdatePanelとは
    2. 　　
  2. UpdatePanelコンテンツの更新について
    3. 　　
  3. いくつかのパターン
    4. 　　
  4. おわりに
    5. 　

1.UpdatePanelとは

UpdatePanelは、ポストバックなしでページのセクションを部分的に更新できるコントロールです。

まず、ページ上のコントロールを非同期ポストバックコントロールとして登録するには、ScriptManagerコントロールが必須になります。ただし、1ページにScriptManagerコントロールは一つしか設定できません。

そして、UpdatePanelコントロールを使用するには、下記のプロパティを知っていないといけません。

  • RenderModeプロパティ：Inlineの場合には、UpdatePanelコントロールの内容が、HTML <span> で囲まれています。Blockの場合には、HTML <div> で囲まれています。

  • UpdateModeプロパティ：UpdatePanelコントロールの内容がいつ更新されるかを設定します。

  • ChildrenAsTriggersプロパティ：UpdatePanelコントロールの子コントロールから発生したポストバックにより、UpdatePanelコントロールの内容がいつ更新されるかを設定します。

2.UpdatePanelコンテンツの更新について

UpdatePanelコントロールが非同期ポストバックを発生させ、更新するかどうかは 、設定より異なります。

  • UpdateModeプロパティが「Always」に設定されている場合には、UpdatePanelを使用しているページからのポストバックごとにコンテンツが更新されます。 これには、他のUpdatePanelコントロールからの非同期ポストバックや、 UpdatePanelではないコントロールからのポストバックが含まれます。

  • UpdateModeプロパティが「Conditional」に設定されている場合には、下記のようになります。
    • Update()を明示的に呼び出すときに更新されます。
    • 親UpdatePanelコントロールが更新された場合には、子UpdatePanelコントロールも更新されます。
    • Triggersとして定義されているコントロールがポストバックを発生させる場合に更新されます 。Triggerは、UpdatePanelコントロールの内側または外側に配置できます。
    • ChildrenAsTriggersプロパティが「true」に設定される場合には、UpdatePanelコントロールの子コントロールがポストバックを発生させると更新されます。ただし、入れ子になったUpdatePanelコントロールの子コントロールがポストバックを発生させる場合には、外側のUpdatePanelコントロールが更新されません。

※ChildrenAsTriggersプロパティを「false」に設定し、 UpdateModeプロパティを「Always」に設定することはできません。

3.いくつかのパターン

  • 親UpdatePanelコントロールの子コントロールがポストバックを発生させ、親UpdatePanelコントロールと子UpdatePanelコントロール両方のコンテンツが更新されます。
<asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
	<ContentTemplate>
		<asp:Label ID="l1" runat="server"></asp:Label>
		<asp:Button ID="b1" runat="server" Text="Button" OnClick="b1_Click" />
		<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
			<ContentTemplate>
				<asp:Label ID="l2" runat="server"></asp:Label>
			</ContentTemplate>
		</asp:UpdatePanel>
	</ContentTemplate>
</asp:UpdatePanel>
protected void b1_Click(object sender, EventArgs e)
{
	l1.Text = DateTime.Now.ToString();
	l2.Text = DateTime.Now.ToString();
}

UpdatePanel1とUpdatePanel2のUpdateModeを「Conditional」に設定して、UpdatePanel1のChildrenAsTriggersを「True」に設定します。

  • 子UpdatePanelコントロールの子コントロールがポストバックを発生させ、親UpdatePanelコントロールと子UpdatePanelコントロール両方のコンテンツが更新されます。
<asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<asp:Label ID="l1" runat="server"></asp:Label>
		<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
			<ContentTemplate>
				<asp:Label ID="l2" runat="server"></asp:Label>
				<asp:Button ID="b2" runat="server" Text="Button" OnClick="b2_Click" />
			</ContentTemplate>
		</asp:UpdatePanel>
	</ContentTemplate>
	<Triggers>
		<asp:AsyncPostBackTrigger ControlID="b2" EventName="Click"/>
	</Triggers>
</asp:UpdatePanel>
protected void b2_Click(object sender, EventArgs e)
{
	l1.Text = DateTime.Now.ToString();
	l2.Text = DateTime.Now.ToString();
}

UpdatePanel1とUpdatePanel2のUpdateModeを「Conditional」に設定して、UpdatePanel2のChildrenAsTriggersを「True」に設定します。そして、ボタンb2をUpdatePanel1のTriggerとして登録します。

  • 親UpdatePanelコントロールの子コントロールがポストバックを発生させ、子UpdatePanelコントロールのコンテンツだけが更新されます。
<asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
	<ContentTemplate>
		<asp:Label ID="l1" runat="server"></asp:Label>
		<asp:Button ID="b1" runat="server" Text="Button" OnClick="b1_Click" />
		<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
			<ContentTemplate>
				<asp:Label ID="l2" runat="server"></asp:Label>
			</ContentTemplate>
			<Triggers>
				<asp:AsyncPostBackTrigger ControlID="b1" EventName="Click"/>
			</Triggers>
		</asp:UpdatePanel>
	</ContentTemplate>
</asp:UpdatePanel>
protected void b1_Click(object sender, EventArgs e)
{
	l2.Text = DateTime.Now.ToString();
}

UpdatePanel1とUpdatePanel2のUpdateModeを「Conditional」に設定して、UpdatePanel1のChildrenAsTriggersを「False」に設定します。そして、ボタンb1をUpdatePanel2のTriggerとして登録します。

おわりに

いかがでしょうか？今回は、複数UpdatePanelコントロールの表示制御について紹介しました。UpdatePanelコントロールは、とても強力で便利なコントロールですが、代わりにパフォーマンスがやや低くなってしまうことを覚えておきましょう！

以上です。これを読んだ人のお役に立てたら幸いです。

関連記事

プロジェクトストーリー

技術

コメント

この記事へのコメントはありません。

カテゴリー

TOP
TOP