ASP.net中的模式弹出扩展程序动画

本文关键字：扩展 程序 动画 模式 net ASP | 更新日期: 2023-09-27 17:58:07

我目前正在开发ASP.net c#应用程序。我有一个网格视图，里面有绑定的链接按钮。当按下链接按钮时，我想在点击模式弹出窗口内的按钮时使用淡入动画和淡出动画来显示模式弹出窗口。

我已经将动画扩展程序添加到代码中，并将TargetControlID设置为链接按钮的ID，但是，当我尝试运行网站时，它显示错误System.InvalidOperationException ModalPopupExtender的TargetControlID无效。找不到ID为"sofLink"的控件。sofLink是LinkButton的ID。

以下是网格视图的代码

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

下面是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" />

下面是动画的代码

       <ajaxToolkit:AnimationExtender ID="popupAnimation" runat="server"
            TargetControlID="sofLink">
            <Animations>
                <OnClick>
                    <Parallel AnimationTarget="ModalPanel"
                    Duration="0.3" Fps="25">
                    <FadeIn />
                    </Parallel>
                </OnClick>
            </Animations>
       </ajaxToolkit:AnimationExtender>

感谢您提供的任何帮助。

ASP.net中的模式弹出扩展程序动画

TargetControlID（据我所知）应该是弹出面板本身中的控件，而不是网格控件中的控件。当我使用ModalPopupExtender时，我通常使用一个带有"display:none"作为TargetControlID的asp:Button。例如，

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

在后面的代码中，您必须控制基于事件的控件的显示和隐藏，例如GetSoftwareModal。如果适用，您还将绑定您需要的内容。

希望能有所帮助。

您可以使用隐藏按钮，并将其ID用作ModalPopupExtender的TargetControlID。

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

然后，如果你想立即显示弹出窗口而不以以下方式回发，你可以调用按钮的点击客户端：

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

我试过了，但我的动画没有显示。我将数据绑定添加到LinkButton中：

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

我认为由于DetailView1的数据绑定，它需要从数据库中获取数据。如果DetailView1未绑定，动画将正常显示。

相关文章：