The AsyncPanel is a very lightweight AsyncWebControl used to only contain other child controls.
<%@ Register Assembly="AsyncControls" Namespace="DelvingWare.AsyncControls" TagPrefix="dw" %> <dw:AsyncPanel runat="server" ID="pnlMain" CssClass="asyncPanel"> <p> <dw:AsyncButton runat="server" ID="btShowPanel" Text="Show Nested AsyncPanel" OnClick="btShowPanel_Click" DisableDuringCallback="false" CssClass="greyButton"/> <br /> <br/> <dw:AsyncButton runat="server" ID="btHidePanel" Enabled="false" Text="Hide Nested AsyncPanel" OnClick="btHidePanel_Click" DisableDuringCallback="false" CssClass="greyButton"/> <p/> <dw:AsyncPanel runat="server" ID="pnlNestedMain" Visible="false" CssClass="nestedPanel"> <div class="nestedPanelText">I'm inside a nest AsyncPanel</div> </dw:AsyncPanel> </p> </dw:AsyncPanel>
using System; using DelvingWare.AsyncControls; ... protected void btShowPanel_Click( object sender, AsyncEventArgs ae ) { // show the AsyncPanel pnlNestedMain.Visible = true; // disable/enable the AsyncButtons btHidePanel.Enabled = true; btShowPanel.Enabled = false; } protected void btHidePanel_Click( object sender, AsyncEventArgs ae ) { // hide the AsyncPanel pnlNestedMain.Visible = false; // disable/enable the AsyncButtons btShowPanel.Enabled = true; btHidePanel.Enabled = false; }
Imports System Imports DelvingWare.AsyncControls ... Protected Sub btShowPanel_Click(ByVal sender As Object, ByVal ae As AsyncEventArgs) ' show the AsyncPanel pnlNestedMain.Visible = true ' disable/enable the AsyncButtons btHidePanel.Enabled = true btShowPanel.Enabled = false End Sub Protected Sub btHidePanel_Click(ByVal sender As Object, ByVal ae As AsyncEventArgs) ' hide the AsyncPanel pnlNestedMain.Visible = false ' disable/enable the AsyncButtons btShowPanel.Enabled = true btHidePanel.Enabled = false End Sub
.asyncPanel { padding: .5em; width: 90%; border: 1px solid #ddd; background-color: white; font-family: Verdana, Arial, Serif; font-size: 10pt; } .nestedPanel { } .nestedPanelText { background-color: #ddd; border: 1px solid #777; padding-left: 20px; }