ASP.net 中的模态弹出扩展器动画

发布于 11-11 18:50 字数 3162 浏览 3 评论 0原文

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

我已将动画扩展器添加到代码中,并将 TargetControlID 设置为链接按钮的 ID,但是,当我尝试运行该网站时,它显示错误 System.InvalidOperationException ModalPopupExtender 的 TargetControID 无效。无法找到 ID 为“sofLink”的控件。 sofLink 是 LinkBut​​ton 的 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>

感谢您提供的任何帮助。

I am currently developing an ASP.net c# application. I have a grid view which has bound link buttons inside. When the link button is pressed I want to display the modal popup using a fade in animation and a fade out animation when a button inside the modal popup is clicked.

I have added the animation extender into the code and set the TargetControlID to the ID of the link button, however, when I try to run the website it displays the error System.InvalidOperationException the TargetControID of ModalPopupExtender is not valid. A control with ID 'sofLink' could not be found. sofLink is the ID of the LinkButton.

Below is the code for the grid view

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

And below is the code for the 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" />

And below is the code for the 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>

Thanks for any help you can provide.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

别挽留2024-11-18 18:50:36

TargetControlID(据我所知)应该是弹出面板本身的控件,而不是网格控件中的控件。当我使用 ModalPopupExtender 时,我通常使用带有“display:none”的 asp:Button 作为 TargetControlID。例如,

<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。如果适用,您还将绑定您需要的内容。

希望有帮助。

The TargetControlID (as far as I am aware) should be a control in the popup panel itself, not in the grid control. When I use the ModalPopupExtender I usually use an asp:Button with 'display:none' as the TargetControlID. Eg,

<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 the code-behind you have to control the showing and hiding of the control base on an event, eg, GetSoftwareModal. You will also also to bind what you need if applicable.

Hope that helps.

喜爱纠缠2024-11-18 18:50:36

您可以使用隐藏按钮并将其 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>

You could use a hidden button and use it's ID as TargetControlID of the ModalPopupExtender.

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

Then you can call the button's click clientside if you want to show the popup immediately without postback in the follwoing way:

<asp:LinkButton ID="sofLink" runat="server" OnClientClick="javascript:document.getElementById('btnShowPopup').click();return false;">LinkButton</asp:LinkButton>
莳間冲淡了誓言ζ2024-11-18 18:50:36

我尝试过,但是我的动画不显示。
我将databind添加到LinkBut​​ton中:

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

我认为由于DetailView1的databind,它需要从数据库获取数据。如果DetailView1没有绑定,动画显示正常。

I tried however my animation doesn't display.
I add databind into LinkButton:

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

I think because of databind of DetailView1, it need get data from database. If DetailView1 doesn't bind, the animation display normal.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文