Modal Popup Extenseur de l'animation dans ASP.net

Je suis en train de développer un ASP.net application en c#. J'ai une grille de point de vue qui a lié les boutons de lien à l'intérieur. Lorsque le lien est enfoncé je veux afficher les modal popup à l'aide d'un fondu dans l'animation et un fondu de l'animation lorsqu'un bouton à l'intérieur de l'modal popup est cliqué.

J'ai ajouté l'animation extender dans le code et de définir la TargetControlID à l'ID du bouton de lien, cependant, lorsque j'essaie de lancer le site, il affiche le message d'erreur Système.InvalidOperationException la TargetControID de ModalPopupExtender n'est pas valide. Un contrôle avec l'ID 'sofLink' n'a pas pu être trouvé. sofLink est l'ID de la LinkButton.

Ci-dessous est le code pour l'affichage de la grille

<asp:GridView ID="tblSoftware" runat="server" Width="100%"
                        EnableModelValidation="True" AutoGenerateColumns="False" 
                        onselectedindexchanged="tblSoftware_SelectedIndexChanged"
                        CellPadding="2">
                        <Columns>
                            <asp:TemplateField HeaderText="Software Name">
                                <ItemTemplate>
                                <asp:LinkButton ID="sofLink" Text='<%# Bind("sof_softwareName") %>' 
                                 CommandName="sofID" OnCommand="GetSoftwareModal" CommandArgument='<%# Eval("sof_id") %>' runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="sof_platform" HeaderText="Platform" ReadOnly="True" SortExpression="sof_platform" />
                        </Columns>
                        <HeaderStyle CssClass="gridHeader" />
                        <PagerSettings Position="Bottom" />
                        <PagerStyle HorizontalAlign="Right" VerticalAlign="Middle" CssClass="gridPage" />
                        <AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
                    </asp:GridView>

Et ci-dessous est le code pour le ModalPopupExtender

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="sofLink"
                    PopupControlID="ModalPanel" DropShadow="true" Drag="true" OkControlID="OKButton" />

               <asp:Panel ID="ModalPanel"  runat="server" Width="500px" style="width: auto; height: auto;" CssClass="modalPopup">
                    <asp:Label ID="softwareTitle" Font-Bold="true" Font-Size="Medium" runat="server" Width="100%" style="text-align: center;" /><br /><br />
                    <asp:Literal ID="litSoftware" runat="server"></asp:Literal>
                    <asp:Button id="OKButton" runat="server" Text="Close" style="position: relative; right: 0px; width: 100px;" />
               </asp:Panel>

               <asp:ScriptManager ID="asm" runat="server" />

Et ci-dessous est le code de l'animation

       <ajaxToolkit:AnimationExtender ID="popupAnimation" runat="server"
            TargetControlID="sofLink">

            <Animations>
                <OnClick>
                    <Parallel AnimationTarget="ModalPanel"
                    Duration="0.3" Fps="25">
                    <FadeIn />
                    </Parallel>
                </OnClick>
            </Animations>
       </ajaxToolkit:AnimationExtender>

Merci pour toute aide que vous pouvez fournir.

InformationsquelleAutor Boardy | 2011-06-01
  1. 1

    La TargetControlID (pour autant que je suis au courant) doit être un contrôle dans le menu contextuel du panneau lui-même, pas dans la grille de contrôle. Lorsque j'utilise le ModalPopupExtender j'ai l'habitude d'utiliser un asp:Button avec 'display:none' comme TargetControlID. Par exemple,

    <ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnPopup"
                PopupControlID="ModalPanel" DropShadow="true" Drag="true" OkControlID="OKButton" />
<asp:Panel ID="ModalPanel"  runat="server" Width="500px" style="width: auto; height: auto;" CssClass="modalPopup">
<asp:Button id="btnPopup" runat="server" style="display:none" />

    Dans le code-behind, vous devez contrôler l'affichage et le masquage de la base de contrôle sur un événement, par exemple, GetSoftwareModal. Vous aurez également à lier ce dont vous avez besoin le cas échéant.

    Espère que ça aide.

    • Merci cela a très bien fonctionné. J'ai ajouté le bouton caché mais j'ai aussi changé la manifestation pour le animationextender de <OnClick> <OnLoad>
    InformationsquelleAutor Darren Reid
  2. 1

    Vous pouvez utiliser un bouton caché, et utiliser l'ID TargetControlID de la ModalPopupExtender.

    <asp:Button id="btnShowPopup" runat="server" style="display:none" />

    Ensuite, vous pouvez appeler cliquez sur le bouton client si vous souhaitez afficher le popup immédiatement sans attendre la publication de la façon suivante:

    <asp:LinkButton ID="sofLink" runat="server" OnClientClick="javascript:document.getElementById('btnShowPopup').click();return false;">LinkButton</asp:LinkButton>
    InformationsquelleAutor Tim Schmelter
  3. 1

    J'ai essayé cependant mon animation ne s'affiche pas.
    - Je ajouter databind en LinkButton:

    <asp:LinkButton ID="sofLink" runat="server" OnClientClick="javascript:document.getElementById('DetailView1').databind();document.getElementById('btnShowPopup').click();return false;">LinkButton</asp:LinkButton>

    Je pense à cause de databind de DetailView1, il a besoin d'obtenir des données à partir de la base de données. Si DetailView1 ne se lient pas, l'animation d'affichage normal.

    InformationsquelleAutor Trong Lam Phan