AjaxToolkit - ModalPopupExtender

Question

Feliz 2007 a todos!


Bom, eu comecei a usar a tecnologia ajax utilizando o AjaxToolkit, porém ao criar um ModalPopupExtender eu não estou conseguindo executar um código no servidor na hora que clica no botão de ok que deverá fechar o popup. Isto é possível fazer?


OBS.: O botão é o mesmo que atribui a propriedade OkControlID do ModalPopupExtender

Desde já agradeço

Answer 1

Olá Roberto,

Veja se este post do forum internacional de ASP.NET te ajuda.

http://forums.asp.net/thread/1383860.aspx

Qualquer dúvida basta perguntar. :)

Sds,

Diego

Answer 2

Olá Diego Neufert,

A dica valeu, muito obrigado pela sugestão você é d+ xD....

Vou aproveitar e perguntar mais uma coisa: você sabe se tem como eu definir o tamanho da janela do popup vai ter? Porque eu não conseguir colocar pra ocupar um pedaço especifico da tela e nem definir a posição. Ex.: Definir que irá ocupar 50% da tela e vai está posicionada na posição 50px do topo e 30px da esquerda. Isto é possível.

Desde já agradeço - pela anterior e por essa.

Answer 3

Ola Roberto,

Esta parte de tamanho com o modal é um pouco chata mesmo, eu já consegui definir alguma coisa usando uma div dentro do painel de janela do modal para isso. Mesmo assim o extender sempre se posiciona a mesma no meio da tela. Posicionamento absoluto como vc deseja nunca tentei.

O ideal é vc criar um novo tópico para essa sua nova pergunta, com certeza alguem do forum já deve ter encarado esta situação. :)

Até mais,

Diego

Answer 4

Vlw  Diego Neufert irei fazer isso, mas já foi de grande ajuda

Answer 5

Oi Diego,

Você sabe se consigo dentro do modal popup ter um botão que chama uma função no servidor? Eu consegui rodar script - javascript - porém chamar uma função no servidor (vb, c#...) ao clicar em um botão que está no modal popup não consegui.

Construi a página aspx assim:

        <form id="form1" runat="server">
                <atlas:ScriptManager ID="scmPagina" runat="server" />
                <div id="dv_Conteudo">
                        <asp:Button ID="cmdChamaModal" Text="Modal" runat="server" />
                        <asp:Panel ID="pnlModal" CssClass="modalPopup" runat="server">
                                <atlas:UpdatePanel ID="updDados" runat="server">
                                        <ContentTemplate>
                                                <asp:Label ID="lblNome" Text="Nome: " runat="server" />
                                                <asp:TextBox ID="txtNome" TextMode="SingleLine" runat="server" />
                                                <asp:Button ID="cmdPreenche" Text="Preencher" OnClick="cmdPreenche_Click" runat="server" />
                                                <asp:Button ID="cmdOK" Text="OK" runat="server" />
                                                <asp:Button ID="cmdCancel" Text="Cancelar" runat="server" />
                                        </ContentTemplate>
                                </atlas:UpdatePanel>
                        </asp:Panel>
                        <atlasToolkit:ModalPopupExtender ID="mpeModal" runat="server">
                                <atlasToolkit:ModalPopupProperties DropShadow="true" BackgroundCssClass="modalBackground"
                                        OkControlID="cmdOK" PopupControlID="pnlModal" TargetControlID="cmdChamaModal"
                                        CancelControlID="cmdCancel" />
                        </atlasToolkit:ModalPopupExtender>
                </div>
        </form>

e o código da página .vb assim

Partial Class _Default
    Inherits System.Web.UI.Page

        Protected Sub cmdPreenche_Click(ByVal sender As Object, ByVal e As System.EventArgs)
                Me.txtNome.Text = "Roberto de Almeida"
        End Sub
End Class

Desta maneira quando clico no botão cmdPreenche não é executado o evento click no servidor, ou seja, não preenche o nome no textbox. Você tem alguma idéia?

Grato

Answer 6

Ola Roberto,

Tente colocar a propriedade UseSubBehavior como False no botão dentro do Modal.

Sds,

Diego

Answer 7

Oi Diego,

Dessa forma consigo executar uma operação no servidor, porém os botões de Ok e Cancelar não funcionam após clicar no botão para preencher. Não sei o porque disso você tem noção sobre isso?

Answer 8

Manja só, teus botoes de Ok e Cancel estão dentro do UpdatePanel correto?

Esse UpdatePanel recria todos os elementos HTML dentro dele a cada atualização.

O ModalPopup faz a "assinatura" dos eventos click desses botoes de Ok e Cancel quando a pagina é carregada.

Desta forma, quando ocorre uma atualizacao do UpdatePanel, aquele botao Ok que esta lá dentro, apesar de parecer o mesmo, não é mais o mesmo, pq ele foi recriado pelo UpdatePanel.

Como resolver? Coloque os Botoes Ok e Cancel dentro do painel de modal, mas fora do UpdatePanel. :)

Qualquer coisa da um grito. :)

 

Abraço,

Diego

Answer 9

Vlw Diego pela ajuda... Agora está voando baixo...

Answer 10

Maravilha Roberto!!

Qualquer problemas estamos ai para ajudar!

 

Abraço,

Diego

Answer 11

Olá Diego,

Até aqui tudo bem, consigo realizar o processamento no servidor e carregar os meus dados, porém não consigo exibir eles no popup da primeira vez que o popup é exibido.

Olha o meu código:

Página aspx

<head runat="server">

<script type="text/javascript">
function onModal(){
$("cmdCarregaGrid").click();

//É utilizado somente para forçar um post para atualizar os dados

$("cmdAtualizaPanel").click();
}

function onAtualizaPanel(){

//É utilizado somente para forçar um post para atualizar os dados

$("cmdAtualizaPanel").click();
}
</script>

</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="scmPagina" EnablePartialRendering="true" runat="server" />
<div id="dv_Conteudo">
<asp:Button ID="cmdChamaModal" Text="Modal" OnClientClick="onModal();" runat="server" />
<asp:Button ID="cmdAtualizaPanel" Text="Atualizar" runat="server" Style="display: none;" />
<atlas:UpdatePanel ID="updModal" runat="server">
<ContentTemplate>
<asp:Button ID="cmdCarregaGrid" Style="display: none;" runat="server" />
<asp:Panel ID="pnlModal" CssClass="modalPopup" Style="display: none;" runat="server">
<atlas:UpdatePanel ID="updGrid" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtValor" TextMode="SingleLine" />
<asp:Button runat="server" ID="cmdPost" Text="Atualizar" style="display: none;" />
<asp:DataGrid ID="dgrMeuGrid" AutoGenerateColumns="true" runat="server">
<Columns>
<asp:BoundColumn DataField="NOME" HeaderText="NOME" Visible="True" />
</Columns>
</asp:DataGrid>
</ContentTemplate>
</atlas:UpdatePanel>
<asp:Button ID="cmdOK" Text="OK" OnClientClick="onAtualizaPanel();" runat="server" />
<asp:Button ID="cmdCancel" Text="Cancelar" runat="server" />
</asp:Panel>
</ContentTemplate>
</atlas:UpdatePanel>
<atlasToolkit:ModalPopupExtender ID="mpeModal" runat="server">
<atlasToolkit:ModalPopupProperties DropShadow="false" BackgroundCssClass="modalBackground"
OkControlID="cmdOK" PopupControlID="pnlModal" TargetControlID="cmdChamaModal"
CancelControlID="cmdCancel" />
</atlasToolkit:ModalPopupExtender>
</div>
</form>

Arquivo .vb

Protected Sub cmdCarregaGrid_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdCarregaGrid.Click
Me.txtValor.Text = "Roberto"
Me.dgrMeuGrid.DataKeyField = "CDNOME"
Me.dgrMeuGrid.DataSource = Nothing 'Contém a função responsável por carregar os dados do grid retorna um objeto Collection
Me.dgrMeuGrid.DataBind()
End Sub

O que estou fazendo de errado? Ou isso não é possível?

Answer 12

Grande Roberto,

Esta quase lá, basta colocar o cmdAtualizaPanel dentro do updatepanel que deve funcionar.

Sds,

Diego

Answer 13

Diego, fazendo isso não funciona nem na segunda vez (já havia colocado assim).

Mas vlw... Continuo pesquisando e nada de achar... caso achar alguma coisa coloco aqui e se vc souber de algo me ajuda aew q estou precisando mto mesmo

Answer 14

Diego consegui fazer funcionar, dá uma olha no código fiz algumas alterações do último que coloquei porque o meu problema era o seguinte:

Em uma tela eu abro uma outra para o kra selecionar uma opção e depois quando ele volta e clica em salvar abre o modal para exibir outras informações então dá uma olhada no que eu fiz (não sei se é a melhor forma, mas por enquanto deixei assim para entregar e olharei com mais calma e pensarei se há outra forma), mas segue o código abaixo:

aspx
        <script type="text/javascript">
                function onModal(){
                        //$("cmdCarregaGrid").click();
                        $("cmdAtualizaPanel").click();
                        //$("cmdPost").click()
                }
               
                function onAtualizaPanel(){
                        //$("cmdAtualizaPanel").click()
                }
               
                function CarregaGrid(){
                        $("cmdCarregaGrid").click();
                }
               
                function onAbreJanela(){
                        NovaJanela('teste.aspx', 'Teste', '425', '730', 'full');
                }
               
                function NovaJanela() {
//                   código para abrir uma outra janela
}

        <form id="form1" runat="server">
                <atlas:ScriptManager ID="scmPagina" EnablePartialRendering="true" runat="server" />
                <div id="dv_Conteudo">
                        <asp:Button ID="cmdAtualizaPanel" Text="Atualizar" runat="server" Style="display: none;" />
                        <Atlas:UpdatePanel ID="updBotoes" runat="server">
                                <ContentTemplate>
                                        <asp:Button ID="cmdAbrir" OnClientClick="onAbreJanela();" runat="server" Text="Abrir" />
                                        <asp:Button ID="cmdCarregaGrid" Style="display: none;" runat="server" />
                                </ContentTemplate>
                        </Atlas:UpdatePanel>
                        <asp:Panel ID="pnlModal" CssClass="modalPopup" Style="display: none;" runat="server">
                                <atlas:UpdatePanel ID="updGrid" runat="server">
                                        <ContentTemplate>
                                                <asp:TextBox runat="server" ID="txtValor" TextMode="SingleLine" />
                                                <asp:Button runat="server" ID="cmdPost" Text="Atualizar" Style="display: none;" />
                                                <asp:DataGrid ID="dgrMeuGrid" AutoGenerateColumns="true" runat="server">
                                                        <Columns>
                                                                <asp:BoundColumn DataField="NOME" HeaderText="NOME" Visible="True" />
                                                        </Columns>
                                                </asp:DataGrid>
                                        </ContentTemplate>
                                </atlas:UpdatePanel>
                                <asp:Button ID="cmdOK" Text="OK" runat="server" />
                                <asp:Button ID="cmdCancel" Text="Cancelar" runat="server" />
                        </asp:Panel>
                        <asp:Button ID="cmdChamaModal" Text="Modal" runat="server" />
                        <atlasToolkit:ModalPopupExtender ID="mpeModal" runat="server">
                                <atlasToolkit:ModalPopupProperties DropShadow="false" BackgroundCssClass="modalBackground"
                                        OkControlID="cmdOK" PopupControlID="pnlModal" TargetControlID="cmdChamaModal"
                                        CancelControlID="cmdCancel" />
                        </atlasToolkit:ModalPopupExtender>
                </div>
        </form>


.vb
        Protected Sub cmdCarregaGrid_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdCarregaGrid.Click
                Me.txtValor.Text = "Roberto"
                Me.dgrMeuGrid.DataKeyField = "CDNOME"
                Me.dgrMeuGrid.DataSource = Nothing 'Contém a função responsável por carregar os dados do grid retorna um objeto Collection
                Me.dgrMeuGrid.DataBind()
        End Sub

Dessa forma funcionou perfeito