UserControl中的ModalPopupExtender

Question

我想要一個代表輸入對話框的UserControl（帶有可定製標籤和文本框的面板）。此用戶控件需要通過ModalPopupExtender打開。 我開始用下面的解決方案，它的工作原理，但不是在UC：

<!-- Popup to add brand --> 
<asp:Panel ID="pnlAddPopup" DefaultButton="cmdOk" runat="server" style="display: none;"> 
    <atk:ModalPopupExtender ID="popupExtender" runat="server" TargetControlID="cmdAdd" PopupControlID="pnlAddPopup" CancelControlID="cmdAbbrechen" BackgroundCssClass="modalBackground" /> 
    <div id="Div1" style="border-style: none; padding: 5px;" runat="server"> 
     <table style="border: 0"> 
      <tr> 
       <td style="background-color: #CCCCCC; height: 15px; text-align: right" /> 
      </tr> 
      <tr> 
       <td style="background-color: #FFE580;"> 
        <div style="padding: 10px;"> 
         <cc1:SDDataLabel ID="name" runat="server" Text="Name"/> 
         <cc1:SDTextBox ID="txtInput" Width="300" runat="server"/> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td style="background-color: #FFE580; height: 20px; text-align: center"> 
        <cc1:SDButton ID="cmdOk" OnClick="CmdAddOkClick" CssClass="button" runat="server" /> 
        <cc1:SDButton ID="cmdAbbrechen" CssClass="button" runat="server" /> 
       </td> 
      </tr> 
     </table> 
    </div> 
</asp:Panel> 

我寧願什麼：如果我可以添加一個單行像

<uc1:InputPopup ID="inputPopup" runat="server" TargetControlID="cmdAdd"/> 

所以我創建了以下「InputPopup」UserControl：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="InputPopup.ascx.cs" Inherits="ABC.InputPopup" %> 
<%@ Register Assembly="ABC" TagPrefix="cc1" Namespace="ABC" %> 

<atk:ModalPopupExtender ID="popupExtender" runat="server" PopupControlID="pnlAddPopup" CancelControlID="cmdAbbrechen" BackgroundCssClass="modalBackground" /> 
<asp:Panel ID="pnlAddPopup" DefaultButton="cmdOk" runat="server" style="display: none;"> 
    <div id="Div1" style="border-style: none; padding: 5px;" runat="server"> 
     <table style="border: 0"> 
      <tr> 
       <td style="background-color: #CCCCCC; height: 15px; text-align: right" /> 
      </tr> 
      <tr> 
       <td style="background-color: #FFE580;"> 
        <div style="padding: 10px;"> 
         <cc1:SDDataLabel ID="name" runat="server" Text="Name"/> 
         <cc1:SDTextBox ID="txtInput" Width="300" runat="server"/> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td style="background-color: #FFE580; height: 20px; text-align: center"> 
        <cc1:SDButton ID="cmdOk" OnClick="CmdAddOkClick" CssClass="button" runat="server" /> 
        <cc1:SDButton ID="cmdAbbrechen" CssClass="button" runat="server" /> 
       </td> 
      </tr> 
     </table> 
    </div> 
</asp:Panel> 

此外，我有文件後面的代碼來定義屬性TargetControlID。 公衆的TargetControlID的TargetControlID { 集合{popupExtender.TargetControlID =值;}}

該解決方案將是巨大的，但不工作，因爲ModalPopupExtender未在cmdAdd聽，因爲cmdAdd被放置在父控制... 我的問題：是否有可能覆蓋ModalPopupExtender的TargetControlID設置程序，以便偵聽正確的控件點擊事件（位於父控件中的事件）？ 或者是否有任何其他解決方案來解決我的問題？我讀了使用 $（「＃<％= popupExtender.ClientID」）show（） 作爲OnControllerClick函數在TargetControl上，但我無法在父控件中執行此操作，因爲popupExtender會在UC中。

以下解決方案還有效。但我寧願「一個線UC溶液」之上，而不ModalPopupExtender在父控制

<cc1:SDButton ID="cmdAdd" CssClass="button" runat="server" /> 

<!-- Popup to add brand --> 
<atk:ModalPopupExtender ID="popupExtender" runat="server" TargetControlID="cmdAdd" PopupControlID="pnlAddPopup" BackgroundCssClass="modalBackground" /> 
<asp:Panel ID="pnlAddPopup" runat="server"> 
    <uc1:InputPopup ID="inputPopup" runat="server"/> 
</asp:Panel> 

Answer 1

與ModalPopupExtender該用戶控件的代碼 - > PopupInputPanelOkCancel.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PopupInputPanelOkCancel.ascx.cs" Inherits="ABC.PopupPanels.PopupInputPanelOkCancel" %> 
<%@ Register TagPrefix="atk" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit, Version=4.5.7.607, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" %> 

<span style="display:none"> 
    <asp:Button runat="server" ID="dummyButton" /> 
</span> 

<atk:ModalPopupExtender ID="popupExtender" runat="server" PopupControlID="pnlPopup" TargetControlID="dummyButton" CancelControlID="cmdAbbrechen" BackgroundCssClass="modalBackground" /> 

<asp:Panel ID="pnlPopup" DefaultButton="cmdOk" runat="server"> 
    <div id="Div1" style="border-style: none; padding: 5px;" runat="server"> 
     <table style="border: 0"> 
      <tr> 
       <td style="background-color: #CCCCCC; height: 15px; text-align: right" /> 
      </tr> 
      <tr> 
       <td style="background-color: #FFE580;"> 
        <div style="padding: 10px;"> 
         <asp:Label ID="lblLabel" runat="server" Text="Name"/> 
         <asp:TextBox ID="txtInput" Width="300" runat="server"/> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td style="background-color: #FFE580; height: 20px; text-align: center"> 
        <asp:Button ID="cmdOk" OnClick="CmdOkClick" CssClass="button" runat="server" /> 
        <asp:Button ID="cmdAbbrechen" CssClass="button" runat="server" /> 
       </td> 
      </tr> 
     </table> 
    </div> 
</asp:Panel> 

在代碼後面，我有一個屬性來設置擴展的BehaviorId和一個拿到上，我們應該將焦點設置在現場的面板彈出後 - > PopupInputPanelOkCancel.ascx.cs

public string BehaviorId 
{ 
    get { return popupExtender.BehaviorID; } 
    set { popupExtender.BehaviorID = value; } 
} 

public string FocusId 
{ 
    get { return txtInput.ClientID; } 
} 

在aspx頁面，我添加了控制這樣的：

<uc1:PopupInputPanelOkCancel ID="PopupInputPanelOkCancel1" BehaviorId="addPopupBehaviorId" runat="server"/> 

請確保您添加的ScriptManager在頁面頂部（如果不是在父控件添加別的地方。

<asp:ScriptManager ID="asm" runat="server" /> 

要調用該顯示方法中，添加以下代碼到按鈕：

<asp:Button ID="cmdSorteAdd" CssClass="button" runat="server" OnClientClick="showModalPopupExtender('addPopupBehaviorId');return false;" /> 

此外，添加以下JavaScript代碼在aspx頁面

<script type="text/javascript"> 
    function pageLoad() { 
     // $find is not jQuery. It's from MS and returns an AJAX control. 
     var modal = $find('<%=PopupInputPanelOkCancel1.BehaviorId%>'); 
     if (modal != null) { 
      modal.add_shown(modalPopupExtenderShown); 
     } 
    } 

    function showModalPopupExtender(modalBehaviorId) { 
     // $find is not jQuery. It's from MS and returns an AJAX control. 
     var modal = $find(modalBehaviorId); 
     if (modal != null) { 
      modal.show(); 
     } 
    } 

    function modalPopupExtenderShown() { 
     //jQuery selector 
     $('#<%=PopupInputPanelOkCancel1.FocusId%>').focus(); 
    } 
</script 

的端部

我還不喜歡的是，我需要手動設置BehaviorId（addPopupBehaviorId）的值在

OnClientClick="showModalPopupExtender('addPopupBehaviorId');return false;" 

這將是完美的，如果一個需要它只有在

<uc1:PopupInputPanelOkCancel ID="PopupInputPanelOkCancel1" BehaviorId="addPopupBehaviorId" runat="server"/> 

增加，但它的工作:) 我的問題，我仍然是，當函數modalPopupExtenderShown被調用時，焦點（ ）確實會在我的情況下發一個回傳。我不明白爲什麼會有回傳。你有什麼想法？ - >編輯：我使用了錯誤的功能。我使用了Microsofts $ find（'id'）。focus（）而不是jQuery的$（'＃id'）。focus（）來設置焦點。現在，一切都像一個魅力。

除此之外，我的解決方案工作正常，我希望有人認爲它有用。