Monday, March 26

Dynamic AjaxTab Panel With Dynamic DropDownList Using Sql Server DataBase

In this article we will see that how to create dynamic tabs.

For making dynamic tabs I will use Ajax Tab Container controls. I will create tabs dynamically, will add controls to each of the tabs dynamically and after that we will read the value of each control on some button click.

Step 1: Open visual studio and create a web site.

STEP 2: Add the refrence to AjaxToolkit.


Now I Have Created One User control as AjaxTabUserControl.ascx as shown in below screenshot

Here is my AjaxTabUserControl.ascx Source Code:-

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AjaxTabUserControl.ascx.cs" Inherits="AjaxTabUserControl" %>
  <asp:ScriptManager ID="ScriptManager1" runat="server">
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

I have Taken one Sql server Database inside App_Data Folder as SwashAjaxTab.mdf and One Link To Sql Classes As DataClasses.dbml as shown in below figure:

Now I have Created Two Table As shown In Below Two Figure:-

Here Is My Code Behind Of My AjaxTabUserControl.ascx:-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

public partial class AjaxTabUserControl : System.Web.UI.UserControl
    AjaxControlToolkit.TabContainer DynamicTab;
    protected void Page_Load(object sender, EventArgs e)
        DataClassesDataContext dc = new DataClassesDataContext();
        var x = GetTabInfo();

        for (int i = 0; i < x.Count(); i++)
            Table tb1 = new Table();
            TableRow tr1 = new TableRow();
            TableCell tc1 = new TableCell();
            var y = GetNewItemInfo(x[i].TabID);

            DropDownList drplist = new DropDownList();
            for (int j = 0; j < y.Count(); j++)

                drplist.DataSource = y;
                drplist.DataTextField = "NewItem1";
    protected void Page_Init(object sender, EventArgs e)
        try { createTab(); }
        catch { }

    private List<TabItem> GetTabInfo()
        using (DataClassesDataContext context = new DataClassesDataContext())
            return (from c in context.TabItems

                    select c).ToList();
    private List<NewItem> GetNewItemInfo(int Tid)
        using (DataClassesDataContext context = new DataClassesDataContext())
            return (from n in context.NewItems where n.TabID==Tid

                    select n).ToList();
    private void createTab()
        DynamicTab = new AjaxControlToolkit.TabContainer();

        DataClassesDataContext dc = new DataClassesDataContext();
        var x = GetTabInfo();

        for (int i = 0; i < x.Count(); i++)
            TabPanel TbPnlCategry = new TabPanel();
            TbPnlCategry.HeaderText = x[i].TabName;
            TbPnlCategry.ID = x[i].TabID.ToString();


Now I have Created One Aspx Page As Default2.aspx and Use that User Control.

Here is my Source Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register src="AjaxTabUserControl.ascx" tagname="AjaxTabUserControl" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
        <uc1:AjaxTabUserControl ID="AjaxTabUserControl1" runat="server" />
Here I have Enter Some Data Into My table as mentioned in below screen shot:

After Running The .aspx page We got The Result As :

Thanks And Regards 

Shibashish Mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

shibashish mohanty