Populate (Bind) Ajax Accordion inside ASP.Net Repeater from Database using C# and VB.Net

Last Reply 2 months ago By pandeyism

Posted 2 months ago

Hi Team,

I want to bind data from codebehind to Ajax accordion.

I have table structure like below.
Image_ID
ImageName
ImagePath

I want show ImageName in accordion header
and Image in accordion body.

 

Posted 2 months ago Modified on 2 months ago

Hi Waghmare,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .header_selected
        {
            border: 1px solid #FF8C00;
            color: #FFF;
            background-color: #FF8C00;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
        }
        .header
        {
            border: 1px solid #89BA06;
            color: #fff;
            background-color: #89BA06;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
        }
        .header a, .header_selected a
        {
            color: #fff;
            text-decoration: none;
        }
        .content
        {
            background-color: #F6F6F6;
        }
        .content a, .content a:visited
        {
            color: #000;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:Repeater ID="rptMenu" runat="server" OnItemDataBound="rptMenu_OnItemDataBound">
                <ItemTemplate>
                    <asp:HiddenField ID="hfId" runat="server" Value='<%#Eval("Id") %>' />
                    <cc1:Accordion ID="AccordionMenu" runat="server" HeaderCssClass="header" HeaderSelectedCssClass="header_selected"
                        ContentCssClass="content" RequireOpenedPane="false" SelectedIndex="-1">
                        <HeaderTemplate>
                            <asp:HyperLink ID="lnkMenu" Text='<%# Eval("Name") %>' runat="server" />
                        </HeaderTemplate>
                        <ContentTemplate>
                            <asp:Image ID="imgPath" runat="server" ImageUrl='<%#Eval("Path") %>' Height="80px"
                                Width="80px" />
                        </ContentTemplate>
                    </cc1:Accordion>
                    <hr />
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
    </form>
</body>
</html>

Namespaces

C#

using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

VB.Net

Imports System.Data.SqlClient
Imports System.Data
Imports AjaxControlToolkit

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT TOP 1 Id,Name FROM tblFilesPath", con))
            {
                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                {
                    DataTable dt = new DataTable();
                    da.Fill(dt);
                    rptMenu.DataSource = dt;
                    rptMenu.DataBind();
                }
            }
        }
    }
}

protected void rptMenu_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        HiddenField id = (HiddenField)e.Item.FindControl("hfId");
        Accordion accordionMenu = e.Item.FindControl("AccordionMenu") as Accordion;
        SqlDataSource SqlDataSource1 = new SqlDataSource();
        SqlDataSource1.ID = "sqlDataSource1";
        e.Item.Controls.Add(SqlDataSource1);
        SqlDataSource1.ConnectionString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
        SqlDataSource1.SelectCommand = "SELECT Name,Path FROM tblFilesPath WHERE Id = " + id.Value + "";
        accordionMenu.DataSourceID = "SqlDataSource1";
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString
        Using con As SqlConnection = New SqlConnection(constr)
            Using cmd As SqlCommand = New SqlCommand("SELECT TOP 1 Id,Name FROM tblFilesPath", con)
                Using da As SqlDataAdapter = New SqlDataAdapter(cmd)
                    Dim dt As DataTable = New DataTable()
                    da.Fill(dt)
                    rptMenu.DataSource = dt
                    rptMenu.DataBind()
                End Using
            End Using
        End Using
    End If
End Sub

Protected Sub rptMenu_OnItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim id As HiddenField = CType(e.Item.FindControl("hfId"), HiddenField)
        Dim accordionMenu As Accordion = TryCast(e.Item.FindControl("AccordionMenu"), Accordion)
        Dim SqlDataSource1 As SqlDataSource = New SqlDataSource()
        SqlDataSource1.ID = "sqlDataSource1"
        e.Item.Controls.Add(SqlDataSource1)
        SqlDataSource1.ConnectionString = ConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString
        SqlDataSource1.SelectCommand = "SELECT Name,Path FROM tblFilesPath WHERE Id = " & id.Value & ""
        accordionMenu.DataSourceID = "SqlDataSource1"
    End If
End Sub

Screenshot