AjaxModalPopupExtender: Comment afficher la boîte de dialogue lors de la sélection d'un élément dans une liste déroulante?

L'exemple suivant affiche une boîte de dialogue modale lorsque l'utilisateur clique sur le bouton.AjaxModalPopupExtender: Comment afficher la boîte de dialogue lors de la sélection d'un élément dans une liste déroulante?

Quels changements dois-je faire pour afficher la boîte de dialogue lorsqu'une sélection est faite à partir de la liste déroulante?

Notez que si je mets la propriété TargetControlID de "Button1" à "DropDownList1", la boîte de dialogue s'affiche lorsque la liste déroulante est DROPPED plutôt que lorsqu'une sélection est réellement faite.

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

Source

2010-01-07 ChadD

Je l'ai fait comme ça, et il fonctionne bien pour moi (dans le gestionnaire d'événements change pour le menu déroulant):

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(); 
    } 
}

Dans ce cas, j'ai mis le TargetControlID d'être un " "factice" qui n'est pas visible pour l'utilisateur.

Source

2010-01-07 06:25:40

AjaxModalPopupExtender: Comment afficher la boîte de dialogue lors de la sélection d'un élément dans une liste déroulante?

Répondre

Questions connexes