Use of AJax Collapsible Panel Extender tool in Asp.Net with attaractive background and Collapse and Expand images
First of all add a referance for AjaxControlToolKit to your page ::
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
Add following css inside <head> tag ::
<style type="text/css">
.pnlCSS{
font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:30%;
border-radius:10px;
background-color:white;
}
.pnlClick
{
font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:30%;
border-radius:10px;
background-color:Gray;
}
.Water
{
font-weight:lighter;
font-style:italic;
color:Gray;
width:220px;
border-round:5px;
}
</style>
Add two panel inside your <body> tag and Attach AjaxControlToolKit control and drag and drop the CollapsiblePanelExtender like below::
<asp:Panel ID="pnlClick" runat="server" CssClass="pnlClick">
<div style="width:100%; height:30px; vertical-align:middle">
<div style="float:left; color:White;padding:5px 5px 5px 5px">
Registration Form
</div>
<div style="float:right; color:White; padding:5px 5px 0 0">
<asp:Label ID="lblMessage" runat="server" Text="Label"/>
<asp:Image ID="imgArrows" runat="server" />
</div>
<div style="clear:both"></div>
</div>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" CssClass="pnlCSS">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table align="center" style="padding-left:10px; padding-right:10px">
<tr><td><asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1" AccessKey="u" Text="<u>U</u>serName"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" TargetControlID="TextBox1" WatermarkText="Enter User Name" WatermarkCssClass="Water" runat="server">
</asp:TextBoxWatermarkExtender>
</td></tr>
<tr><td>
<asp:Label ID="Label2" runat="server" AssociatedControlID="TextBox2" AccessKey="a" Text="<u>A</u>ddress"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" TargetControlID="TextBox2" WatermarkText="Enter Address" WatermarkCssClass="Water" runat="server">
</asp:TextBoxWatermarkExtender>
</td></tr>
<tr><td>
<asp:Label ID="Label3" runat="server" AssociatedControlID="TextBox3" AccessKey="m" Text="E<u>m</u>ail"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox3" runat="server">
</asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender3" TargetControlID="TextBox3" WatermarkText="Enter Email Address" WatermarkCssClass="Water" runat="server">
</asp:TextBoxWatermarkExtender>
<asp:RegularExpressionValidator
ID="RegularExpressionValidator1" runat="server" ErrorMessage="Enter correct Email ID" ControlToValidate="TextBox3" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator></td></tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" AssociatedControlID="TextBox4" AccessKey="p" Text="<u>P</u>assword"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox4" runat="server" TextMode="Password"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender4" TargetControlID="TextBox4" WatermarkText="Enter password" WatermarkCssClass="Water" runat="server">
</asp:TextBoxWatermarkExtender>
<asp:PasswordStrength ID="TextBox4_PasswordStrength" runat="server"
Enabled="True" TargetControlID="TextBox4" StrengthIndicatorType="BarIndicator" BarBorderCssClass="barBorder" BarIndicatorCssClass="BarInternalGreen" TextStrengthDescriptions="Poor;Weak;Average;Good;Very good;Excellent"></asp:PasswordStrength>
</td></tr>
<tr><td><asp:Label ID="Label6" runat="server" Text="Upload Image"></asp:Label></td><td><asp:FileUpload ID="upload1" runat="server" />
<br />
<label id="lblmsg" style="font-weight:bold; color:Red" /> </td></tr>
<tr><td>
<asp:Label ID="Label7" runat="server" AssociatedControlID="txtCaptcha" AccessKey="c" Text="Enter <u>c</u>ode"></asp:Label></td>
<td>
<asp:TextBox ID="txtCaptcha" runat="server"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender5" TargetControlID="txtCaptcha" WatermarkText="Enter captcha code" WatermarkCssClass="Water" runat="server">
</asp:TextBoxWatermarkExtender>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:Image ID="imgCaptcha" runat="server" />
<asp:ImageButton ID="ImageButton1" runat="server" Height="30px" Width="20px" ImageUrl="~/images/refresh.gif" OnClick="btnRefresh_Click"/>
<asp:Label ID="Label5" runat="server" Text=""></asp:Label>
</td>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<table align="center" style="padding-left:10px; padding-right:10px">
<tr><td> </td><td> <asp:Button ID="Button1" runat="server" Text="Submit" CssClass="buttonclass"
onclick="Button1_Click"/></td></tr>
</table>
<asp:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
CollapseControlID="pnlClick"
Collapsed="true"
ExpandControlID="pnlClick"
TextLabelID="lblMessage"
CollapsedText="Show"
ExpandedText="Hide"
ImageControlID="imgArrows"
CollapsedImage="~/images/expand.jpg"
ExpandedImage="~/images/collapse.jpg"
ExpandDirection="Vertical"
TargetControlID="Panel1"
ScrollContents="false">
</asp:CollapsiblePanelExtender>
</asp:Panel>
And don't forget to attach the script manager to your page ::
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
Image before expansion::
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
Add following css inside <head> tag ::
<style type="text/css">
.pnlCSS{
font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:30%;
border-radius:10px;
background-color:white;
}
.pnlClick
{
font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:30%;
border-radius:10px;
background-color:Gray;
}
.Water
{
font-weight:lighter;
font-style:italic;
color:Gray;
width:220px;
border-round:5px;
}
</style>
Add two panel inside your <body> tag and Attach AjaxControlToolKit control and drag and drop the CollapsiblePanelExtender like below::
<asp:Panel ID="pnlClick" runat="server" CssClass="pnlClick">
<div style="width:100%; height:30px; vertical-align:middle">
<div style="float:left; color:White;padding:5px 5px 5px 5px">
Registration Form
</div>
<div style="float:right; color:White; padding:5px 5px 0 0">
<asp:Label ID="lblMessage" runat="server" Text="Label"/>
<asp:Image ID="imgArrows" runat="server" />
</div>
<div style="clear:both"></div>
</div>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" CssClass="pnlCSS">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table align="center" style="padding-left:10px; padding-right:10px">
<tr><td><asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1" AccessKey="u" Text="<u>U</u>serName"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" TargetControlID="TextBox1" WatermarkText="Enter User Name" WatermarkCssClass="Water" runat="server">
</asp:TextBoxWatermarkExtender>
</td></tr>
<tr><td>
<asp:Label ID="Label2" runat="server" AssociatedControlID="TextBox2" AccessKey="a" Text="<u>A</u>ddress"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" TargetControlID="TextBox2" WatermarkText="Enter Address" WatermarkCssClass="Water" runat="server">
</asp:TextBoxWatermarkExtender>
</td></tr>
<tr><td>
<asp:Label ID="Label3" runat="server" AssociatedControlID="TextBox3" AccessKey="m" Text="E<u>m</u>ail"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox3" runat="server">
</asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender3" TargetControlID="TextBox3" WatermarkText="Enter Email Address" WatermarkCssClass="Water" runat="server">
</asp:TextBoxWatermarkExtender>
<asp:RegularExpressionValidator
ID="RegularExpressionValidator1" runat="server" ErrorMessage="Enter correct Email ID" ControlToValidate="TextBox3" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator></td></tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" AssociatedControlID="TextBox4" AccessKey="p" Text="<u>P</u>assword"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox4" runat="server" TextMode="Password"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender4" TargetControlID="TextBox4" WatermarkText="Enter password" WatermarkCssClass="Water" runat="server">
</asp:TextBoxWatermarkExtender>
<asp:PasswordStrength ID="TextBox4_PasswordStrength" runat="server"
Enabled="True" TargetControlID="TextBox4" StrengthIndicatorType="BarIndicator" BarBorderCssClass="barBorder" BarIndicatorCssClass="BarInternalGreen" TextStrengthDescriptions="Poor;Weak;Average;Good;Very good;Excellent"></asp:PasswordStrength>
</td></tr>
<tr><td><asp:Label ID="Label6" runat="server" Text="Upload Image"></asp:Label></td><td><asp:FileUpload ID="upload1" runat="server" />
<br />
<label id="lblmsg" style="font-weight:bold; color:Red" /> </td></tr>
<tr><td>
<asp:Label ID="Label7" runat="server" AssociatedControlID="txtCaptcha" AccessKey="c" Text="Enter <u>c</u>ode"></asp:Label></td>
<td>
<asp:TextBox ID="txtCaptcha" runat="server"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender5" TargetControlID="txtCaptcha" WatermarkText="Enter captcha code" WatermarkCssClass="Water" runat="server">
</asp:TextBoxWatermarkExtender>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:Image ID="imgCaptcha" runat="server" />
<asp:ImageButton ID="ImageButton1" runat="server" Height="30px" Width="20px" ImageUrl="~/images/refresh.gif" OnClick="btnRefresh_Click"/>
<asp:Label ID="Label5" runat="server" Text=""></asp:Label>
</td>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<table align="center" style="padding-left:10px; padding-right:10px">
<tr><td> </td><td> <asp:Button ID="Button1" runat="server" Text="Submit" CssClass="buttonclass"
onclick="Button1_Click"/></td></tr>
</table>
<asp:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
CollapseControlID="pnlClick"
Collapsed="true"
ExpandControlID="pnlClick"
TextLabelID="lblMessage"
CollapsedText="Show"
ExpandedText="Hide"
ImageControlID="imgArrows"
CollapsedImage="~/images/expand.jpg"
ExpandedImage="~/images/collapse.jpg"
ExpandDirection="Vertical"
TargetControlID="Panel1"
ScrollContents="false">
</asp:CollapsiblePanelExtender>
</asp:Panel>
And don't forget to attach the script manager to your page ::
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
Image before expansion::
Image after expansion when you click on Show div::
Comments
Post a Comment