If our page contains many controls and the page does not look good. That time we have to take the AJAX Accordion Pane and our all controls should group wise.
Before use of AJAX we must have "AjaxControlToolkit.dll" and it should attached to our project. We can download the "AjaxControlToolkit.dll" .
Steps: 1 to Add the "AjaxControlToolkit.dll" .
Rirgt click on any Tab of of ToolBox -> Add new Tab -> Rename the tab to 'Ajax Client-Tool Kit ' ->
Again Right click on this tab -> Choose Items -> Browse the location where the "AjaxControlToolkit.dll" has saved -> Ok
Steps: 2
Design the page like this
NB: After adding the Accordian Pane to our page the proporties and events of controls should write by us in ASPX page. Double click on control can not create event in ASPX page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AccordianPaneExample.aspx.cs"
Inherits="Projects_Ajax_AccordianPaneExample" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<style type="text/css">
.accordionContent
{
background-color: #CCFF66;
border-color: -moz-use-text-color #2F4F4F #2F4F4F;
border-right: 1px dashed #2F4F4F;
border-style: none dashed dashed;
border-width: medium 1px 1px;
padding: 10px 5px 5px;
width: 60%;
}
.accordionHeaderSelected
{
background-color: Orange;
border: 1px solid #2F4F4F;
color: white;
cursor: pointer;
font-family: Arial,Sans-Serif;
font-size: 12px;
font-weight: bold;
margin-top: 5px;
padding: 5px;
width: 60%;
}
.accordionHeader
{
background-color:#669900;
border: 1px solid #2F4F4F;
color: white;
cursor: pointer;
font-family: Arial,Sans-Serif;
font-size: 12px;
font-weight: bold;
margin-top: 5px;
padding: 5px;
width: 60%;
}
.href
{
color: White;
font-weight: bold;
text-decoration: none;
}
#Body1
{
font-weight: 700;
}
</style>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" SuppressHeaderPostbacks="false"
AutoSize="None" RequireOpenedPane="false" FadeTransitions="true" TransitionDuration="250" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" FramesPerSecond="40">
<Panes>
<asp:AccordionPane ID="Acc1" runat="server">
<Header>
Personal Information
</Header>
<Content>
<table class="style1">
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="40%">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
<td width="60%">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane1" runat="server">
<Header>
Address Details
</Header>
<Content>
<table class="style1">
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="40%">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
<td width="60%">
<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label8" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox10" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
No comments:
Post a Comment