ModalPopupExtender in UserControl

Question

我想要一个UserControl，它代表一个输入对话框(带有可定制标签和文本框的面板)。这个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 { set{ popupExtender.TargetControlID =popupExtender.TargetControlID；}

这个解决方案很好，但不起作用，因为ModalPopupExtender没有监听cmdAdd，因为cmdAdd放在父控件中.我的问题是:是否可以覆盖TargetControlID设置器ModalPopupExtender，以便侦听正确的控件单击事件(在我的例子中位于父控件中的事件)？或者对我的问题还有其他的解决办法吗？我读过关于使用$("#<%= popupExtender.ClientID").show()作为TargetControl上的OnClientClick函数的文章，但是我无法在父控件中这样做，因为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

UserControl与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"/>

确保将脚本管理器添加到页面的顶部(如果没有添加到父控件中的其他地方)。

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

为了调用show方法，我将以下代码添加到一个按钮中：

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

此外，我在aspx页面的末尾添加了以下javascript代码

<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

我不喜欢的是，我需要在

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

如果只需要将其添加到

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

但是它确实起作用了:)我仍然面临的问题是，当函数modalPopupExtenderShown被调用时，focus()在我的情况下确实会触发回发。我不明白为什么会有回发。你有什么想法吗？->编辑:我用错了函数。我使用Microsofts $find('id').focus()代替jQuery的$('#id').focus()来设置焦点。现在，一切都像魅力一样运作。

除此之外，我的解决方案很好，我希望有人发现它有用。