none
Ajax – comment faire pour garder le ModalPopupExtender après un PostBack complet RRS feed

  • Discussion générale

  • Quand un ModalPopupExtender est déjà ouvert, il sera fermé après un PostBack complet. C'est parce que son état de côté client (ouvert ou masqués) n'est pas géré automatiquement. En conséquence, il sera toujours masqué initialement après un PostBack complète.

    Pour résoudre ce problème, nous avons les options suivantes:

     

      • Évitez les PostBack complet en plaçant un UpdatePanel à l'intérieur de la ModalPopup.

      • Enregistrer et restaurer son état manuellement côté client.

     

    Voici deux exemples pour chaque option.

     

    Option 1 :

     

     

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
      protected void Button2_Click(object sender, EventArgs e)
      {
        Label1.Text = DateTime.Now.ToString();
      }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title>Untitled Page</title>
    </head>
    <body>
      <form id="form1" runat="server">
      <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="Button1" runat="server" Text="Show modal popup" />
        <asp:Button ID="Button2" runat="server" Text="Trigger PostBack" OnClick="Button2_Click" />
        <asp:HiddenField ID="HiddenField1" runat="server" />
        <ajaxtoolkit:modalpopupextender id="ModalPopupExtender1" behaviorid="mpe" runat="server"
          popupcontrolid="Panel1" targetcontrolid="Button1">
    
        </ajaxtoolkit:modalpopupextender>
        <asp:Panel ID="Panel1" runat="server">
          <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
              <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
            <Triggers>
              <asp:AsyncPostBackTrigger ControlID="Button2" />
            </Triggers>
          </asp:UpdatePanel>
          Modal Popup
        </asp:Panel>
      </div>
      </form>
    </body>
    </html>

     

     

    Option 2 :

     

      1. Ajouter un gestionnaire d'événements onShown à la ModalPopupExtender.

      2. Ajouter un gestionnaire d'événements onHidden à la ModalPopupExtender.

      3. Valeur de la HiddenField à "shown"ou "hidden" dans les fonctions ci-dessus en conséquence.

      4. Dans la fonction pageLoad, appeler la fonction d’affichage si la valeur du HiddenField est "shown".

     

    Voici l'extrait de code essentiel :

     

    <script type="text/javascript">
    
      function pageLoad()
      {
        var mpe = $find("mpe");
        mpe.add_shown(onShown);
        mpe.add_hidden(onHidden);   
    
        var shown = ($get("HiddenField1").value == "shown");
        if(shown)
        {
          mpe.show();
        }
      }  
    
      function onShown()
      {
        var hf = $get("HiddenField1");
        hf.value = "shown";
      }
      
      function onHidden()
      {
        var hf = $get("HiddenField1");
        hf.value = "hidden";
      }
    
    </script>
    
    <asp:ScriptManager ID="ScriptManager2" runat="server">
    </asp:ScriptManager>
    <asp:Button ID="Button3" runat="server" Text="Show modal popup" />
    <asp:Button ID="Button4" runat="server" Text="Trigger PostBack" />
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <ajaxtoolkit:modalpopupextender id="ModalPopupExtender1" behaviorid="mpe" runat="server"
      popupcontrolid="Panel1" targetcontrolid="Button1">
    </ajaxtoolkit:modalpopupextender>
    <asp:Panel ID="Panel1" runat="server">
      Modal Popup
    </asp:Panel>

     

     

     

    Pour plusieurs tips&tricks sur ASP.NET, visitez la page Foire aux Questions – ASP.NET

     

    jeudi 27 mai 2010 14:19
    Modérateur