Melhor forma de fazer um formulário usando ajax
Quero fazer uma página contendo abas em que na primeira vai ter a opção de inclusão, na segunda opção de pesquisa e assim por diante.
Quero utilizar ajax, ou seja o conteudo da aba de pesquisa será carregado apenas quando está for clicada.
Por que se eu quiser carregar o conteudo de todas elas na momento de abertura da pagina pode ficar muito lento
e sem necessidade por que nem sempre o usuário vai querer pesquisar.
Minha dúvida:
A melhor forma é colocar em cada aba uma formulário? O que eu poderia definir no target destes formularios
,ja que o a tag div não é aceita como destino de um target?
Ademilso Peres
Curtidas 0
Respostas
Luiz Maia
13/12/2008
Ademilso,
A melhor forma para fazer o que precisa é usar o controle PANEL, assim você consegue manipulá-los facilmente através das propriedades VISIBLE, e para que sempre que uma ABA for clicada não precisar fazer um refresh, você deve usar um UpdatePanel do AJAX tool kit, desta forma você irá trabalhar com apenas um formulario.
Aguardo seu retorno.
Att.
Luiz Maia
GOSTEI 0
Ademilso Peres
13/12/2008
O controle panel é um controle de servidor eu quero fazer postback apenas na hora de gravar. No Ajax control toolkit existe o controle tabcontrol que seria bem melhor para este caso. Mas a minha dúvida é qual é a melhor forma de montar este formulario.
Eu gostaria que cada aba fosse um formulário mas acredito que isto não seja possivel por que o web form não me da a opção de definir um "target", pelo que estou vendo a unica opção é montar uma web form para todas as abas
mas com isso os meus postbacks vão ficar mais pesados.
Na sua opinião o que devo fazer?
GOSTEI 0
Luiz Maia
13/12/2008
Ademilso,
Já que não quer dar postback ao navegar pelas pelas, a única saida é usar Javascript para isto, no caso terá que montar na "unha". Segue um exemplo:
Para montar as ABAS:
<ul id="ulAbas">
<li onclick="MostrarGuia1();">Teste 1</li>
<li onclick="MostrarGuia2();">Teste 2</li>
<li onclick="MostrarGuia3();">Teste 3</li>
</ul>
Use DIVS para fazer os paineis:
<div id="divGuia1">
Use js para manipulação dos controles:
function MostrarGuia1()
{
document.getElementById("divGuia1").style.visibility = "visible"; // e aqui você esconde as outras. document.getElementById("divGuia2").style.visibility = "hidden"; return(true);
} Caso contrário, não tem outra forma de fazer sem criar um webform para aba/metodo e fazer o round trip em todo clique. Aguardo seu retorno. Abraços Att, Luiz Maia
{
document.getElementById("divGuia1").style.visibility = "visible"; // e aqui você esconde as outras. document.getElementById("divGuia2").style.visibility = "hidden"; return(true);
} Caso contrário, não tem outra forma de fazer sem criar um webform para aba/metodo e fazer o round trip em todo clique. Aguardo seu retorno. Abraços Att, Luiz Maia
GOSTEI 0
Luiz Maia
13/12/2008
Ademilso,
Ainda acho melhor você utilizar o tab container com os tab controls, vendo o codigo fonte gerado pelo mesmo aqui, percebi que é feito exatamente a mesma coisa que te enviei no post anterior, e gerado o mesmo código com divs e etc.
Segue o codigo:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
</div>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">
<cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
<ContentTemplate>
<p> </p>
teste 1
<p> </p>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
<p> </p>
teste 2
<p> </p>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</form>
Segue o codigo fonte gerado:
</div>
<div class="ajax__tab_xp" id="TabContainer1" style="visibility:hidden;">
<div id="TabContainer1_header">
<span id="__tab_TabContainer1_TabPanel1">TabPanel1</span><span id="__tab_TabContainer1_TabPanel2">TabPanel2</span>
</div><div id="TabContainer1_body">
<div id="TabContainer1_TabPanel1" style="display:none;visibility:hidden;">
<p> </p>
teste 1
<p> </p>
</div><div id="TabContainer1_TabPanel2" style="display:none;visibility:hidden;">
<p> </p>
teste 2
<p> </p>
</div>
</div>
</div> Segue a tela: Ao navegar entre as ABAS não ocorre o post, portanto não vejo problemas em usar-lo. Abraços Att, Luiz Maia
</div>
<div class="ajax__tab_xp" id="TabContainer1" style="visibility:hidden;">
<div id="TabContainer1_header">
<span id="__tab_TabContainer1_TabPanel1">TabPanel1</span><span id="__tab_TabContainer1_TabPanel2">TabPanel2</span>
</div><div id="TabContainer1_body">
<div id="TabContainer1_TabPanel1" style="display:none;visibility:hidden;">
<p> </p>
teste 1
<p> </p>
</div><div id="TabContainer1_TabPanel2" style="display:none;visibility:hidden;">
<p> </p>
teste 2
<p> </p>
</div>
</div>
</div> Segue a tela: Ao navegar entre as ABAS não ocorre o post, portanto não vejo problemas em usar-lo. Abraços Att, Luiz Maia
GOSTEI 0
Luiz Maia
13/12/2008
Ola Ademilso,
Testou a solução que lhe passei?
Usando os controles tab control não tem como usar mais de um form, será usado apenas um, mas não existem problema algum nesta solução quanto a performace e etc.
Use os controles Tab Control do Ajax tool kit, dentro de apenas um webform, isto possibilita a navegação entre entre as abas sem dar o post no form, dimuira consideravelmente o número de webforms no seu projeto e atenderá o que você necessita.
Aguardo seu retorno.
Abraços
Att,
Luiz Maia
GOSTEI 0
Luiz Maia
13/12/2008
Ademilson,
Aguardo seu retorno quanto a este chamado também ok?
Abraços
Att
Luiz Maia
GOSTEI 0
Luiz Maia
13/12/2008
Ademilso,
Estou fechando seu chamado por que não obtivemos resposta.
Continuamos a sua disposição para qualquer eventual dúvida.
Abraços
Att,
Luiz Maia
GOSTEI 0