Como abrir o ModalPopup do Ajax por evento de um GridView

sexta-feira, 23 de outubro de 2009 5:09

LuizIta

Entrar para Votar

Olá Pessoal tenho o seguinte source.aspx onde nele se há um gridview

<%@ Page Language="C#" MasterPageFile="~/minhamaster.Master" AutoEventWireup="true" CodeBehind="clubes.aspx.cs" Inherits="siteesportivoadmin.clubes" Title="Untitled Page" ViewStateEncryptionMode="Always" EnableViewStateMac="true" ValidateRequest="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"><div style="text-align:justify">
        
        <fieldset style="padding-left:10px;padding-right:10px; margin-left:15px; width:530px; font-weight: normal; font-size: 9pt; font-family: verdana;"><legend style="font-weight: bold; font-size: 11pt; color: #333333; font-family: Arial">Cadastro de Times</legend>
            <div style="text-align: left">
                <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
                    <tr>
                        <td colspan="4">
                          
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                             
</td>
                    </tr>
                    <tr>
                        <td colspan="4">
                           
</td>
                    </tr>
                    <tr>
                        <td colspan="4">
                        
</td>
                    </tr>
                    <tr>
                        <td style="width: 98px" colspan="2">
                        </td>
                        <td style="width: 100px" colspan="2">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <asp:GridView ID="grdTimes" runat="server" AutoGenerateColumns="False" 
                                DataSourceID="dsTimes" DataKeyNames="IdTime" 
                                onselectedindexchanged="grdTimes_SelectedIndexChanged">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:LinkButton ID="lnkEdit" runat="server" CommandName="Select">Editar</asp:LinkButton>
                                            &nbsp;/&nbsp;
                                            <asp:LinkButton ID="lnkDelete" runat="server" CommandName="Delete" 
                                                onclientclick="returnconfirm('Você tem Certeza que Deseja Excluir este Time?')">Deletar</asp:LinkButton>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="Time" HeaderText="Time" 
                                        SortExpression="Time" />
                                    <asp:BoundField DataField="Campeonatos" HeaderText="Campeonatos" 
                                        SortExpression="Campeonatos" />
                                    <asp:BoundField DataField="Img110110" HeaderText="Img110110" 
                                        SortExpression="Img110110" />
                                    <asp:BoundField DataField="Img7676" HeaderText="Img7676" 
                                        SortExpression="Img7676" />
                                    <asp:BoundField DataField="Img5555" HeaderText="Img5555" 
                                        SortExpression="Img5555" />
                                </Columns>
                                <EmptyDataTemplate>
                                    Ainda não há <b>TIMES</b> Cadastrados
                                </EmptyDataTemplate>
                            </asp:GridView>
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server" Visible="false">
                              <ContentTemplate>
                              
                                  <asp:Panel ID="StartEditPopup" runat="server" Height="0px" Width="0px" CssClass="calendarstyle">
                                      <asp:UpdatePanel ID="StartEditUpdate" runat="server">
                                        <ContentTemplate>
                                        <asp:FormView ID="frmEdit" runat="server" DataSourceID="dsTimesUpdate" 
                                DefaultMode="Edit" onitemupdated="frmEdit_ItemUpdated">
                                <EditItemTemplate>
                                    Time:
                                    <asp:TextBox ID="txtTime" runat="server" Text='<%# Bind("Time") %>' 
                                        ValidationGroup="Edit" />
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="None" ErrorMessage="O Campo <b>Time</b> é de Preenchimento Obrigatório!!!" ControlToValidate="txtTime" ValidationGroup="Edit"></asp:RequiredFieldValidator><asp:RegularExpressionValidator id="revTime" 
		runat="server" ErrorMessage="O Campo <b>Time</b> contém caracteres inválidos!!!<br/>Favor digitar novamente, mínimo 4 máximo 40 caracteres válidos." 
		Display="None" ValidationExpression="[\d_a-zA-Z]{4,30}" ControlToValidate="txtTime" ValidationGroup="Edit"></asp:RegularExpressionValidator>
                                    <br />
                                   Campeonato 1:<asp:DropDownList ID="ddlCampeonato1" runat="server" 
                                        style="font-weight: bold; font-size: 8pt; color: #ffffff; background-color: #000000" 
                                        >
                            </asp:DropDownList>
                                    <br />
                                    Campeonato 2:<asp:DropDownList ID="ddlCampeonato2" runat="server" Style="font-weight: bold; font-size: 8pt;
                                color: #ffffff; background-color: #000000" >
                            </asp:DropDownList>
                                    <br />
                                     Campeonato 3:<asp:DropDownList ID="ddlCampeonato3" runat="server" Style="font-weight: bold; font-size: 8pt;
                                color: #ffffff; background-color: #000000" >
                            </asp:DropDownList>
                            <br />    Campeonato 4:<asp:DropDownList ID="ddlCampeonato4" runat="server" Style="font-weight: bold; font-size: 8pt;
                                color: #ffffff; background-color: #000000">
                        </asp:DropDownList> <br />
                                    Img110110:
                                    <asp:TextBox ID="Img110110TextBox" runat="server" 
                                        Text='<%# Bind("Img110110") %>' ValidationGroup="Edit" />
                                    <br />
                                    Img7676:
                                    <asp:TextBox ID="Img7676TextBox" runat="server" Text='<%# Bind("Img7676") %>' 
                                        ValidationGroup="Edit" />
                                    <br />
                                    Img5555:
                                    <asp:TextBox ID="Img5555TextBox" runat="server" Text='<%# Bind("Img5555") %>' 
                                        ValidationGroup="Edit" />
                                    <br />
                                    <asp:Button ID="UpdateButton" runat="server" CausesValidation="True" 
                                        CommandName="Update" Text="Atualizar" ValidationGroup="Edit" />
                                    &nbsp;<asp:Button ID="UpdateCancelButton" runat="server" 
                                        CausesValidation="False" CommandName="Cancel" Text="Cancelar" 
                                        ValidationGroup="Edit" />
                                </EditItemTemplate>
                                <InsertItemTemplate>
                                    
                                </InsertItemTemplate>
                                <ItemTemplate>
                                    
                                </ItemTemplate>
                            </asp:FormView>
                                        </ContentTemplate>
                                      </asp:UpdatePanel>
                                          <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
                                  </asp:Panel>
                              </ContentTemplate>
                            </asp:UpdatePanel>  
                             
                            <cc1:ModalPopupExtender ID="ModalPopupExtender1"  runat="server" TargetControlID="TextBox1" BackgroundCssClass="modalBackGround" CancelControlID="ButtonCancel" PopupControlID="StartEditPopup" DropShadow="true">
                            </cc1:ModalPopupExtender>
                           
                          
                            <asp:ObjectDataSource ID="dsTimes" runat="server" DeleteMethod="DeleteTimes" 
                                InsertMethod="InsertTimes" SelectMethod="SelectTimes" TypeName="CorinthianosTimes.corinthianosadmin.Times">
                                <DeleteParameters>
                                    <asp:Parameter Name="IDTime" Type="Int32" />
                                </DeleteParameters>
                                <InsertParameters>
                                    <asp:Parameter Name="time" Type="String" />
                                    <asp:Parameter Name="campeonatos" Type="String" />
                                    <asp:Parameter Name="img110110" Type="String" />
                                    <asp:Parameter Name="img7676" Type="String" />
                                    <asp:Parameter Name="img5555" Type="String" />
                                </InsertParameters>
                            </asp:ObjectDataSource>
                            <asp:ObjectDataSource ID="dsTimesUpdate" runat="server" 
                                SelectMethod="SelecTimesById" 
                                TypeName="CorinthianosTimes.corinthianosadmin.Times" UpdateMethod="UpdateTimes">
                                <UpdateParameters>
                                   <asp:ControlParameter ControlID="grdTimes" Name="IDTime" />
                                 </UpdateParameters>
                                <SelectParameters>
                                    <asp:ControlParameter ControlID="grdTimes" Name="IDTime" 
                                        PropertyName="SelectedValue" Type="Int32" />
                                </SelectParameters>
                            </asp:ObjectDataSource>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 98px" colspan="2">
                        </td>
                        <td style="width: 100px" colspan="2">
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 98px" colspan="2">
                        </td>
                        <td style="width: 100px" colspan="2">
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 98px" colspan="2">
                        </td>
                        <td style="width: 100px" colspan="2">
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 98px">
                        </td>
                        <td style="width: 98px">
                        </td>
                        <td style="width: 100px" align="right">
                            </td>
                        <td style="width: 100px" align="right">
                            <asp:Button ID="btnTime" runat="server" Text="Cadastrar Time" /></td>
                    </tr>
                </table><cc1:ValidatorCalloutExtender
         ID="ValidatorCalloutExtender1"
         runat="server"
         CloseImageUrl="icones/btfecharcalloubluegradi.bmp"
         TargetControlID="RequiredFieldValidator1"
         HighlightCssClass="highlight"
         
         />
            </div>
        </fieldset>
        
        
    </div>
</asp:Content>

No caso o ModalPopupExtender que eu peguei de um exemplo de video na web tem como targetcontrolid um TextBox que quando clica nele aparece a janela modal e qdo clica no botão cancel ele fecha

O que eu preciso é quando clico no linkbutton do Template do Grid lnkEdit que dispare a janela do ajaxmodalpopup startEditpopup e qdo o frmview que está dentro da janela for clicado os buttons

   <asp:Button ID="UpdateButton" runat="server" CausesValidation="True" 
                                        CommandName="Update" Text="Atualizar" ValidationGroup="Edit" />
                                    &nbsp;<asp:Button ID="UpdateCancelButton" runat="server" 
                                        CausesValidation="False" CommandName="Cancel" Text="Cancelar" 
                                        ValidationGroup="Edit" />

Que seja fechada a mesma janela como faço isso baseado nas minhas duvidas ácima no ajaxmodalpopupextender via source ou via codigo e como ficaria no caso haveria algum exemplo para me passar

Fico no aguardo e desde já agradeço

LADEF

Todas as Respostas

sexta-feira, 23 de outubro de 2009 13:50

Leandro.Mello

Entrar para Votar

Fala!

Cara, o GridView possui um evento chamado 'RowEditing'. Ele é disparado quando o usuário clica no botão Edit.

Se a chamada para a ModalPopup for server side (nunca usei esse controle), você pode fazer neste evento.
Caso ela seja client side, a solução seria você customizar o botão Edit para executar sua função no click. Ex.:

                                    <asp:TemplateField><br/>
                                        <ItemTemplate><br/>
                                            <asp:LinkButton ID="lnkEdit" runat="server" <strong>OnClick="AbreModalPopup()"</strong>
 CommandName="Update">Editar</asp:LinkButton><br/>
                                            &nbsp;/&nbsp;<br/>
                                        </ItemTemplate><br/>
                                    </asp:TemplateField><br/>

Abs

Não esqueça de marcar a resposta como útil!
--
Learn! Think! Produce!
Leandro Mello

sexta-feira, 23 de outubro de 2009 15:43

LuizIta

Entrar para Votar

Leandro boa tarde aqui tem um link de video que demonstra o funcionamento deste Ajax Control Tool Kit - Modal Popup

http://www.asp.net/learn/ajax-videos/video-85.aspx

No caso o Ajax modal popup como demonstra o video controla os updates panels e buttons que mostrei no source acima baseado nesta tag do controle

 <cc1:ModalPopupExtender ID="ModalPopupExtender1"  runat="server" TargetControlID="TextBox1" BackgroundCssClass="modalBackGround" CancelControlID="ButtonCancel" PopupControlID="StartEditPopup" DropShadow="true">
                            </cc1:ModalPopupExtender>

Só que não sei como adaptá-lo para no button linkbutton do Edit que está dentro de um template do gridview para abrir a Janela Modal deste controle

<asp:GridView ID="grdTimes" runat="server" AutoGenerateColumns="False" 
                                DataSourceID="dsTimes" DataKeyNames="IdTime" 
                                onselectedindexchanged="grdTimes_SelectedIndexChanged">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:LinkButton ID="lnkEdit" runat="server" CommandName="Select">Editar</asp:LinkButton>
                                            &nbsp;/&nbsp;
                                            <asp:LinkButton ID="lnkDelete" runat="server" CommandName="Delete" 
                                                onclientclick="returnconfirm('Você tem Certeza que Deseja Excluir este Time?')">Deletar</asp:LinkButton>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="Time" HeaderText="Time" 
                                        SortExpression="Time" />
                                    <asp:BoundField DataField="Campeonatos" HeaderText="Campeonatos" 
                                        SortExpression="Campeonatos" />
                                    <asp:BoundField DataField="Img110110" HeaderText="Img110110" 
                                        SortExpression="Img110110" />
                                    <asp:BoundField DataField="Img7676" HeaderText="Img7676" 
                                        SortExpression="Img7676" />
                                    <asp:BoundField DataField="Img5555" HeaderText="Img5555" 
                                        SortExpression="Img5555" />
                                </Columns>
                                <EmptyDataTemplate>
                                    Ainda não há <b>TIMES</b> Cadastrados
                                </EmptyDataTemplate>
                            </asp:GridView>

E não sei como interno ao FormView abaixo, seja ao clicar no UpdateButton ou no UpdateCancelButton que está dentro do EditItemTemplate do FormView fazê-lo fechar a janela

<asp:FormView ID="frmEdit" runat="server" DataSourceID="dsTimesUpdate" 
                                DefaultMode="Edit" onitemupdated="frmEdit_ItemUpdated">
                                <EditItemTemplate>
                                    Time:
                                    <asp:TextBox ID="txtTime" runat="server" Text='<%# Bind("Time") %>' 
                                        ValidationGroup="Edit" />
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="None" ErrorMessage="O Campo <b>Time</b> é de Preenchimento Obrigatório!!!" ControlToValidate="txtTime" ValidationGroup="Edit"></asp:RequiredFieldValidator><asp:RegularExpressionValidator id="revTime" 
		runat="server" ErrorMessage="O Campo <b>Time</b> contém caracteres inválidos!!!<br/>Favor digitar novamente, mínimo 4 máximo 40 caracteres válidos." 
		Display="None" ValidationExpression="[\d_a-zA-Z]{4,30}" ControlToValidate="txtTime" ValidationGroup="Edit"></asp:RegularExpressionValidator>
                                    <br />
                                   Campeonato 1:<asp:DropDownList ID="ddlCampeonato1" runat="server" 
                                        style="font-weight: bold; font-size: 8pt; color: #ffffff; background-color: #000000" 
                                        >
                            </asp:DropDownList>
                                    <br />
                                    Campeonato 2:<asp:DropDownList ID="ddlCampeonato2" runat="server" Style="font-weight: bold; font-size: 8pt;
                                color: #ffffff; background-color: #000000" >
                            </asp:DropDownList>
                                    <br />
                                     Campeonato 3:<asp:DropDownList ID="ddlCampeonato3" runat="server" Style="font-weight: bold; font-size: 8pt;
                                color: #ffffff; background-color: #000000" >
                            </asp:DropDownList>
                            <br />    Campeonato 4:<asp:DropDownList ID="ddlCampeonato4" runat="server" Style="font-weight: bold; font-size: 8pt;
                                color: #ffffff; background-color: #000000">
                        </asp:DropDownList> <br />
                                    Img110110:
                                    <asp:TextBox ID="Img110110TextBox" runat="server" 
                                        Text='<%# Bind("Img110110") %>' ValidationGroup="Edit" />
                                    <br />
                                    Img7676:
                                    <asp:TextBox ID="Img7676TextBox" runat="server" Text='<%# Bind("Img7676") %>' 
                                        ValidationGroup="Edit" />
                                    <br />
                                    Img5555:
                                    <asp:TextBox ID="Img5555TextBox" runat="server" Text='<%# Bind("Img5555") %>' 
                                        ValidationGroup="Edit" />
                                    <br />
                                    <asp:Button ID="UpdateButton" runat="server" CausesValidation="True" 
                                        CommandName="Update" Text="Atualizar" ValidationGroup="Edit" />
                                    &nbsp;<asp:Button ID="UpdateCancelButton" runat="server" 
                                        CausesValidation="False" CommandName="Cancel" Text="Cancelar" 
                                        ValidationGroup="Edit" />
                                </EditItemTemplate>
                                <InsertItemTemplate>
                                    
                                </InsertItemTemplate>
                                <ItemTemplate>
                                    
                                </ItemTemplate>
                            </asp:FormView>

Estou trabalhando com o VS2008 pro Edition em Asp.Net WebApplication Project com .Net Framework 3.5 fico no aguardo caso você ou alguem possa me solucionar esta duvida e desde já agradeço

LADEF

sexta-feira, 23 de outubro de 2009 16:26Leandro.Mello

0
Entrar para Votar
Bom, acho que não entendi então...

Você quer que "quem" dispare a ModalPopup ? O botão Edit ou o TextBox?

Estou fazendo uns testes aquii...
Não esqueça de marcar a resposta como útil!
--
Learn! Think! Produce!
Leandro Mello
- Responder
- Citação

sexta-feira, 23 de outubro de 2009 17:51

LuizIta

Entrar para Votar

Leandro o que eu quero é o seguinte que o Botão Edit do Template do GridView dispare o ModalPopup abrindo a Janela que conterá o FormView interno a ela, neste form view tem dois botões, UpdateButton e UpdateCancelButton dentro do EditItemTemplate do FormView(como demonstrado abaixo) que quando disparado o evento de qq hum deles ou os mesmos clicados fechem a mesma Janela ModalPopup

<asp:Button ID="UpdateButton" runat="server" CausesValidation="True" 
                                        CommandName="Update" Text="Atualizar" ValidationGroup="Edit" />
                                    &nbsp;<asp:Button ID="UpdateCancelButton" runat="server" 
                                        CausesValidation="False" CommandName="Cancel" Text="Cancelar" 
                                        ValidationGroup="Edit" />
                                </EditItemTemplate>

Fico no aguardo dos testes e caso possa me ajudar desde já agradeço

LADEF

sexta-feira, 23 de outubro de 2009 19:58Leandro.Mello

0
Entrar para Votar
Bom cara, é o seguinte:

Para você abrir a ModalPopup quando clicar no Edit do GridView, faça o seguinte:
```
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        ModalPopupExtender1.Show();
        e.Cancel = true;
    }
```
Para fechar a janela, você pode usar a mesma técnica.
```
ModalPopupExtender1.Hide();
```
Talvez isso não funcione certinho para o seu caso, para resolver, use javascript. O nome do método é a mesma coisa, tipo, controle.Show().
No Button UpdateButton, coloque no evento OnClientClick uma função que pegue o ModalPopup e execute o método Hide()

Não sei se fui claro, qualquer coisa é só falar. Se quiser saber mais, faça o download dos sources do AjaxControlToolKit. Lá tem um exemplo para cada controle. http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33804

abs
Não esqueça de marcar a resposta como útil!
--
Learn! Think! Produce!
Leandro Mello
- Responder
- Citação
terça-feira, 27 de outubro de 2009 4:43LuizIta

0
Entrar para Votar
Leandro não deu certo com o UpdatePanel pois ele não reconhece o controle do lnkEdit e se ponho ele dentro do templatefield do GridView ele não reconhece o FormView e vice versa baseado no que vc me passou no cliente site haveria algum exemplo em JavaScript que pude-se sêr adaptado e que chama-se via client-side no linkedit o formview cujo ID é frmEdit, sendo que por default o frmEdit tem que estar como invisivel e qdo apenas clicar no lnkedit do gridview aí mostrá-lo ou abri-lo

Fico no aguardo e desde já agradeço
LADEF
- Responder
- Citação
terça-feira, 27 de outubro de 2009 12:48Leandro.Mello

0
Entrar para Votar
Luiz,

Não entendi o que vc disse.

Você não precisa pegar o lnkEdit que está como templatefield, basta colocar a chamada dentro do evento RowEditing, como coloquei na ultima resposta.

Também dá para fazer via JavaScript mas acho que vai te complicar porque o linkbutton causa postback, então mesmo que vc abra o modal, quando ele executar o postback esse modal irá fechar.

Mas de qualquer forma, se você quiser tentar, é assim que se abre/fecha um modal via JavaScript:
```
 function Abrir() { 
 $find('ModalPopupExtender1').show(); 
 } 
 function Fechar() { 
 $find('ModalPopupExtender1').hide(); 
 }
```
Se a resposta for útil, marque-a por favor.

Abraço
Não esqueça de marcar a resposta como útil!
--
Learn! Think! Produce!
Leandro Mello
- Responder
- Citação
terça-feira, 27 de outubro de 2009 16:57LuizIta

0
Entrar para Votar
Olá Leandro deixo ti explicar o que acontece

O que acontece é que quando tento usar o ModalPopupExtender ele não reconhece o TargetControlId=lnkEdit ou seja o linkButton linkEdit que está dentro do TemplateField do GridView mesmo via codigo ele não reconhece pois preciso colocar o objeto modalpopupextender no source e aí ele dá erro pois não reconhece o linkButton que está dentro do TemplateField é por isso que se não houver uma alternativa para o ModalPopupExtender seria interessante alguma função em javascript tipo window.open mas que no lugar de abrir uma pagina que abra o FormView - com id=frmEdit

Vc teria algum exemplo de codigo em javascript que abra uma janela modal popup pelo id do controle no caso o FormView e se sim como eu faria para corrigir o postback do mesmo do qual vc flw e chamá-lo pelo linkbutton

Fico no aguardo e desde já agradeço
LADEF
- Responder
- Citação
quarta-feira, 4 de novembro de 2009 12:39Leandro.Mello

0
Entrar para Votar
Fala, dá uma olhada nesse link e ve se te ajuda.

http://www.desenvolvendoparaweb.net/group/aspnet/forum/topic/show?id=2307362%3ATopic%3A23551&xgs=1

abs
Não esqueça de marcar a resposta como útil!
--
Learn! Think! Produce!
Leandro Mello
- Responder
- Citação