Publicado em 24 de fev.

Carregar apenas parte da pagina

Salve Galera,

Estou com uma duvida meio basica, vou explicar a estrutura da minha pagina e gostaria da ajuda para como fazer a minha pagina carregar apenas o meio dela como se fosse um IFrame ou frame mas usando o UPdate Panel.

tenho uma page master com um topo e um rodape e o miolo que é o meu ContentPlaceHolder, o menu esta junto do componente do topo, como abaixo

<body>
<div id="pagina">
 <div id="Topo">
 <uc1:Topo ID="Topo1" runat="server" />
 </div>
 <div style="height:inherit;">
 <asp:ContentPlaceHolder runat="server" ID="meio">
 </asp:ContentPlaceHolder>
 </div>
 <div id="rodape" style="height:inherit;">
 <uc2:Rodape ID="Rodape2" runat="server" />
 </div>
</div>
</body>
</html>

A duvida é quando crio uma pagina nova ela carrega tudo, tem um jeito de eu carregar apenas o meio e não recarregar a pagina inteira novamente, espero ter conseguido expressar minha duvida.

Obrigado a todos pela força [é basico, mas é duvida, rs]

Abraços

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Leonardo M· 25 de fev.

Olá.

Procure por carregar página dentro de ModalPopupExtender ou load page inside ModalPopupExtender.

Acredito que seja isso que você está procurando.

Abs.

filipescoob· 27 de fev.

Bom Leonardo,

Se eu entendi bem minha pagina iria carregar em um popUp, e não é isso que eu gostaria.

Imagine que tenho a seguinte pagina abaixo

------------------------------------------------------

....................................................

..................TOPO DA PAGINA....................

....................................................

------------------------------------------------------

.<usuario logado>.......MENU........................

------------------------------------------------------

....................................................

...............INFORMAÇÕES DA PAGINA................

.........APENAS AQUI EU QUERO RE-CARREGAR..........

....................................................

------------------------------------------------------

..................RODAPE DA PAGINA..................

------------------------------------------------------

Quero sempre carregar apenas o meio como se fosse um IFrame, e não usar um PopUp.

Rafael Mitsunaka· 27 de fev.

você pode fazer com user control, da o post somente dentro do controle.

filipescoob· 28 de fev.

Rafael,

Tens um exemplo basico ? Ou apenas uma descrição [um norte] que eu deva seguir ?

filipescoob· 5 de mar.

Galera, foi quase...

Fiz uma gambiarra e quase funcionou. Fiz o seguinte:

Criei um objeto literal na pagina e conforme preciso jogo um HTML nele, porem neste HTML carregado (e funcionou direitinho visualmente) tem uma função JQuery, porem não funciona, não sei mais o que fazer pois não aparece no codigo fonte o HTML que imprimi no literal.

Alguem tem uma ideia ?

filipescoob· 6 de mar.

Galera,

Não entendi o porque o ASP.NET não consegue chamar a função por estar dentro do literal então hoje criei outra coisa.

Estou usando o innerHTML para carregar o conteudo dinamico em um DIV porem mesmo assim não consigo executar uma chamada no JQuery.

A função "Imprime", imprime o conteudo dinamico (uma table gerada com alguns agrupamentos) porem tem uma chamada de link com o id (AbreBaixa), mas ela não consegue abrir a função JQuery, porem se criar um link na propria pagina [não dinamico] com este id funciona direitinho.

Vocês tem ideia do porque ?

protected void Imprime(string tabela)
{

 string script = @"document.getElementById('Imobiliaria').innerHTML ='" + tabela + "';";
 ScriptManager.RegisterStartupScript(this, this.GetType(), "Imprime", script, true);
 }

<script type="text/javascript">
$(document).ready(function() {

 var dialogOpts = {
 modal: true,
 bgiframe: true,
 autoOpen: false,
 height: 500,
 width: 800,
 draggable: true,
 resizeable: false
 }

 $("#dialog").dialog(dialogOpts);
 $('.AbreBaixa').click(function() {
 $("#dialog").load($(this).attr('href'));
 $('#dialog').dialog({ title: $(this).attr('title') });
 $("#dialog").dialog('open');
 return false
 });

});
</script>

Como monto os links

 if (link == 1)
 {
 sGrupo.Append("<tr><td colspan=\"" + Colspan + "\" class=\"Grupo2 font1\"><a href=\"BaixaManualDetalhe.aspx?idImobiliaria=" + item[3].ToString() + "\" id=\"AbreBaixa\" class=\"AbreBaixa\">" + item[1].ToString() + "</a></td></tr> ");
 }
 else
 {
 sGrupo.Append("<tr><td colspan=\"" + Colspan + "\" class=\"Grupo2 font1\">" + item[1].ToString() + "</td></tr> ");
 }

quintelab· 7 de mar.

Por que não pesquisa pela classe do objeto ao invés do ID?

Abraços...

filipescoob· 7 de mar.

Ola Quintelab,

Ja tentei pelos dois metodos e não foi possivel.

Segue exemplo em html, se este html abaixo for colocado no codigo da pagina funciona, porem se for gerado automatico ele não funciona.

Sera que é porque ele esta sendo criado dentro de um div chamado imobiliaria, no jquery eu teria que referenciar os 2 codigos como no css exemplo "#imobiliaria #AbreBaixa" ?

 <table width="98%" id="Table1" align="center" cellpadding="0" cellspacing="1" class="tabela">
 <tr class="topo font1">
 <td class="topo font1" width="24%">Contrato</td>
 <td class="topo font1" width="24%">Proposta</td>
 <td class="topo font1" width="24%">Provisionado em</td>
 <td class="topo font1" width="24%">Valor Pago</td>
 </tr>
 <tr>
 <td colspan="4"class="Grupo1 font1">Dezembro de 2011</td></tr>
 <tr>
 <td colspan="4" class="Grupo2 font1"><a href="BaixaManualDetalhe.aspx?idImobiliaria=25" id="A1" class="AbreBaixa">NEGOCIOS LTDA</a></td></tr>
 <tr>
 <td class="l1 font2" width="24%">1012201790</td>
 <td class="l1 font2" width="24%">812128</td>
 <td class="l1 font2" width="24%">16/02/2012</td>
 <td class="l1 font2" width="24%">3767,85</td>
 </tr>
 <tr>
 <td colspan="3" class="Grupo1Rodape LabelSoma font2">Sub Total:</td>
 <td class="Grupo1Rodape Soma font2">R$ 3767,85</td>
 </tr>
 <tr>
 <td class="rodape font2" colspan="3">Total Geral</td>
 <td class="rodape font2">R$ 3767,85</td>
 </tr>
 </table>
 <table align="center" border="0" cellspaccing="0" cellspadding="0" width="98%">
 <tr>
 <td class="font4" style="text-align:right; padding-right:10px;" width="93%">Total de Registros: </td>
 <td class="font4" style="text-align:right; padding-right:5px;" width="3%">1</td>
 </tr>
 </table>

>
Por que não pesquisa pela classe do objeto ao invés do ID?

Abraços...

Ao que me parece o problema esta pro criar em tempo de execução, nem quando se puxa o codido fonte da aplicação (depois de criado) aparece a tabela.

Tentei com esta função tambem porem este abre o PopUp mas não carrega a pagina nele.

 function AbreBaixa(link, titulo) {
 var dialogOpts = {
 modal: true,
 bgiframe: true,
 autoOpen: false,
 height: 500,
 width: 800,
 draggable: true,
 resizeable: false
 }
 $("#dialog").dialog(dialogOpts);
 $("#dialog").load($(this).attr(link));
 $("#dialog").dialog({ title: $(this).attr(titulo) });
 $("#dialog").dialog('open');
 return false;
 }

quintelab· 7 de mar.

Mas para localizar um objeto através de sua classe CSS não é utilizando # e sim .

Abraços...

filipescoob· 7 de mar.

>
Mas para localizar um objeto através de sua classe CSS não é utilizando # e sim .

Abraços...

Tentei Mas não funcionou, agora de tarde criei um componente e carreguei ele na pagina atraves do PlaceHolder [com o auxilio e a dica de um amigo aqui do trabalho], porem ele funcionou só o primeiro.

Pensei que fosse por conta do id, então identifiquei o todos os IDs [dos divs e do script] mesmo assim não funcionou.

Na verdade ele só consegue identificar com ID