.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Code Snippets >> Ajax >> Post New Resource Bookmark and Share   

 Subscribe to Code Snippets

Bind Data to AJAX Accordion

Posted By:Sasi Prabhu       Posted Date: July 29, 2011    Points: 40    Category: Ajax    URL: http://www.dotnetspark.com  

Accordion
 


This tutorial will cover the AJAX Accordion Control and how to set it up and use it.

Introduction

This tutorial will cover the AJAX Accordion Control and how to set it up and use it.  This tutorial will also cover styling the Accordion control with CSS so that it looks presentable.

Step 1.

 Create an AJAX ready Web Application
        Start by creating a Web Form Called "Default.aspx"
        Then we need to add an AJAX Script Manager to the form which will allow it to be AJAX Ready
        Once that is complete we can add the Accordion Control and see it work

Step 2.

 Create the Accordion Control

   It is important to note how Accordion Controls are setup.
   An Accordion Control contains several Accordion Panes, and these Accordion Panes are comprised of Header and Content Sections.
   When an Accordion Pane is minimized you will only see the header section and when it is enlarged you can see the Header and the Content sections.
    Copy the code from below and paste it in your web form then run it to view the basic Accordion Structure.


In .aspx

       
       
 
 
 
 
 
 
 

 

Employeeid


 

 

FirstName


 

 

LastName


 

 

Title


 

       

       
       
 
  <%# DataBinder.Eval(Container.DataItem, "Employeeid") %>
 

 
 
 
 
<%# DataBinder.Eval(Container.DataItem, "FirstName") %><%# DataBinder.Eval(Container.DataItem, "LastName") %><%# DataBinder.Eval(Container.DataItem, "Title") %>

       

       


 


.aspx.cs

SqlConnection myconnection;
    SqlDataAdapter myda;
    DataSet ds;
    String strConn;
    string SQLStmt = "Select * from Employees  ";
    protected void Page_Load(object sender, EventArgs e)
    {
        BindData();
    }
    void BindData()
    {
        strConn = "Server=localhost;uid=sa;password=;database=Repeaters;";
        myconnection = new SqlConnection(strConn);
        myda = new SqlDataAdapter(SQLStmt, myconnection);
        ds = new DataSet();
        myda.Fill(ds, "AllTables");
        Accordion1.DataSource = ds.Tables[0].DefaultView;
        Accordion1.DataBind();
    }



For the Accordion Control to Bind the DataSource in the form of DefaultView only.




     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More code samples in C#, ASP.Net, Vb.Net and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend