ASP.NET Ajax Control Toolkit in VB.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.
  • 3014

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.
ASP-page1.gif

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.
webforms.gif

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.

  • Select Accordian and AccordionPane, Scriptmanager Control.

control-page.gif

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.

output1.gif

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.