DevMedia - Canal .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.

Colocaremos um Update Panel dentro de cada aba.
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).
A medida que o usuário muda de aba, será disparado um evento que será manipulado em javascript
Este por sua vez irá disparar um UpdatePanel que irá atualizar os controles internos para VISIBLE = TRUE.

2. O Código HTML

<cc1:TabContainer ID="tbTesteBlog" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="mudancaAba">
            <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                <HeaderTemplate>
                    Aba 1
                HeaderTemplate>
                <ContentTemplate>
                    Aba 1
                ContentTemplate>
            cc1:TabPanel>
            <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
                <HeaderTemplate>
                    Aba 2
                HeaderTemplate>
                <ContentTemplate>
                    <asp:UpdatePanel ID="upAba2" runat="server">
                        <ContentTemplate>
                            <asp:Button ID="btnDisparaAba2" runat="server" Style="display: none" OnClick="btnDisparaAba2_Click" />
                            <asp:Panel ID="pnlAba2" runat="server" Visible="false">
                                Aba 2
                            asp:Panel>
                        ContentTemplate>
                    asp:UpdatePanel>
                ContentTemplate>
            cc1:TabPanel>
            <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
                <HeaderTemplate>
                    Aba 3
                HeaderTemplate>
                <ContentTemplate>
                    <asp:UpdatePanel ID="upAba3" runat="server">
                        <ContentTemplate>
                            <asp:Button ID="btnDisparaAba3" runat="server" Style="display: none" OnClick="btnDisparaAba3_Click" />
                            <asp:Panel ID="pnlAba3" runat="server" Visible="false">
                                Aba 3
                            asp:Panel>
                        ContentTemplate>
                    asp:UpdatePanel>
                ContentTemplate>
            cc1:TabPanel>
            <cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4">
                <HeaderTemplate>
                    Aba 4
                HeaderTemplate>
                <ContentTemplate>
                    <asp:UpdatePanel ID="upAba4" runat="server">
                        <ContentTemplate>
                            <asp:Button ID="btnDisparaAba4" runat="server" Style="display: none" OnClick="btnDisparaAba4_Click" />
                            <asp:Panel ID="pnlAba4" runat="server" Visible="false">
                                Aba 4
                            asp:Panel>
                        ContentTemplate>
                    asp:UpdatePanel>
                ContentTemplate>
            cc1:TabPanel>
        cc1:TabContainer>

Explicações:

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.
O evento do TabContainer que manipula a troca de abas é: OnClientActiveTabChanged

3. Código JavaScript

function mudancaAba() {
           var index = $find("<%= tbTesteBlog.ClientID  %>").get_activeTabIndex();
           if (index == 1 && !$get("<%= pnlAba2.ClientID %>")) {
               $get("<%= btnDisparaAba2.ClientID %>").click();
           } else if (index == 2 && !$get("<%= pnlAba3.ClientID %>")) {
               $get("<%= btnDisparaAba3.ClientID %>").click();
           } else if (index == 3 && !$get("<%= pnlAba4.ClientID %>")) {
               $get("<%= btnDisparaAba4.ClientID %>").click();
           }
       }

Explicações:

Na linha dois, eu pego o índice da aba selecionada
Em seguida, saio comparado se a aba selecionada é a primeira ou a segunda ou a terceira…
Verifico no “if”, também, se o panel já foi carregado. Se foi, não preciso carregar novamente.
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