ASP.NET の UpdatePanel コントロールを使用して、画面全体ではなく画面の一部分のみを再描画させることができます。また、UpdatePanel コントロールを入れ子にして定義させることもできます。このページでは、入れ子にした UpdatePanel コントロールのサンプルを掲載しています。
スポンサーリンク
入れ子にした UpdatePanel コントロール
入れ子にした UpdatePanel コントロールのサンプルになります。親の UpdatePanel コントロールの ContentTemplate タグ内に、子の UpdatePanel コントロールパネルを配置しています。また、親子それぞれの UpdatePanel のボタンクリックイベントを設定しています。詳細はコメントを参照ください。
ASPX
<form id="form1" runat="server"> <!-- スクリプトマネージャー --> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <!-- 親 UpdatePanel コントロール --> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> <!-- 子 UpdatePanel コントロール --> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" /> <asp:Label ID="Label2" runat="server" Text=""></asp:Label> </ContentTemplate> <!-- 子 UpdatePanel コントロールのトリガーイベント設定 --> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" /> </Triggers> </asp:UpdatePanel> </ContentTemplate> <!-- 親 UpdatePanel コントロールのトリガーイベント設定 --> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div> </form>
VB.NET
''' ページロードイベント Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load ' ポストバック時は何もしない If IsPostBack = True Then Return End If End Sub ''' 親 UpdatePanel コントロールのボタンイベント(トリガー) Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click Label1.Text = DateTime.Now.ToString() End Sub ''' 子 UpdatePanel コントロールのボタンイベント(トリガー) Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button2.Click Label2.Text = DateTime.Now.ToString() End Sub
C#
/// ページロードイベント protected void Page_Load(object sender, EventArgs e) { // ポストバック時は何もしない if (IsPostBack == true) { return; } } /// 親 UpdatePanel コントロールのボタンイベント(トリガー) protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); } /// 子 UpdatePanel コントロールのボタンイベント(トリガー) protected void Button2_Click(object sender, EventArgs e) { Label2.Text = DateTime.Now.ToString(); }
子パネルのイベントで親パネルの要素の変更を禁止する
親の UpdatePanel および子の UpdatePanel のイベント内で、親子それぞれの要素の変更を行うことができますが、次のように親の UpdatePanel コントロールに以下のプロパティ設定を行うと、子の UpdatePanel のイベントで行う親画面に対する要素の変更をブラウザ上で反映させないように制御することができます。
プロパティ | 設定値 |
---|---|
ChildrenAsTriggers | False |
UpdateMode | Conditional |