How to Bootstrap tab Active selected tab inside Ajax updatepanel using Jquery,Javascript in asp.net c#

Bootstrap tab Active selected tab inside Ajax updatepanel using Jquery,Javascript 

Bootstrap Tab Active selected tab used to avoid page refresh and easy to access user same page multiple tabs access for the user because using ajax updatapanel using jquery and javascript in Asp.Net C#.

DEMO

Download

HTML PAGE

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="HomePage.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

     <%--Html Table td alignment--%>

     <style type="text/css">

   .td-align-Right

     {   

     text-align:center;   

    }

    .td-align-left

    {

    text-align: match-parent;

         }

 </style>

    <%--Html Table td alignment End --%>

    <%--Gridview Css--%>

    <style type="text/css">

    SGrid {

    width:auto;

    background-color: #fff;

    margin: 5px 0 10px 0;

    border: solid 1px #ff006e;

    border-collapse:collapse;

}

.SGrid th {

    padding: 4px 2px;

    color: #fff;

    background:#f17c7c;

    border-left: solid 1px #ff006e;

    font-size: 0.9em;

    text-align:center !important;

}

.SGrid td {

    padding: 2px;

    border: solid 1px #ff006e;

    color: #717171;

    text-align:center !important;

}

.SGrid .alt { background: #cec4c4 ; }

.SGrid .pgr { background: #424242 ; }

.SGrid .pgr table { margin: 5px 0; }

.SGrid .pgr td {

    border-width: 0;

    padding: 0 6px;

    border-left: solid 1px #f17c7c;

    font-weight: bold;

    color: #f17c7c;

    line-height: 12px;

    background:#fff;

     text-align:center !important;

 } 

.SGrid .pgr a { color:#424242; text-decoration: none; }

.SGrid .pgr a:hover { color:#ff006e; text-decoration: none; }

    </style>

     <%--Gridview Css End --%>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <div>

     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><ContentTemplate>

    <div align="center">

        <br />

                <br />

                    <div class="panel panel-default" style="width: 510px; padding: 5px; margin: 5px">

                        <div id="dvTab">

                            <ul class="nav nav-tabs" role="tablist">

                                <li><a href="#Regtab" aria-controls="Regtab" role="tab" data-toggle="tab">Register</a></li>

                                <li><a href="#Viewtab" aria-controls="Viewtab" role="tab" data-toggle="tab">View</a></li>

                                                              

                            </ul>

                  <div class="tab-content" style="padding-top: 10px">

         <div role="tabpanel" class="tab-pane active" id="Regtab">

                        <div class="table-responsive">

             <table  style="width:auto" class="table table-striped">

                               

                                        <tr><td class="td-align-Right"> <asp:Label ID="Label1"  CssClass="btn btn-labeled btn-default" runat="server" Text="Name"></asp:Label>

                                            </td><td class="td-align-left">

                                                <asp:TextBox ID="txtName" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>

                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>

                                            </td></tr>

                                        <tr><td class="td-align-Right">

                                            <asp:Label ID="Label2" runat="server" CssClass="btn btn-labeled btn-default" Text="Mobile Number"></asp:Label>

                                            </td><td class="td-align-left">

                                                <asp:TextBox ID="txtMobile" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>

                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtMobile" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>

                                                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMobile" ErrorMessage="Invalid Number" ForeColor="#CC3300" ValidationExpression="\d{10}" ValidationGroup="reg"></asp:RegularExpressionValidator>

                                            </td></tr>

                                        <tr><td class="td-align-Right">

                                            <asp:Label ID="Label3" runat="server" CssClass="btn btn-labeled btn-default" Text="Email"></asp:Label>

                                            </td><td class="td-align-left">

                                                <asp:TextBox ID="txtEmail" CssClass="form-control"  runat="server" ValidationGroup="reg"></asp:TextBox>

                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>

                                                <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtEmail" ErrorMessage="Invalid Email" ForeColor="#CC3300" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="reg"></asp:RegularExpressionValidator>

                                            </td></tr>

                                        <tr><td class="td-align-Right">

                                            &nbsp;</td><td>

                                            <asp:Button ID="Button1" CssClass="btn-danger btn-sm"  runat="server" Text="Submit" OnClick="Button1_Click" ValidationGroup="reg" />

&nbsp;<asp:Button ID="Button2" runat="server" CssClass="btn-danger btn-sm" Text="Reset" OnClick="Button2_Click" CausesValidation="False" />

                                                &nbsp;<asp:Button ID="Button3" CssClass="btn-danger btn-sm"  runat="server" Text="View" OnClick="Button3_Click" CausesValidation="False" />

                                            </td></tr>

                                    </table></div>

                                    </div>

                 <div role="tabpanel" class="tab-pane" id="Viewtab">

                  <div class="table-responsive">

                                                                                  

                                        <asp:GridView ID="GridView1" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" CssClass="SGrid" runat="server" AutoGenerateColumns="False">

                     <AlternatingRowStyle CssClass="alt" />

                                            <Columns>

                       <asp:TemplateField HeaderText="Name">

                         <ItemTemplate>

   <asp:Label ID="Label4" runat="server" Text='<%# Eval("name") %>'></asp:Label>

                                                    </ItemTemplate>

                                                </asp:TemplateField>

                         <asp:TemplateField HeaderText="Mobile Number">

                                                    <ItemTemplate>

                             <asp:Label ID="Label5" runat="server" Text='<%# Eval("mobile") %>'></asp:Label>

                                                    </ItemTemplate>

                                                </asp:TemplateField>

                                                <asp:TemplateField HeaderText="Email Id">

                                                    <ItemTemplate>

                                                        <asp:Label ID="Label6" runat="server" Text='<%# Eval("email") %>'></asp:Label>

                                                    </ItemTemplate>

                                                </asp:TemplateField>

                                            </Columns>

                                            <PagerStyle CssClass="pgr" />

                                        </asp:GridView>

                                    </div>

                                    </div>

                                </div>

                            </div>

                        </div>

             <!-- Panel  End-->

                  <asp:HiddenField ID="HiddenTab" runat="server" />

        </div>

</ContentTemplate>

                                </asp:UpdatePanel>

        </div>

         

     <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

         <script type="text/javascript">

             function Tabs() {

                 var Tab = $("#<%=HiddenTab.ClientID%>");

                 var tabId = Tab.val() != "" ? Tab.val() : "Regtab";

                 $('#dvTab a[href="#' + tabId + '"]').tab('show');

                 $("#dvTab a").click(function () {

                     Tab.val($(this).attr("href").substring(1));

                     //replace("#", ""));

                     //substring(1));

                 });

             }

             function pageLoad() {

                 Tabs();                

             }

          </script>

    

   

</asp:Content>

 C# CODING

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page

{

    SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());

    protected void Page_Load(object sender, EventArgs e)

    {

        HiddenTab.Value = "Regtab";

    }

    protected void Button1_Click(object sender, EventArgs e)

    {

        try

        {

            con.Open();

            SqlCommand cmd = new SqlCommand("insert into register values('" + txtName.Text + "','" + txtMobile.Text + "','" + txtEmail.Text + "')", con);

            cmd.ExecuteNonQuery();

            ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('Register Sucessfully')", true);

            GridView1.DataSource = null;

            GridView1.DataBind();

            HiddenTab.Value = "Regtab";

        }

        catch (Exception ex)

        {

            ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);

        }

        finally

        {

            con.Close();

        }

    }

    protected void Button2_Click(object sender, EventArgs e)

    {

        txtName.Text = string.Empty;

        txtMobile.Text = "";

        txtEmail.Text = "";

        txtName.Focus();

        HiddenTab.Value = "Regtab";

    }

    protected void Button3_Click(object sender, EventArgs e)

    {

        GridView();

        HiddenTab.Value = "Viewtab";

    }

    protected void GridView()

    {

        try

        {

            con.Open();

            SqlCommand cmd = new SqlCommand("select * from register", con);

            SqlDataAdapter adp = new SqlDataAdapter(cmd);

            DataSet ds = new DataSet();

            adp.Fill(ds);

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

            {

                GridView1.DataSource = ds;

                GridView1.DataBind();

            }

            else

            {

                ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());

                GridView1.DataSource = ds;

                GridView1.DataBind();

                int columncount = GridView1.Rows[0].Cells.Count;

                GridView1.Rows[0].Cells.Clear();

                // GridView2.FooterRow.Cells.Clear();

                GridView1.Rows[0].Cells.Add(new TableCell());

                GridView1.Rows[0].Cells[0].ColumnSpan = columncount;

                GridView1.Rows[0].Cells[0].Text = "No Records Found";

            }          

            HiddenTab.Value = "Viewtab";

        }

        catch (Exception ex)

        {

            ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);

        }

        finally

        {

            con.Close();

        }

    }

}

First -add - new masterpage and webform - contentplaceholder inside first add the Ajax scriptmanager - panel div for tab

Next  - Add required tabs - tabid - inside of tabpanel add required controls  and tab pane Active for  developer working not user

Next - View Tab i remove pane active alternately you will use toggle 

Next - end of the Ajax updatepanel add the Bootstrap css,plugin Links 

After that show below like register tab only view because tab active and view tab does not show because active tabe remove

Next - add Validationgroup for seprate view and register tabs

Next - Add first tab display page loading time call below like this

Next - View viewtab from register tab call below like this

 Next  - Show popup box  alert use scriptmanager because of  ajax updatepanel used