Sunday, March 30, 2014

Bind Ajax Accordion Control from dynamic data in Asp.Net and C#

This article is based on Ajax Accordion Control, here I am giving an  example how to bind data dynamically with Ajax Accordion Control.

I used here Northwind database, you can download it from here
Download Ajax Control Tool Kit 4.0 from here

Step-1: Drag and drop an Ajax Accordion Control into your .aspx page and follow the below code

.aspx file Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testAccordionControl.aspx.cs"

    Inherits="test_testCheckBoxFilterResult" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .accordion
        {
            width: 400px;
        }
        
        .accordionHeader
        {
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #2E4d7B;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
        }
        
        .accordionHeaderSelected
        {
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #5078B3;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
        }
        .accordionContent
        {
            background-color: #D3DEEF;
            border: 1px dashed #2F4F4F;
            border-top: none;
            padding: 5px;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <table width="700px">
            <tr>
                <td>
                    <asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" CssClass="accordion"
                        HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
                        ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" TransitionDuration="250"
                        SuppressHeaderPostbacks="true" DataSourceID="SqlDataSource1" OnItemDataBound="Accordion1_ItemDataBound">
                        <headertemplate>
                                            <b>
                                         ID:   <asp:Label ID="lblCateID" Text='<%#Bind("CategoryID") %>' runat="server"></asp:Label>&nbsp;
                                         Category:    <asp:Label ID="Label1" Text='<%#Bind("CategoryName") %>' runat="server"></asp:Label>                                             
                                            </b>
                                        </headertemplate>
                        <contenttemplate>
                                            <asp:Literal ID="ltrProducts" runat="server"></asp:Literal>
                                        </contenttemplate>
                    </asp:Accordion>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                        SelectCommand="SELECT * FROM [Categories]" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

.aspx.cs file Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public partial class testAccordionControl : System.Web.UI.Page
{
    private string CategoryID = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
    {
        if (e.ItemType == AjaxControlToolkit.AccordionItemType.Header)
        {
            Label lblCateID = (Label)e.AccordionItem.FindControl("lblCateID");
            CategoryID = lblCateID.Text;
        }

        if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
        {
            Literal ltrProducts = (Literal)e.AccordionItem.FindControl("ltrProducts");

            SqlConnection cnn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString.Trim());
            SqlCommand cmd = new SqlCommand();

            String sqlText = "SELECT [ProductName] FROM [Products] where CategoryID='" + CategoryID + "'";
            cmd.CommandText = sqlText;
            cmd.Connection = cnn;

            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable tbl = new DataTable();
            adapter.Fill(tbl);

            if (tbl.Rows.Count > 0)
            {
                ltrProducts.Text = "";


                foreach (DataRow dr in tbl.Rows)
                {
                    ltrProducts.Text += dr["ProductName"].ToString() + "</br>";
                }

            }
        }

    }

}

Step-2: Run your project and see result as given below..



No comments:

Post a Comment