Artigos .NET ASP.NET AJAX: Carregando 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