AjaxModalPopupExtender：如何在從下拉列表中選擇項目時顯示對話框？

以下示例在用戶單擊該按鈕時顯示一個模式對話框。AjaxModalPopupExtender：如何在從下拉列表中選擇項目時顯示對話框？

當從下拉列表中進行選擇時，需要做些什麼改變才能顯示對話框？

請注意，如果將TargetControlID屬性從「Button1」設置爲「DropDownList1」，則當下拉列表是DROPPED而不是實際進行選擇時，會顯示對話框。

<%@ 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

來源

2010-01-07 ChadD

我已經做了這個樣子，它很適合我（的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是一個「虛擬「元素對用戶不可見。

來源

2010-01-07 06:25:40

AjaxModalPopupExtender：如何在從下拉列表中選擇項目時顯示對話框？

回答

相關問題