AJAX Accordion Control with EDM


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="Click here to see accordion" />
<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)
    {
        DatabaseModel.DatabaseEntities obj = new DatabaseModel.DatabaseEntities();
        var x = (from n in obj.Items
                 select n);
        Accordion1.DataSource = x;
        Accordion1.DataBind();
    }

Download Source Code

Advertisements

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