Call Selected Tab in Code behind in c#

Question

User-2062901272 posted

Hi Experts,

I would like to ask in how can i call check my active tab from code behind.

Please see my client page

 <div class="container">
        <ul id="News" class="nav nav-pills" data-tabs="tabs">
            <li class="active" id="navUser" runat="server"><a data-toggle="tab" href="#User">User</a></li>
            <li id="navDepartment" runat="server"><a data-toggle="tab" href="#Department">Department</a></li>
            <li id="navCategory" runat="server"><a  data-toggle="tab" href="#Category">Category</a></li>
        </ul>
        <div class="tab-content">
            <div id="User" class="tab-pane fade">
                <div class="form-group ">
                    <label for="FullName" class="col-sm-3 control-label ">Full Name</label>
                    <div class="col-sm-3 text-align-left">
                        <p>
                            <input runat="server" type="text" id="FullName" name="FullName" class="form-control" required placeholder="Enter Full Name" />
                        </p>
                    </div>
                </div>
                <div class="form-group ">
                    <label for="Email" class="col-sm-3 control-label ">Email Address</label>
                    <div class="col-sm-3 text-align-left">
                        <p>
                            <input runat="server" type="email" id="Email" name="Email" class="form-control" required placeholder="Enter Email" />
                        </p>
                    </div>
                </div>
                <div class="form-group ">
                    <label for="Email" class="col-sm-3 control-label ">Department</label>
                    <div class="col-sm-3 text-align-left">
                        <p>
                            <select runat="server" name="department" id="department" class="form-control">
                                <option id="mis">MIS</option>
                                <option id="Accounting">Accounting</option>
                                <option id="Hr">Human Resources</option>
                            </select>
                        </p>
                    </div>
                </div>
            </div>
            <div id="Department" class="tab-pane fade">
                <div class="form-group">
                    <label for="Dept" class="col-sm-3 control-label">Department</label>
                    <div class="col-sm-3 text-align-left">
                        <p>
                            <input type="text" id="Dept" name="Dept" class="form-control" />
                            <span class="help-block">Department Name is Required</span>
                        </p>
                    </div>
                </div>
            </div>
            <div id="Category" class="tab-pane fade">
                <div class="form-group">
                    <label for="Cat" class="col-sm-3 control-label">Category</label>
                    <div class="col-sm-3 text-align-left">
                        <p>
                            <input type="text" id="Cat" name="Dept" class="form-control" />
                            <span class="help-block">Category Name is Required</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br />
    <div class="col-sm-offset-3 col-sm-9">
        <asp:Button cssclass="btn btn-primary" ID="saveUser" runat="server" Text="Submit" OnClick="BtnSaveAccount_Click" />
        <button type="reset" class="btn btn-warning" id="resetUser" value="Reset">Reset</button>
    </div>
</asp:Content>

my server side

 protected void BtnSaveAccount_Click(object sender, EventArgs e)
 { 
        SqlConnection con = UserSQLconnection.GlobalConnString;
            try
            {
                switch (ActivePage){
                    case "User":
                         con.Open();
                         SqlCommand cmd = con.CreateCommand();
                         cmd.CommandType =CommandType.StoredProcedure;
                         cmd.Parameters.AddWithValue("@FullName", FullName.Value);
                         cmd.Parameters.AddWithValue("@Email", Email.Value);
                         cmd.Parameters.AddWithValue("@Department", department.Value);
                         cmd.ExecuteNonQuery();
                        break;
                    case "Department":
                        break;

                    case "Category":
                        break;

                }
    

            }
            catch (Exception ex)
            {
                ErrorLogs.SaveErrorLogs(ex.Message, HttpContext.Current.Request.Url.AbsolutePath);
            }
            finally
            {
                if (con != null)
                {
                    con.Dispose();
                    con.Close();
                }
            }
}

Thanks and Best Regards.

Answer 1

User475983607 posted

I would like to ask in how can i call check my active tab from code behind.

You misunderstand the difference between a JavaScript application (Bootstrap) that runs in the the browser and code that runs on the server.   The "active tab" is set by client side code not server code.  One approach is to write JavaScript code that sets a hidden field to the active tab when the user clicks one of the tabs.  Read the hidden field on the post back.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="BootstrapTab.aspx.cs" Inherits="WebFormsDemo.BootstrapTab" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <div class="container">
        <ul id="News" class="nav nav-pills" data-tabs="tabs">
            <li class="active" id="navUser" runat="server"><a data-toggle="tab" href="#User">User</a></li>
            <li id="navDepartment" runat="server"><a data-toggle="tab" href="#Department">Department</a></li>
            <li id="navCategory" runat="server"><a  data-toggle="tab" href="#Category">Category</a></li>
        </ul>
        <div class="tab-content">
            <div id="User" class="tab-pane fade">
                <div class="form-group ">
                    <label for="FullName" class="col-sm-3 control-label ">Full Name</label>
                    <div class="col-sm-3 text-align-left">
                        <p>
                            <input runat="server" type="text" id="FullName" name="FullName" class="form-control" required placeholder="Enter Full Name" />
                        </p>
                    </div>
                </div>
                <div class="form-group ">
                    <label for="Email" class="col-sm-3 control-label ">Email Address</label>
                    <div class="col-sm-3 text-align-left">
                        <p>
                            <input runat="server" type="email" id="Email" name="Email" class="form-control" required placeholder="Enter Email" />
                        </p>
                    </div>
                </div>
                <div class="form-group ">
                    <label for="Email" class="col-sm-3 control-label ">Department</label>
                    <div class="col-sm-3 text-align-left">
                        <p>
                            <select runat="server" name="department" id="department" class="form-control">
                                <option id="mis">MIS</option>
                                <option id="Accounting">Accounting</option>
                                <option id="Hr">Human Resources</option>
                            </select>
                        </p>
                    </div>
                </div>
            </div>
            <div id="Department" class="tab-pane fade">
                <div class="form-group">
                    <label for="Dept" class="col-sm-3 control-label">Department</label>
                    <div class="col-sm-3 text-align-left">
                        <p>
                            <input type="text" id="Dept" name="Dept" class="form-control" />
                            <span class="help-block">Department Name is Required</span>
                        </p>
                    </div>
                </div>
            </div>
            <div id="Category" class="tab-pane fade">
                <div class="form-group">
                    <label for="Cat" class="col-sm-3 control-label">Category</label>
                    <div class="col-sm-3 text-align-left">
                        <p>
                            <input type="text" id="Cat" name="Dept" class="form-control" />
                            <span class="help-block">Category Name is Required</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br />
    <div class="col-sm-offset-3 col-sm-9">
        <asp:Button cssclass="btn btn-primary" ID="saveUser" runat="server" Text="Submit" OnClick="BtnSaveAccount_Click" />
        <asp:HiddenField ID="ActiveTab" runat="server" />
        <button type="reset" class="btn btn-warning" id="resetUser" value="Reset">Reset</button>
    </div>
    <div>
        <asp:Label ID="TestLabel" runat="server" Text=""></asp:Label>
    </div>
    <script>
        $('#News li a').click(function () {
            var id = $(this).text().trim();
            $('#<%=ActiveTab.ClientID%>').val(id);
            console.log(id);
        });
    </script>
</asp:Content>

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

namespace WebFormsDemo
{
    public partial class BootstrapTab : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void BtnSaveAccount_Click(object sender, EventArgs e)
        {
            TestLabel.Text = ActiveTab.Value;
        }
    }
}

There are also ASPX specific controls for thing sort of thing like those found in the AJAX control toolkit.  ASP Web Forms also has the wizard control.  If you want to go with modern APIs like Bootstrap then you need to learn JavaScript programming, jQuery selectors, and HTML web forms basics.

Answer 2

User-2062901272 posted

Hi mgbhard,

Thank you for your reply and explanation.

Thanks and Best Rgars.