0

我想要一个用户控件，它代表一个输入对话框（带有可自定义标签和文本框的面板）。这个 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 { set{ popupExtender.TargetControlID = value;} }

这个解决方案很好，但不起作用，因为 ModalPopupExtender 没有在 cmdAdd 上侦听，因为 cmdAdd 被放置在父控件中......我的问题：是否可以覆盖 ModalPopupExtender 的 TargetControlID 设置器以便收听右键单击事件（在我的情况下位于父控件中的事件）？或者我的问题还有其他解决方案吗？我读过关于在 TargetControl 上使用 $("#<%= popupExtender.ClientID").show() 作为 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>
4

1 回答 1

3

带有 ModalPopupExtender -> PopupInputPanelOkCancel.ascx 的 UserControl 的代码

<%@ 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() 来设置焦点。现在，一切都像魅力一样运作。

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

于 2013-07-04T07:54:36.350 回答