AjaxModalPopupExtender：如何在从下拉列表中选择项目时显示对话框？

发布于 2024-08-17 01:28:47 字数 4749 浏览 1 评论 0原文

以下示例在用户单击按钮时显示模式对话框。

当从下拉列表中进行选择时，我必须进行哪些更改才能使其显示对话框？

请注意，如果我将 TargetControlID 属性从“Button1”设置为“DropDownList1”，则当下拉列表被删除时（而不是实际进行选择时）会显示对话框。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MyModalSimple.aspx.vb" Inherits="MyModalSimple" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
    </style>
    <link href="Default.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        function onOk() {
            //form1.submit();
        }
    </script>

    <script type="text/javascript">
        var clientid;
        function fnSetFocus(txtClientId) {
            clientid = txtClientId;
            setTimeout("fnFocus()", 500);

        }

        function fnFocus() {
            eval("document.getElementById('" + clientid + "').focus()");
        }

        function fnClickOK(sender, e) {
            __doPostBack(sender, e);
        }         


    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
        </asp:DropDownList>
        <cc1:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server" TargetControlID="Button1"
            PopupDragHandleControlID="programmaticPopupDragHandle" PopupControlID="pnlModal"
            OkControlID="btnOK" CancelControlID="btnCancel" DropShadow="true" OnOkScript="onOk();"
            BackgroundCssClass="modalBackground">
        </cc1:ModalPopupExtender>
        <asp:Panel ID="pnlModal" runat="server" Style="display: None" BackColor="#CCCCCC">
            <asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move; background-color: #DDDDDD;
                border: solid 1px Gray; color: Black; text-align: center;">
                Caption
            </asp:Panel>
            <br />
            <table>
                <tr>
                    <td>
                        <asp:Label ID="lblFirst" runat="server" Text="First"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtFirst" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblLast" runat="server" Text="Last"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtLast" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td align="right">
                        <asp:Button ID="btnOK" runat="server" Text="OK" />
                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                    </td>
                </tr>
            </table>
            <br />
            <br />
        </asp:Panel>
        <asp:Label ID="lblMessage" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

Partial Class MyModalSimple

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then

            Button1.Attributes.Add("onclick", "fnSetFocus('" + txtFirst.ClientID + "');")
            btnOK.OnClientClick = String.Format("fnClickOK('{0}','{1}')", btnOK.UniqueID, "")

        End If

    End Sub

    Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOK.Click
        lblMessage.Text = "Hi, " & txtFirst.Text & " " & txtLast.Text
    End Sub
End Class

原文

The following example displays a modal dialog box when the user clicks the button.

What changes do I have to make to get it to display the dialog when a selection is made from the dropdownlist?

Note that if I set the TargetControlID property from "Button1" to "DropDownList1", teh dialog box is displayed when the dropdown is DROPPED rather than when a selection is actually made.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MyModalSimple.aspx.vb" Inherits="MyModalSimple" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
    </style>
    <link href="Default.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        function onOk() {
            //form1.submit();
        }
    </script>

    <script type="text/javascript">
        var clientid;
        function fnSetFocus(txtClientId) {
            clientid = txtClientId;
            setTimeout("fnFocus()", 500);

        }

        function fnFocus() {
            eval("document.getElementById('" + clientid + "').focus()");
        }

        function fnClickOK(sender, e) {
            __doPostBack(sender, e);
        }         


    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
        </asp:DropDownList>
        <cc1:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server" TargetControlID="Button1"
            PopupDragHandleControlID="programmaticPopupDragHandle" PopupControlID="pnlModal"
            OkControlID="btnOK" CancelControlID="btnCancel" DropShadow="true" OnOkScript="onOk();"
            BackgroundCssClass="modalBackground">
        </cc1:ModalPopupExtender>
        <asp:Panel ID="pnlModal" runat="server" Style="display: None" BackColor="#CCCCCC">
            <asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move; background-color: #DDDDDD;
                border: solid 1px Gray; color: Black; text-align: center;">
                Caption
            </asp:Panel>
            <br />
            <table>
                <tr>
                    <td>
                        <asp:Label ID="lblFirst" runat="server" Text="First"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtFirst" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblLast" runat="server" Text="Last"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtLast" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                         
                    </td>
                    <td align="right">
                        <asp:Button ID="btnOK" runat="server" Text="OK" />
                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                    </td>
                </tr>
            </table>
            <br />
            <br />
        </asp:Panel>
        <asp:Label ID="lblMessage" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

Partial Class MyModalSimple

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then

            Button1.Attributes.Add("onclick", "fnSetFocus('" + txtFirst.ClientID + "');")
            btnOK.OnClientClick = String.Format("fnClickOK('{0}','{1}')", btnOK.UniqueID, "")

        End If

    End Sub

    Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOK.Click
        lblMessage.Text = "Hi, " & txtFirst.Text & " " & txtLast.Text
    End Sub
End Class

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

余罪 2024-08-24 01:28:47

我已经这样做了，它对我来说效果很好（在下拉列表的 change 事件处理程序中）：

if (this.value == "yourDropDownListValue") {
     // get a reference to the popup extender element
     var popupElement = $find("thePopupElementName");
     if (popupElement != null) {
         // show the popup extender
         popupElement.show();
     }
 }

在这种情况下，我已将 TargetControlID 设置为“虚拟”元素对用户不可见。

I have done it like this, and it works well for me (inside the change event handler for the dropdown):

if (this.value == "yourDropDownListValue") {
     // get a reference to the popup extender element
     var popupElement = $find("thePopupElementName");
     if (popupElement != null) {
         // show the popup extender
         popupElement.show();
     }
 }

In this case I have set the TargetControlID to be a "dummy" element that is not visible for the user.

回复收藏 0 原文

~没有更多了~