Este fórum foi descontinuado. LEIA AQUI e participe da Comunidade BABOO :)

Ir para conteúdo

Mensagem Recomendada

Olá amigos, neste artigo veremos como manter ou re-manter a guia selecionada em jQuery UI Tabs no PostBack em ASP.Net. Imagine a seguinte situação, o plugin jQuery UI Tabs não faz parte do ViewState, portanto, sua seleção de Tab é perdida. Para solucionar isso, vamos precisar guardar tab index selecionado em um campo do tipo Hidden  antes do PostBack e depois buscar o seu valor de volta no carregamento da página e definir a guia selecionada utilizando o índice armazenado no campo oculto. Para manter a jQuery UI Tabs selecionada no PostBack, você vai notar que iremos fazer o uso do controle ASP.Net HiddenField que é definido com o índice da Tab selecionada atual assim que a tab é selecionada usando o select event handler da Tabs jQuery UI.
E, em seguida, na Tab Index selecionada é buscada de volta no campo Hidden  e usando o índice a jQuery Tab é selecionada.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"

rel="stylesheet" type="text/css" />

<script type="text/javascript">

var selected_tab = 1;

$(function () {

var tabs = $("#tabs").tabs({

select: function (e, i) {

selected_tab = i.index;

}

});

selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;

tabs.tabs('select', selected_tab);

$("form").submit(function () {

$("[id$=selected_tab]").val(selected_tab);

});

});

 

</script>

<div id="tabs">

<ul>

<li><a href="#tabs-1">Tab 1</a></li>

<li><a href="#tabs-2">Tab 2</a></li>

<li><a href="#tabs-3">Tab 3</a></li>

</ul>

<div id="tabs-1">

Content 1

</div>

<div id="tabs-2">

Content 2

</div>

<div id="tabs-3">

Content 3

</div>

</div>

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

<asp:Button ID="Button1" runat="server" Text="Fazer PostBack" />

 

Agora, no server side estaremos buscando o valor do campo Hidden da coleção Request.Form e, em seguida, configurá-lo de volta para o campo Hidden . Isso é feito porque os valores set client side não se reflete diretamente na propriedade Value.

C#

protected void Page_Load(object sender, EventArgs e)

{

selected_tab.Value = Request.Form[selected_tab.UniqueID];

}

 

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

selected_tab.Value = Request.Form(selected_tab.UniqueID)

End Sub

 

Aqui o resultado no browser.

 asp.net_jsmaster_3.fw_.png

 

 

E clicando abaixo você poderá fazer o download dos códigos utilizados neste artigo.

 

Download


<%X@nBuRzUm%>

=========================

* nós somos consequência do que pensamos *

** mensagem 100% de Eletrôns recicláveis **

*** Transformando pensamentos em bits ***

Compartilhar este post


Link para o post
Compartilhar em outros sites

×
×
  • Criar Novo...