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

回答

相關問題