ASP.net中的Modal Popup Extender动画

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

我已经将动画扩展器添加到代码中，并将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>

由于该代码为您提供任何帮助。

来源

2011-06-01 Boardy

的的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。如果适用的话，你也将绑定你需要的东西。

希望有所帮助。

来源

2011-06-01 22:47:26

谢谢，这工作得很好。我添加了隐藏按钮，但我也将动画扩展器的事件从更改为 – Boardy 2011-06-02 23:09:11

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

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

然后就可以调用按钮的点击客户方如果要立即显示弹出不回发的follwoing方式：

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

来源

2011-06-01 22:39:53

我试过但我的动画不显示。我添加数据绑定到LinkButton的：

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

我想是因为数据绑定DetailView1的，它需要从数据库中获得数据。如果DetailView1不绑定，则动画显示正常。

来源

2012-02-02 10:42:38

ASP.net中的Modal Popup Extender动画

回答

相关问题