"How to maintain or retain tabs in same tab after button click events or postback?" using JQuery in ASP.NET C#

In this post I'll share an details about " How to maintain or retain tabs in same tab after button click events or postback? "

Step 1: you need to download Jquery and JQueryUI Javascript libraries from this site http://jqueryui.com/

Step 2: As usually you can create ASP.NET website from Visual Studio IDE and add Jquery and JqueryUI plugins in the header section of aspx page.

Step 3: Add HiddenField control inside aspx page which is very useful to retain tab in same page

Step 4: Use the HiddenField ID in Jquery code to indicate that CurrentTab Index

Step 5: In code Behind, using Enumerations concept give the tab index values as user defined variable

Step 6: Use the Enum values in every Button click events on different tabs to check that tab could be retained in the same tab

Further, Here I'll give the code details and snap shot pictures,

1. Default.aspx: Design Page

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

<!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>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
 <script src="../../jquery-1.8.3.js"></script>
 <script src="../../ui/jquery.ui.core.js"></script>
 <script src="../../ui/jquery.ui.widget.js"></script>
 <script src="../../ui/jquery.ui.tabs.js"></script>
 <link rel="stylesheet" href="../demos.css">

                  <script type="text/javascript">
                      $(function () {

                          $("#tabContainer").tabs();

                          var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val();

                          $("#tabContainer").tabs({ selected: currTab });

                      });
                  </script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField runat="server" ID="HFCurrTabIndex" />
<div id="tabContainer">
 <ul>
<li><a href="#tab0">First</a></li>
<li><a href="#tab1">Second</a></li>
<li><a href="#tab2">Third</a></li>
</ul>
<div id="tab0">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><asp:Button ID="Button1" runat="server" 
                           Text="First Tab Button" onclick="Button1_Click" /><br /><asp:Label ID="Label1" runat="server" Text=""></asp:Label> 
 </div>
<div id="tab1">
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
    <asp:Button ID="Button2" runat="server" 
                           Text="Second Tab Button" onclick="Button2_Click" /><br /><asp:Label ID="Label2" runat="server"
                               Text=""></asp:Label> 
 </div>
<div id="tab2">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
    <asp:Button ID="Button3" runat="server" 
                           Text="Third Tab Button" onclick="Button3_Click" /><br /><asp:Label ID="Label3" runat="server"
                               Text=""></asp:Label> 

 </div>
</div>
<div class="demo-description">
<b><p>
Retain the Tabs in same tab After post back Button clicks using Jquery ASP.NET</p>
</b>
</div>
</form>
</body>
</html>

2) Default.aspx.cs: Code Behind

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

public partial class development_bundle_demos_tabs_Default : System.Web.UI.Page
{
    private enum TabIndex
    {
        DEFAULT = 0,
        ONE = 1,
        TWO = 2   
     }
    private void SetSelectedTab(TabIndex tabIndex)
    {
        HFCurrTabIndex.Value = ((int)tabIndex).ToString();
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }
    public void clearAll()
    {
        TextBox1.Text = " ";
        TextBox2.Text = " ";
        TextBox3.Text = " ";
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        SetSelectedTab(TabIndex.DEFAULT);
        string str = TextBox1.Text; Label1.Text = str;
        clearAll();
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        SetSelectedTab(TabIndex.ONE);
        string str =TextBox2.Text;  Label2.Text = str;
        clearAll();
    }

    protected void Button3_Click(object sender, EventArgs e)
    {
        SetSelectedTab(TabIndex.TWO);
        string str = TextBox3.Text; Label3.Text = str;
        clearAll();
    } 
}

3) Output Snapshot Pictures

Login and Registration forms in C# windows application with Back end Microsoft SQL Server for data access

In this article, I'm gonna share about how to make login and register form with MS SQL database; 1. Flow Chart Logic 2. Normal Features 3. Form Designs Login Form Design Sign in Form Design Password Retrieve Form 4. Database Design and SQL queries and Stored Procedure Create new Database as "schooldata" create table registerdata ( ID int identity, Username nvarchar(100), Password nvarchar(100), Fullname nvarchar(100), MobileNO nvarchar(100), EmailID nvarchar(100) ) select * from registerdata create procedure regis ( @Username as nvarchar(100), @Password as nvarchar(100), @Fullname as nvarchar(100), @MobileNO as nvarchar(100), @EmailID as nvarchar(100) ) as begin insert into registerdata (Username, Password, Fullname, MobileNO,EmailID) values (@Username, @Password, @Fullname, @MobileNO, @EmailID) ...

Kumaran1987

Search This Blog