Modal-Popup-Extender-animation in ASP.net

Ich bin derzeit an der Entwicklung einer ASP.net c# - Anwendung. Ich habe eine raster-Ansicht, die gebunden hat, link-Tasten im inneren. Wenn die link-Taste gedrückt wird, möchte ich die Anzeige der modalen popup mit einem fade-in-animation und eine fade-out-animation, wenn ein button in der modal-popup geklickt wird.

Habe ich die animation extender in den code, und legen Sie die TargetControlID, um die ID der link-Taste, aber wenn ich versuche zu laufen, die website zeigt die Fehlermeldung System.InvalidOperationException die TargetControID der ModalPopupExtender ist nicht gültig. Ein Steuerelement mit der ID 'sofLink' konnte nicht gefunden werden. sofLink ist die ID der LinkButton.

Unten ist der code für das grid-Ansicht

<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>

Und unten ist der code für den 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" />

Und unten ist der code für die 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>

Vielen Dank für jede Hilfe, die Sie bieten können.

InformationsquelleAutor Boardy | 2011-06-01

animationextender asp.net c#modalpopupextender

1

Den TargetControlID (soweit ich informiert bin) sollte ein Steuerelement im popup-panel selbst, nicht im grid-control. Wenn ich den ModalPopupExtender ich in der Regel mit einem asp:Button mit 'display:none' als TargetControlID. ZB
```
<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" />
```
In der code-behind-Sie kontrollieren die ein-und Ausblendens von der Steuerung montiert auf ein Ereignis, zB, GetSoftwareModal. Sie wird auch zu binden, was Sie brauchen, wenn anwendbar.

Hoffe, das hilft.

Danke das hat Super funktioniert. Ich habe den versteckten button, aber ich habe auch die Veranstaltung, für die animationextender von "< " OnClick> <OnLoad - >

InformationsquelleAutor Darren Reid
1

Könnte man eine versteckte Taste und verwenden Sie die ID als TargetControlID der ModalPopupExtender.
```
<asp:Button id="btnShowPopup" runat="server" style="display:none" />
```
Dann können Sie die Schaltfläche klicken) wenn Sie möchten, zeigen Sie das popup sofort ohne postback in der folgenden Weise:
```
<asp:LinkButton ID="sofLink" runat="server" OnClientClick="javascript:document.getElementById('btnShowPopup').click();return false;">LinkButton</asp:LinkButton>
```
InformationsquelleAutor Rango
1

Ich versuchte jedoch meine animation nicht angezeigt.
Ich füge databind in LinkButton:
```
<asp:LinkButton ID="sofLink" runat="server" OnClientClick="javascript:document.getElementById('DetailView1').databind();document.getElementById('btnShowPopup').click();return false;">LinkButton</asp:LinkButton>
```
Denke ich, weil der databind-Methode der DetailView1, es müssen Daten aus einer Datenbank abrufen. Wenn DetailView1 nicht binden, die animation Anzeige normal.

InformationsquelleAutor Trong Lam Phan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.