Maintain Bootstrap Selected Tab on postback in ASP.Net inside Ajax UpdatePanel

来源:转载

Introduction : In this article I am going to demonstrate how to use bootstrap responsive tab in asp.net web application to create tab panels and maintain active tab even across partial postback inside updatepanel. We will also learn how to select any tab from code behind on any event e.g. button click.

In previous article i explained how to Show and Auto close bootstrap alert messages after few seconds in Asp.Net and

Ajax tabcontainer example to create multiple tabs/panels in asp.net

and Call java script function from code behind file in asp.net and Jquery ajax json to call server side functions without any post back and Javascript to enable disable controls on textbox value change or typing text in textbox

Description : By default tab selection is lost whenever a postback occurs inside update panel on ASP.Net page so we need some trick to retain the selected tab even after postback. We can use asp.net hiddenfield control to store the selected tab and after postback we can get the last selected tab value from this hiddenfield control and select that tab again.

Implementation : Let’s create a sample web page to demonstrate the implementation of bootstrap tab and maintain its selection after AJAX UpdatePanel refresh.

Asp.Net C# Section

HTML Source

< html xmlns ="http://www.w3.org/1999/xhtml">

< head id ="Head1" runat ="server">

< title ></ title >

< 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.5/css/bootstrap.min.css">

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

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

< script type ="text/javascript">

function pageLoad() {

maintainSelectedTab();

}

function maintainSelectedTab() {

var selectedTab = $( "# <% = hfTab.ClientID %> " );

var tabId = selectedTab.val() != "" ? selectedTab.val() : "tab1" ;

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

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

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

});

}

</ script >

</ head >

< body >

< form id ="form1" runat ="server">

< div >

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

< asp : UpdatePanel ID ="UpdatePanel1" runat ="server">

< ContentTemplate >

<!-- Panel starts -->

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

< div id ="dvTab">

<!-- Navigation Tabs starts -->

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

< li >< a href ="#tab1" aria-controls ="tab1" role ="tab" data-toggle ="tab"> Tab1

</ a ></ li >

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

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

</ ul >

<!-- Navigation Tabs ends -->

<!-- Tab Panes starts -->

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

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

You are in Tab1

</ div >

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

You are in Tab2

</ div >

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

You are in Tab3

</ div >

</ div >

<!-- Tab Panes ends -->

</ div >

< br />

< asp : Button ID ="btnSubmit" Text ="Submit" runat ="server" OnClick ="btnSubmit_Click" CssClass ="btn btn-primary" />

< asp : Button ID ="btnSelectTab2" Text ="Select Tab2" runat ="server" OnClick ="btnSelectTab2_Click" CssClass ="btn btn-primary" />

< asp : Button ID ="btnSelectTab3" Text ="Select Tab3" runat ="server" OnClick ="btnSelectTab3_Click" CssClass ="btn btn-primary" />

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

</ div >

<!-- Panel ends -->

</ ContentTemplate >

</ asp : UpdatePanel >

</ div >

</ form >

</ body >

</ html >

If you observe above code I have added the required bootstrap js and css file reference. It is required to use the bootstrap tools.

Asp.Net C# Code

protected void btnSubmit_Click( object sender, EventArgs e)

{

//write your code here

}

protected void btnSelectTab2_Click( object sender, EventArgs e)

{

hfTab.Value = "tab2" ;

}

protected void btnSelectTab3_Click( object sender, EventArgs e)

{

hfTab.Value = "tab3" ;

}

Test Case : Select any of the three tab e.g. tab3 and then click on first 'btnSumit' button. It will cause postback() but after postback inside updatepanel the selection i.e. tab3 will be maintained.

Also note that we can also make any tab active through code by setting the desired tab id in the hiddenfield control as i have demonstrated on second and third button.

Asp.Net VB Section

Design the page same as we designed above in asp.net C# section, but replace the 3 buttons HTML with the following

< asp : Button ID ="btnSubmit" Text ="Submit" runat ="server" CssClass ="btn btn-primary" />

< asp : Button ID ="btnSelectTab2" Text ="Select Tab2" runat ="server" CssClass ="btn btn-primary" />

< asp : Button ID ="btnSelectTab3" Text ="Select Tab3" runat ="server" CssClass ="btn btn-primary" />

Asp.Net VB Code

Protected Sub btnSubmit_Click(sender As Object , e As EventArgs ) Handles btnSubmit.Click

'write your code here

End Sub

Protected Sub btnSelectTab2_Click(sender As Object , e As EventArgs ) Handles btnSelectTab2.Click

hfTab.Value = "tab2"

End Sub

Protected Sub btnSelectTab3_Click(sender As Object , e As EventArgs ) Handles btnSelectTab3.Click

hfTab.Value = "tab3"

End Sub

Now over to you:

A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebooklike button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.


分享给朋友:
您可能感兴趣的文章:
随机阅读: