Home > AJAX > AJAX TabContainer with Data from Database

AJAX TabContainer with Data from Database


Hi

try this Example to use AJAX TabContainer with Data from Database

Step1:- create a website and add web page and two classes in App_Code folder in this example i will work on Northwind database with Products and Category tables

step2:- in Category.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
using System.Data.SqlClient;

/// <summary>
/// Summary description for Category
/// </summary>
public class Category
{
    private int categoryID;

    private string categoryName;

    private List<Product> products;

    public int CategoryID
    {

        get { return this.categoryID; }

        set { this.categoryID = value; }

    }

    public string CategoryName
    {

        get { return this.categoryName; }

        set { this.categoryName = value; }

    }

    public List<Product> Products
    {

        get { return this.products; }

        set { this.products = value; }

    }

    public static List<Category> GetCategories()
    {
        List<Category> categories = new List<Category>();
        string connectionString = @"Data Source=.;Initial Catalog=Northwind;Integrated Security=True";
        SqlConnection myConnection = new SqlConnection(connectionString);
        SqlCommand myCommand = new SqlCommand("SELECT CategoryID, CategoryName FROM Categories", myConnection);
        myConnection.Open();
        SqlDataReader reader = myCommand.ExecuteReader();
        while (reader.Read())
        {
            Category category = new Category();
            category.CategoryID = (int)reader["CategoryID"];
            category.CategoryName = (string)reader["CategoryName"];
            categories.Add(category);
        }
        myConnection.Close();
        reader.Close();
        // get the products
        foreach (Category category in categories)
        {
            category.Products = GetProducts(category.CategoryID);
        }
        return categories;
    }

    public static List<Product> GetProducts(int categoryID)
    {

        List<Product> products = new List<Product>();
        string connectionString = @"Data Source=.;Initial Catalog=Northwind;Integrated Security=True";
        SqlConnection myConnection = new SqlConnection(connectionString);
        SqlCommand myCommand = new SqlCommand("SELECT ProductID, ProductName FROM Products WHERE CategoryID = " + categoryID, myConnection);
        myConnection.Open();
        SqlDataReader reader = myCommand.ExecuteReader();
        while (reader.Read())
        {
            Product product = new Product();
            product.ProductID = (int)reader["ProductID"];
            product.ProductName = (string)reader["ProductName"];
            products.Add(product);
        }
        myConnection.Close();
        reader.Close();
        return products;
    }

    public Category()
    {

    }
}

step3:- in Product.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

/// <summary>
/// Summary description for Product
/// </summary>
public class Product
{
    private int productID;

    private string productName;

    public int ProductID
    {
        get { return this.productID; }
        set { this.productID = value; }
    }

    public string ProductName
    {
        get { return this.productName; }
        set { this.productName = value; }
    }

    public Product()
    {

    }
}

Step4:- in Defaul.aspx add AJAX TabContainer and ScriptManager control

and in code behind:-

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            List<Category> categories = Category.GetCategories();
            foreach (Category category in categories)
            {
                GridView gv = new GridView();
                gv.HeaderStyle.BackColor = System.Drawing.Color.Gray;
                gv.DataSource = category.Products;
                gv.DataBind();
                AjaxControlToolkit.TabPanel tab = new AjaxControlToolkit.TabPanel();
                tab.Controls.Add(gv);
                tab.HeaderText = category.CategoryName;
                TabContainer1.Tabs.Add(tab);
                TabContainer1.ActiveTabIndex = 0;
            }
        }
    }

Hope this helps

Good Luck

Advertisements
Categories: AJAX Tags:
  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: