1. Resources
    2. Code Snippets
    3. AJAX

Ajax Tab Panel in ASP.net

Posted Date: 05 Sep 2013 |Updated: 05-Sep-2013 |Category: AJAX |Author: |Member Level: Gold |Points: 35 |


In this article I'm trying to explain how to use Ajax Tab control and how to manage tab panel information based on tab selection. There are 2 type of templates are available in Tab Panel 1) Header Template 2) Content Template

Ajax Tab Panel:




In this article I'm trying to explain how to use Ajax Tab control and how to manage tab panel information based on tab selection.

Description:



When I implement my project total content is occupy more space. We need to reduce the space and need to display the content neat and looking good in that case I'm choosing Ajax Tab control. Using this I explore my data effectively. Using Tab panel We can split that in "n" no.of panels. And in each and every panel we give different headers and different contents. There are 2 type of templates are available in Tab Panel

1)Header Template is used to display the header
2)Content Template is used to maintain the content od the panel.

TabContainer Properties:



• ActiveTabChanged (Event) – server side event raised when change the tab.
• OnClientActiveTabChanged – client side event raised when change the tab.
• CssClass – using css class we can design the tabpanel
• ActiveTabIndex – This will sued to display the default tab for ex: we set 0 means it's display the 0th tabpanel

TabPanel Properties:



• HeaderText - The text to display in the Tab
• HeaderTemplate - A TemplateInstance.Single Template to use to render the header
• ContentTemplate - A TemplateInstance.Single template to use to render the body.

What i implement in my Code:



In this example I'm displaying employee information and store that information in database and display that in panel wise. In panel1 i display input to enter employee details and in panel2 need to display the employees data. When they Insert employee information then it's redirect to panel1 means employee details information.

Source Code:



Design a page like below

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab_Control.aspx.cs" Inherits="Tab_Control" %>
<%@ Register TagPrefix="ajaxToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" 
            OnActiveTabChanged="TabContainer1_OnActiveTabChanged" width="80%">
            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" >
                <HeaderTemplate>Enter Employee Details</HeaderTemplate>
                <ContentTemplate>
                <table align="center">
                    <tr>
                        <td>
                            Emplpoyee Name : 
                        </td>
                        <td>
                            <asp:TextBox ID="txtname" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Job : 
                        </td>
                        <td>
                            <asp:TextBox ID="txtjob" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Manager : 
                        </td>
                        <td>
                            <asp:TextBox ID="txtmgr" runat ="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Salary : 
                        </td>
                        <td><asp:TextBox ID="txtsal" runat="server">
                                </asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Commission : 
                        </td>
                        <td>
                            <asp:TextBox ID="txtcomm" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Upload Image : 
                        </td>
                        <td>
                            <asp:FileUpload ID="fileuploadimage" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <asp:Button ID="btnInsert" runat="server" Text="Insert" OnClick="btnInsert_Click" />
                        </td>
                    </tr>                    
                 </table>
              </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" >
              <HeaderTemplate>Employee Details
              </HeaderTemplate>
              <ContentTemplate>
                <table align="center">
                    <asp:GridView ID="GV" runat="server" AutoGenerateColumns="False"
                            OnRowEditing="GV_RowEditing" OnRowCancelingEdit="GV_RowCancelingEdit" 
                        OnRowDeleting="GV_RowDeleting" OnRowUpdating="GV_RowUpdating" 
                        CellPadding="4" ForeColor="#333333" GridLines="None" Width="95%" >
                        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                        <EditRowStyle BackColor="#999999" />
                        <FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
                        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#E9E7E2" />
                        <SortedAscendingHeaderStyle BackColor="#506C8C" />
                        <SortedDescendingCellStyle BackColor="#FFFDF8" />
                        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                        <Columns>
                            <asp:BoundField HeaderText="Employee Number" DataField="empno" ReadOnly="True" />
                            <asp:BoundField HeaderText="Employee Name" DataField="ename" />
                            <asp:BoundField HeaderText="Job" DataField="job" />
                            <asp:BoundField HeaderText="Manager" DataField="mgr" />
                            <asp:BoundField HeaderText="HireDate" DataField="hiredate" ReadOnly="True" />
                            <asp:BoundField HeaderText="Salary" DataField="sal" />
                            <asp:BoundField HeaderText="Commission" DataField="comm" />
                            <asp:TemplateField HeaderText="Picture">
                                <ItemTemplate>
                                    <asp:Image ID="img" runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"picture") %>' Width="50px" Height="50px" ImageAlign="Top"  />
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:FileUpload ID="fileuploadimage" runat="server" />
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:CommandField HeaderText="Edit" ShowEditButton="True" />
                            <asp:CommandField HeaderText="Delete" ShowDeleteButton="True" /></Columns>
                    </asp:GridView>
                 </table>
                 </ContentTemplate>
            </ajaxToolkit:TabPanel>
            
        </ajaxToolkit:TabContainer>

    </div>
    </form>
    <p>
         </p>
</body>
</html>



Code Behind:



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;

public partial class Tab_Control : System.Web.UI.Page
{
    SqlConnection con= new SqlConnection("connection string");
    SqlDataAdapter da;
    DataSet ds;
    DataTable dt;
    SqlCommand cmd;
    int DeptNo=1;
    static int no = 0;
    

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!(ViewState["TabIndex"] == null) && (!(sender == null)))
        {
            if (sender.GetType().ToString().Equals("AjaxControlToolkit.TabContainer"))
            {
                ((AjaxControlToolkit.TabContainer)sender).ActiveTabIndex = (int)ViewState["TabIndex"];
            }
        }
        if (!IsPostBack)
        {
            Bind_GV();
        }
    }
    //Tab Changed event
    protected void TabContainer1_OnActiveTabChanged(object sender, EventArgs e)
    {
        ViewState["TabIndex"] = TabContainer1.ActiveTabIndex;
        Bind_GV();
    }


    //Enter Employee Details Tab code
    protected void btnInsert_Click(object sender, EventArgs e)
    {
        if (fileuploadimage.HasFile)
        {
            string str = Server.MapPath(@"Image/");
            fileuploadimage.SaveAs(str + fileuploadimage.FileName);
            string img = fileuploadimage.FileName;
            
            con.Open();            
                     
            //int length = fileuploadimage.PostedFile.ContentLength;
            //byte[] imgbyte = new byte[length];
           
            cmd = new SqlCommand("INSERT INTO EMP(ENAME,JOB,MGR,HIREDATE,SAL,COMM,PICTURE,DEPTNO) VALUES(@ename,@job,@mgr,@hiredate,@sal,@comm,@picture,@deptno)", con);
            cmd.Parameters.AddWithValue("@ename", txtname.Text);
            cmd.Parameters.AddWithValue("@job", txtjob.Text);
            cmd.Parameters.AddWithValue("@mgr", txtmgr.Text);
            cmd.Parameters.AddWithValue("@hiredate",DateTime.Now);
            cmd.Parameters.AddWithValue("@sal", txtsal.Text);
            cmd.Parameters.AddWithValue("@comm", txtcomm.Text);
            cmd.Parameters.AddWithValue("@picture", img);
            cmd.Parameters.AddWithValue("@deptno", DeptNo);
            int n=cmd.ExecuteNonQuery();
            con.Close();
            if (n == 1)
            {
                Response.Write("Record inserted sucessfully");
                txtname.Text = "";
                txtjob.Text = "";
                txtmgr.Text = "";
                txtsal.Text = "";
                txtcomm.Text = "";
            }
            no = 0;
            Bind_GV();
            TabContainer1.ActiveTabIndex = 1;
        }
    }

    //Employee Details tab
    protected void Bind_GV()
    {
        
        con.Open();
        da = new SqlDataAdapter("select empno, ename,job,mgr,hiredate,sal,comm,picture from emp where DEPTNO=" + DeptNo, con);
        dt = new DataTable();
        da.Fill(dt);

        con.Close();
        if (dt.Rows.Count > 0)
        {
            GV.DataSource = dt;
            GV.DataBind();
        }
        else
        {
            DataRow dr = dt.NewRow();
            
            dt.Rows.Add(dr);
            dt.AcceptChanges();
            GV.DataSource = dt;
            GV.DataBind();
            GV.Rows[0].Visible = false;
        }
        if (no == 0)
        {
            int n = dt.Rows.Count;
            for (int i = 0; i < n; i++)
            {
                string file = dt.Rows[i][7].ToString();
                string path = "Image/" + file;
                Image img = (Image)GV.Rows[i].FindControl("img");
                img.ImageUrl = path;
            }
            no = 1;
        }
    }
    protected void GV_RowEditing(object sender, GridViewEditEventArgs e)
    {
        GV.EditIndex = e.NewEditIndex;
        Bind_GV();
    }
    protected void GV_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        GV.EditIndex = -1;
        no = 0;
        Bind_GV();
    }
    protected void GV_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        int EmpNo = Convert.ToInt32(GV.Rows[e.RowIndex].Cells[0].Text);
        FileUpload fu = (FileUpload)GV.Rows[e.RowIndex].FindControl("fileuploadimage");
        TextBox EName = (TextBox) GV.Rows[e.RowIndex].Cells[1].Controls[0];
        TextBox Job = (TextBox)GV.Rows[e.RowIndex].Cells[2].Controls[0];
        TextBox Mgr = (TextBox)GV.Rows[e.RowIndex].Cells[3].Controls[0];
        TextBox sal = (TextBox)GV.Rows[e.RowIndex].Cells[5].Controls[0];
        TextBox comm = (TextBox)GV.Rows[e.RowIndex].Cells[6].Controls[0];
        string imgPath = fu.FileName;
        string img = "Image/" + fu.FileName;
        if (fu.FileName == "")
        {
            img = imgPath;
        }
        else
        {
            fu.SaveAs(Server.MapPath("Image/" + fu.FileName));
        }
        string Updation = "UPDATE EMP SET ENAME='" + EName.Text + "',JOB='" + Job.Text + "',MGR='" + Mgr.Text + "',SAL=" + sal.Text + ",COMM=" + comm.Text + ",PICTURE='" + imgPath + "' WHERE EMPNO=" + EmpNo;
        cmd = new SqlCommand(Updation,con);
        con.Open();
        cmd.ExecuteNonQuery(); 
        con.Close();
        GV.EditIndex = -1;
        no = 0;
        Bind_GV();
    }
    protected void GV_RowDeleting(object sender, GridViewDeleteEventArgs e)
    {
        int EmpNo=Convert.ToInt32(GV.Rows[e.RowIndex].Cells[0].Text);
        string Delete="DELETE FROM EMP WHERE EMPNO="+EmpNo;
        cmd = new SqlCommand(Delete, con);
        con.Open();
        cmd.ExecuteNonQuery();
        con.Close();
        no = 0;
        Bind_GV();
    }
    
}


OutPut:





Conclusion:



Using Tab control we are manage data in tab wise we can easily split the data in panel wise and effectively manage data in panel wise. Hope all are enjoying using this control.

Ajax Tab Panel


Comments

Author: Phagu Mahato10 Sep 2013 Member Level: Gold   Points : 7

Thanks Naveen for this useful resource . We can use below code snippet for example of Ajax Tab Panel in ASP
protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

tabSchool.Enabled = true;

tabClass.Enabled = true;

tabSchoolControl.Enabled = true;

TabCont1.ActiveTabIndex = 0;

GridViewStudentRecord();

GridViewStudentinformation();

}

}



protected void GridViewStudentRecord()

{

DataSet = objStudentRecordBLL.GetStudentRecordData();

if (DataSet.Tables[0].Rows.Count > 0)

{

GridViewStudentRecord.DataSource = DataSet;

GridViewStudentRecord.DataBind();

}



}

protected void GridViewStudentInformation()

{

DataSet = objStudentInformationBLL.GetStudentInformationData();

if (DataSet.Tables[0].Rows.Count > 0)

{

GridViewStudentInformation.DataSource = DataSet;

GridViewStudentInformation.DataBind();

}

}



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
    • Name:
    Email:
    Submit Article
    Return to Article Index

    Top Contributors

    Today
      Last 7 Days

        more...

        About dotnetspider.com

        We believe in providing quality content to our readers. If you have any questions or concerns regarding any content published here, feel free to contact us using the Contact link below.

        Quick Links
        General
        Services

        Digital Marketing by SpiderWorks Technologies, Kochi - India. ©