ASP.net 中的模态弹出扩展器动画
我目前正在开发 ASP.net C# 应用程序。我有一个网格视图,里面有绑定的链接按钮。当按下链接按钮时,我想在单击模态弹出窗口内的按钮时使用淡入动画和淡出动画来显示模态弹出窗口。
我已将动画扩展器添加到代码中,并将 TargetControlID 设置为链接按钮的 ID,但是,当我尝试运行该网站时,它显示错误 System.InvalidOperationException ModalPopupExtender 的 TargetControID 无效。无法找到 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>
感谢您提供的任何帮助。
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 技术交流群。
发布评论
评论(3)
您可以使用隐藏按钮并将其 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>
我尝试过,但是我的动画不显示。
我将databind添加到LinkButton中:
<asp:LinkButton ID="sofLink" runat="server" OnClientClick="javascript:document.getElementById('DetailView1').databind();document.getElementById('btnShowPopup').click();return false;">LinkButton</asp:LinkButton>
我认为由于DetailView1的databind,它需要从数据库获取数据。如果DetailView1没有绑定,动画显示正常。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
TargetControlID(据我所知)应该是弹出面板本身的控件,而不是网格控件中的控件。当我使用 ModalPopupExtender 时,我通常使用带有“display:none”的 asp:Button 作为 TargetControlID。例如,
在代码隐藏中,您必须根据事件控制控件的显示和隐藏,例如 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,
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.