Você está em:
Estatísticas:
1
1
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
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:
- 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
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:
- 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
Conheça os planos de créditos DevMedia e visualize esse post agora mesmo!
