ARTICLE
Using Ajax Control Toolkit in ASP.NET
In this article we can easily implement any Ajax control Toolkit in ASP.NET page and with the help of this article we prepare any application in easily way.
Introduction : How can use Accordion and
AccordianPane control in ASP.NET Ajax Control Toolkit.
The Accordion Control derives from the
webcontrol class. It is use conjunction with Accordiaonpane control which
represent the actual Panes. The Accordionpane Control are held <Pane> tag of the
Accordion Control.
Step 1 : Open visual studio and go to
file menu.
- We select website option.
- Now we will install Ajax Control Toolkit.
- We select ASP.NET page.
- Default.aspx page will be open.
Step 2 : Go to solution explorer and
right click. - Select add new items.
- Now we select webform and add in page.
- Now click in source option and write a code.
Code : <title>my
ajax application</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<PANES>
<asp:AccordionPane ID = "AccordiOnpane2" runat ="server">
<Header>
<div style ="background-color:Red;">Section1</div>
</Header>
<Content>
TCS<br/>
INFOSYS<br/>
WIPRO<br />
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID = "AccordionPane3" runat = "server">
<Header>
<div style = "background-color:Red;">section2</div>
</Header>
</asp:AccordionPane>
</PANES>
</asp:Accordion>
</div>
</form>
</body>
</html>
Step 3: Go to toolbox option and select a
control.
Step 4 : Now we can define StyleSheet
with Accordian Control. - Write a code for StyleSheet.
Code :
<title>my
Ajax Application</title>
<style type ="text/css">
.Accordion
{
width:230px;
}
.Accordion
header
{
border:120px;
background-color:Gray;
border-color:Green;
font:110px;
font-size:20px;
cursor:pointer;
}
.Accordionheaderselected
{
border:100px;
color:Lime;
font:110px;
cursor:pointer;
}
.Accordion
content
{
border:120px;
color:Lime;
font:110px;
cursor:pointer;
}
</style>
Step 5: Now we press
F5 and run this application and find out result.
