UserControl 中的 ModalPopupExtender答案

【问题标题】：ModalPopupExtender in UserControlUserControl 中的 ModalPopupExtender
【发布时间】：2013-07-03 17:12:32
【问题描述】：

我想要一个代表输入对话框（带有可自定义标签和文本框的面板）的 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”用户控件：

<%@ 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 设置器以侦听正确的控件单击事件（在我的情况下位于父控件中的事件）？或者我的问题还有其他解决方案吗？我读到了关于使用 $("#

以下解决方案也有效。但我更喜欢上面的“单线 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>

【问题讨论】：

我找到了正确的解决方案。一会儿我会发...
我找到了理想的解决方案。除了焦点设置的小问题外，该解决方案工作正常。关键问题/错误之一是我使用了 $('#ModalBehaviorId') 而不是 $find('ModalBehaviorId)。如果我理解正确的话，$() 返回一个 Ajax-Object 并且 $find() 返回一个 ModalPopupExtender 对象。为了更清楚，我将我的解决方案发布在一个新帖子中。

标签： user-controls modalpopupextender

【解决方案1】：

带有 ModalPopupExtender 的 UserControl 的代码 -> 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

我不喜欢的是我需要手动设置 BehaviorId (addPopupBehaviorId) 的值

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

如果只需要添加它就完美了

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

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

除此之外，我的解决方案运行良好，我希望有人觉得它有用。

【讨论】：