AJAX Accordion Control using XML DataBase


Code in ASPX page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnShow" runat="server"
onclick="btnShow_Click" Text="Show" />
<div>
<cc1:Accordion ID="Accordion1" runat="server"
 FadeTransitions="true" RequireOpenedPane="false"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent">
<HeaderTemplate><%# Eval("Description") %>
</HeaderTemplate>
<ContentTemplate>
<asp:Image ID="btnImg" ImageUrl='<%#Eval("Image") %>'
runat="server" Height="100"  />
<br />
<asp:Label  id="lbl1" Text="Features :"
style="font-weight:bold; color:Blue" runat="server" />
<%# Eval("Feature") %>
<br />
<asp:Label  id="lbl2" Text="Vendor:"
 style="font-weight:bold; color:Blue" runat="server"  />
<%# Eval("Seller") %>
<br />
<asp:Label  id="lb3" Text="Price:"
 style="font-weight:bold; color:Blue" runat="server"  />
<%# Eval("Price") %>
<br />
</ContentTemplate>
</cc1:Accordion>
</div>
</form>
</body>
</html>

Code behind:

protected void btnShow_Click(object sender, EventArgs e)
    {
     XElement el=XElement.Load(MapPath("~/Items.xml"));
      var res = from x in el.Elements("Item")
        select new
        {
            Description = x.Element("Description").Value,
            Feature = x.Element("Feature").Value,
            Seller = x.Element("Seller").Value,
            Price = x.Element("Price").Value,
            Image = x.Element("Image").Value,
          };
        Accordion1.DataSource = res;
        Accordion1.DataBind();
    }

you can download stylesheet and xml database file from following link

Download Sample Code

Advertisements

4 thoughts on “AJAX Accordion Control using XML DataBase

  1. hello.. i have a similar accordion control, which i have bound to a datatable.
    Now, in my content template , i have a button, and some labels and textboxes with data from the server. when i click on that button, i need to recognize from which of the panes has it come, and accordingly i need to modify the text and labels inside the content template of that pane.
    do you have any idea how to do it?

    I have bound a datatable( from the server) to my accordion control.

    Hence, the number of accordion header and content templates are not constant.

    In each accordion control template, i have 1 button, and some label with some data.

    If the button from the content template is pressed, i need to access the corresponding row of the datatable, and make changes to the datatable, and correspondingly to the text that i display in the labels and textbox of that particular content template.

    How is it possible?

    Below are the snippets of my code :

    .cs page

    Accordion2.DataSource = _dt.DefaultView;

    Accordion2.DataBind();

    .aspx page

    <%—-%>

    <%– –%>

                  :

     

    Any help will be appreciated.

    Probably some way to recognize onclick event or something for the header template pane which is clicked or is open currently? or some UI.ACTIONS.ACTIVE sort of thing?
    accordion2.FindControl cant be used effectibvely in this right?

  2. you have used databasemodel.databaseentities. But i have a datatable which i am filling with objects in my code.
    Can you modify the code for that.
    dt = new DataTable(“rDtable”);

    dt.Columns.add(………………);

    dt.rows.add(…………….);

    Now, i am binding this datatable with accordion.

    In this case, how to do edit and delete?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s