Hi Friends, Here I have Explained Ajax AccordianPane control
in Asp.Net.
First you have to download Ajax toolkit. You can download
Ajax toolkit from Microsoft site. In that go Download section and download
AjaxToolsKit for your .Net version means which
visual studio version (Framework)you
use.
When you will use ajax in your page then first register ajax
in your page means write the code given code at top of your design page.
<%@
Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
AccordianPane.aspx:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="AccordianPane.aspx.cs" Inherits="Ajax_AccordianPane"
%>
<%@
Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
<!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>Ajax
AccordianPane control example in Asp.net </title>
<style type="text/css">
.accordionContent
{
background-color:
#D3DEEF;
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:90%;
}
.accordionHeaderSelected {
background-color:
#5078B3;
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:90%;
}
.accordionHeader
{
background-color:
#2E4D7B;
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:90%;
}
.href
{
color:White;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
FadeTransitions="true"
SuppressHeaderPostbacks="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
AutoSize="None"
Height="538px">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header><a href="#" class="href">Login</a></Header>
<Content>
<asp:Panel ID="UserReg"
runat="server">
<table>
<tr>
<td></td>
<td align="right" >
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Unique Id:
</td>
<td>
<asp:TextBox ID="txt_login_unique_id"
runat="server"></asp:TextBox>
<br />
<asp:Label ID="lbl_login_unique_id" runat="server"
Text="Enter your
unique_id." Visible="false" ForeColor="#ff0000"></asp:Label>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Password:
</td>
<td>
<asp:TextBox ID="txt_login_password"
runat="server"
TextMode = "Password"></asp:TextBox>
<br />
<asp:Label ID="lbl_login_password"
runat="server"
Text="Enter your
password." Visible="false" ForeColor="#ff0000"></asp:Label>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="left" >
<asp:Button ID="btnlogin"
runat="server"
Text="Login"
onclick="btnlogin_Click1"/>
</td>
</tr>
</table>
</asp:Panel>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2"
runat="server">
<Header><a href="#" class="href">New User Registration</a></Header>
<Content>
<asp:Panel ID="Panel1" runat="server">
<table align="center">
<tr>
<td></td>
<td align="left" colspan="2">
<asp:Label ID="lbl_reg_password_not_match" runat="server"
Text="Password
doesn't match." Visible="false" ForeColor="#ff0000"></asp:Label>
</td>
</tr>
<tr>
<td align="right" colspan="2">
Unique Id:
</td>
<td>
<asp:TextBox ID="txt_reg_unique_id" runat="server"
></asp:TextBox>
<br />
<asp:Label ID="lbl_reg_unique_id" runat="server"
Text="Enter your
unique_id." Visible="false" ForeColor="#ff0000"></asp:Label>
</td>
</tr>
<tr>
<td align="right" colspan="2">
Password:
</td>
<td>
<asp:TextBox ID="txt_reg_password" runat="server" TextMode = "Password"></asp:TextBox>
<br />
<asp:Label ID="lbl_reg_password" runat="server" Text="Enter your
password." Visible="false" ForeColor="#ff0000"></asp:Label>
</td>
</tr>
<tr>
<td align="right" colspan="2">
Retype Password:
</td>
<td>
<asp:TextBox ID="txt_reg_retype_password"
runat="server"
TextMode = "Password"></asp:TextBox>
<br />
<asp:Label ID="lbl_retype_password" runat="server"
Text="Enter your
retype password." Visible="false" ForeColor="#ff0000"></asp:Label>
</td>
</tr>
<tr>
<td align="right" colspan="2">
Security Question:
</td>
<td>
<asp:DropDownList ID="ddl_security_question" runat="server">
</asp:DropDownList>
<br />
<asp:Label ID="lbl_security_question" runat="server"
Text="Select your
question." Visible="false" ForeColor="#ff0000"></asp:Label>
</td>
</tr>
<tr>
<td align="right" colspan="2" >
Answer :
</td>
<td>
<asp:TextBox ID="txt_reg_answer"
runat="server"></asp:TextBox>
<br />
<asp:Label ID="lbl_reg_answer" runat="server" Text="Enter your password." Visible="false"
ForeColor="#ff0000"></asp:Label>
</td>
</tr>
<tr>
<td></td>
<td align="left" colspan="2"
>
<asp:Button ID="btn_register" runat="server" Text="Register"
onclick="btn_register_Click"
/>
</td>
</tr>
</table>
</asp:Panel>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</div>
</form>
</body>
</html>
AccordianPane.aspx.cs:-
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
public partial class Ajax_AccordianPane : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
}
protected
void btnlogin_Click1(object
sender, EventArgs e)
{
// write your login button code here.
}
protected
void btn_register_Click(object sender, EventArgs e)
{
// write your registration button code here.
}
}
Hope you will enjoy from this post. If any problem regarding this
post you can contact me at sushilct86@gmail.com.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.