Ajax is playing one of the biggest roles in the web world. So
for ajax Microsoft have provided ajax control tool kit for ajax controls. In
this article I will show you how you can implement an ajax Ajax AccordionControl in your asp.net application.
In this article I have used asp.net, CSS and ajax control toolkit.
Some of my previous article which you may also like are as
follows: JavaScript
Confirm Message From Code Behind in Asp.Net Using C#, How
to call javascript function from code behind Using C# in Asp.Net, Display
Alert Message on Page Load in MVC Application Using Javasscript, Digital
Clock in Asp.Net in C#.
So for this article first we will create a new asp.net
application add script manager in our page, Accordion control in our page.
After adding control we will add the AccordionPane for adding header and content
section for adding detail of menu.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AccrodianMenu.aspx.cs"
Inherits="ProjectDemo_Asp.et.AccrodianMenu" %>
<%@ 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>Ajax
Control Toolkit Accordion Example OR oHw to Use Ajax Accordion Control in
Asp.Net</title>
<style type="text/css">
.contentclass
{ margin: 1em;
border-collapse: collapse;
}
.headerclass
{ padding: .3em;
border: 1px #ccc solid; background: #fc9; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Accordion ID="Accordion1" runat="server" ContentCssClass="contentclass" HeaderCssClass="headerclass">
<Panes>
<asp:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="contentclass"
HeaderCssClass="headerclass">
<Header>JAVASCRIPT</Header>
<Content>This
section will reresent hte javascript section</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="contentclass"
HeaderCssClass="headerclass">
<Header>JQUERY</Header>
<Content>This
section will repserset jquery section</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="contentclass"
HeaderCssClass="headerclass">
<Header>ASP.NET</Header>
<Content>This
section will represent asp.net section to learn.</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</div>
</form>
</body>
</html>
|
Now view your page in browser.
About the Author
Great article, thank you...
ReplyDeleteThanks for you comment..
Delete