ASP.NET AJAX: Carregando abas sobre demanda

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (1)

Aprenda como carregar abas sobre demanda.

Se tivermos em uma página uma quantidade muito grande de abas, o HTML final vai ser igual a soma do HTML de todas as abas, certo? Sabendo disso, lhes pergunto: Já pensou como é pesado trazer para o usuário uma quantidade enorme de HTML (todas as abas) se o que ele quer inicialmente é apenas manipular o conteúdo de uma ou outra aba, mas não todas, ou seja, trazemos uma página muito pesada desnecessariamente.

Seria bem melhor se inicialmente carregassemos apenas a primeira aba, e caso fosse necessário, as outras abas seriam carregadas sobre demanda. Concordam?

Pois é!!! A intenção deste post é justamente isto. Mostrar como carregar abas sobre demanda em ASP.NET AJAX.

 

1. Como funciona?

A idéia é bastante simples.

  1. Colocaremos um Update Panel dentro de cada aba.
  2. Todos os controles que estam dentro de abas que não são a ativa, serão setados para VISIBLE = FALSE (Isso é necessário para não retornamos para o lado cliente todos os controles de todas as abas).
  3. A medida que o usuário muda de aba, será disparado um evento que será manipulado em javascript
  4. Este por sua vez irá disparar um UpdatePanel que irá atualizar os controles internos para VISIBLE = TRUE.

 

2. O Código HTML
   1: <cc1:TabContainer ID="tbTesteBlog" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="mudancaAba">
   2:             <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
   3:                 <HeaderTemplate>
   4:                     Aba 1
   5:                 HeaderTemplate>
   6:                 <ContentTemplate>
   7:                     Aba 1
   8:                 ContentTemplate>
   9:             cc1:TabPanel>
  10:             <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
  11:                 <HeaderTemplate>
  12:                     Aba 2
  13:                 HeaderTemplate>
  14:                 <ContentTemplate>
  15:                     <asp:UpdatePanel ID="upAba2" runat="server">
  16:                         <ContentTemplate>
  17:                             <asp:Button ID="btnDisparaAba2" runat="server" Style="display: none" OnClick="btnDisparaAba2_Click" />
  18:                             <asp:Panel ID="pnlAba2" runat="server" Visible="false">
  19:                                 Aba 2
  20:                             asp:Panel>
  21:                         ContentTemplate>
  22:                     asp:UpdatePanel>
  23:                 ContentTemplate>
  24:             cc1:TabPanel>
  25:             <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
  26:                 <HeaderTemplate>
  27:                     Aba 3
  28:                 HeaderTemplate>
  29:                 <ContentTemplate>
  30:                     <asp:UpdatePanel ID="upAba3" runat="server">
  31:                         <ContentTemplate>
  32:                             <asp:Button ID="btnDisparaAba3" runat="server" Style="display: none" OnClick="btnDisparaAba3_Click" />
  33:                             <asp:Panel ID="pnlAba3" runat="server" Visible="false">
  34:                                 Aba 3
  35:                             asp:Panel>
  36:                         ContentTemplate>
  37:                     asp:UpdatePanel>
  38:                 ContentTemplate>
  39:             cc1:TabPanel>
  40:             <cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4">
  41:                 <HeaderTemplate>
  42:                     Aba 4
  43:                 HeaderTemplate>
  44:                 <ContentTemplate>
  45:                     <asp:UpdatePanel ID="upAba4" runat="server">
  46:                         <ContentTemplate>
  47:                             <asp:Button ID="btnDisparaAba4" runat="server" Style="display: none" OnClick="btnDisparaAba4_Click" />
  48:                             <asp:Panel ID="pnlAba4" runat="server" Visible="false">
  49:                                 Aba 4
  50:                             asp:Panel>
  51:                         ContentTemplate>
  52:                     asp:UpdatePanel>
  53:                 ContentTemplate>
  54:             cc1:TabPanel>
  55:         cc1:TabContainer>

Explicações:

  1. Temos botões invisíveis (style=”display:none”) dentro de cada Update Panel, porque iremos manipular seus eventos de click para alterar a visibilidade do conteúdo para true.
  2. O evento do TabContainer que manipula a troca de abas é: OnClientActiveTabChanged

 

3. Código JavaScript
   1: function mudancaAba() {
   2:            var index = $find("<%= tbTesteBlog.ClientID  %>").get_activeTabIndex();
   3:            if (index == 1 && !$get("<%= pnlAba2.ClientID %>")) {
   4:                $get("<%= btnDisparaAba2.ClientID %>").click();
   5:            } else if (index == 2 && !$get("<%= pnlAba3.ClientID %>")) {
   6:                $get("<%= btnDisparaAba3.ClientID %>").click();
   7:            } else if (index == 3 && !$get("<%= pnlAba4.ClientID %>")) {
   8:                $get("<%= btnDisparaAba4.ClientID %>").click();
   9:            }
  10:        }

Explicações:

  1. Na linha dois, eu pego o índice da aba selecionada
  2. Em seguida, saio comparado se a aba selecionada é a primeira ou a segunda ou a terceira…
  3. Verifico no “if”, também, se o panel já foi carregado. Se foi, não preciso carregar novamente.
  4. Caso contrario, forço o evento de click do respectivo botão.

3. O Código C#
Para finalizar, devemos manipular os eventos que serão disparados por nossos controles servidor ("btnDisparaAba3_Click", "btnDisparaAba2_Click", etc).
Nesses eventos iremos setar nossos Panels para "visible = true". Apenas Isto!!! Simples não é?

public void btnDisparaAba3_Click(object sender, EventArgs e){
     pnlAba3.Visible = true;
}


Para baixar o código fonte, acessar:

http://cid-2d6d3503299ba131.skydrive.live.com/self.aspx/Artigos/AbasPorDemanda.rar

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?