Modal popup extender

**ingant** · 06-12-2016, 17:01

Ciao ragazzi,
vi chiedo un aiuto. Vorrei implementare un popup in asp.net. Per realizzare i popup sembra evidente che si debba utilizzare la libreria ajax Modalpopup ma, non è altrettanto chiaro come utilizarla.
Potreste darmi una dritta sull'utilizzo di tale libreria? Devo usare o no l'update pannel e in che modo?
E' tutto molto confuso
Ciao e grazie.

**djciko** · 06-12-2016, 18:13

esempio modalpopupExtender
http://www.ajaxtoolkit.net/ModalPopup/ModalPopup.aspx

(uno dei tanti in rete, semplificato)

codice:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="modalPopup.aspx.cs" Inherits="STUDIO2016.ACT_Examples.modalPopup" %>


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ACT" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ModalPopup - Esempio HTML.it</title>
    <style type="text/css">
        .modalBackground {
            background-color: Black;
            filter: alpha(opacity=90);
            opacity: 0.8;
        }


        .modalPopup {
            background-color: #FFFFFF;
            border-width: 3px;
            border-style: solid;
            border-color: black;
            padding-top: 10px;
            padding-left: 10px;
            width: 300px;
            height: 140px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>
        <div>
            <asp:Button ID="btPop" runat="server" Text="Apri la modal popup >>" />


            <ACT:ModalPopupExtender 
                ID="mp1" 
                runat="server" 
                PopupControlID="Panel1" 
                TargetControlID="btPop"
                CancelControlID="btnClose"
                BackgroundCssClass="modalBackground"></ACT:ModalPopupExtender>
        </div>


        <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
            Ciao, oggi è il <%= DateTime.Now.ToShortDateString() %>
            <br /><br /><br />
            <asp:Button ID="btnClose" runat="server" Text="Close" />
        </asp:Panel>
    </form>
</body>
</html>

nel code-behind c# non c'e' nulla..

PS: devi avere ovviamente aggiunto la componentistica dell'AjaxControlToolkit (puoi scaricare la DLL da molti siti in rete)

**djciko** · 06-12-2016, 18:18

ps1: la modal puoi implementarla anche in altri modi, non c'e' per forza bisogno dell'AjaxControlToolkit.
ps2: no, come vedi l'elemento obbligatorio è lo ScriptManager, non l'UpdatePanel.

**ingant** · 08-12-2016, 23:55

Grazie per i vostri consigli ma l'extender ModalPopup ancora non mi funziona.
non appena inserisco un ectender Ajax al mio pannello non riesco più a farlo visualizzare. Vi
posto il codice

codice:

  <asp:Button ID="Button13" runat="server" Text="Apri" onclick="Button13_Click2"  />                                  
  <asp:Panel ID="Panel1" runat="server"  Width="150px" Height="268px"  Visible="false"
   BackColor="#999999" BorderColor="Black" BorderStyle="Ridge" BorderWidth="3px">
    <asp:Button ID="cmdChiudi" runat="server" Text="Chiudi" onclick="cmdChiudi_Click" />
                                <br />
                                <br />
  <asp:GridView ID="GridView3" AutoGenerateColumns="False" runat="server"  CellPadding="4" ForeColor="Black" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellSpacing="2">
          <Columns>
                                    <asp:BoundField DataField="alias" HeaderText="Misura" />
                                    <asp:BoundField DataField="valore" HeaderText="Valore" />
         </Columns>
                                <FooterStyle BackColor="#CCCCCC" />
                                <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                                <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
                                <RowStyle BackColor="White" />
                                <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                                <SortedAscendingCellStyle BackColor="#F1F1F1" />
                                <SortedAscendingHeaderStyle BackColor="#808080" />
                                <SortedDescendingCellStyle BackColor="#CAC9C9" />
                                <SortedDescendingHeaderStyle BackColor="#383838" />
                            </asp:GridView>
         </asp:Panel>                                      
          <ajaxToolkit:ModalPopupExtender ID="Panel1_ModalPopupExtender"  PopupControlID="Panel1"        
          CancelControlID="cmdChiudi" runat="server" BehaviorID="Panel1_ModalPopupExtender" DynamicServicePath=""  
         Drag="true" TargetControlID="Button13">
        </ajaxToolkit:ModalPopupExtender>

**ingant** · 09-12-2016, 00:59

OK ho risolto.
Non importa se aggiungendo l'extender il pannello non si vede, dato che lo posso far comparire utilizzando il metodo show()
dell'extender Modal.
Il codice che mi funziona è il seguente:

codice:

 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                   <ContentTemplate>       
                           <asp:Panel ID="Panel2" runat="server"  Width="150px" Height="268px"  Visible="true">                       
                        <asp:Panel ID="Panel1" runat="server"  Width="150px" Height="268px"  Visible="true"
                            BackColor="#999999" BorderColor="Black" BorderStyle="Ridge" BorderWidth="3px">
                            <asp:Button ID="cmdChiudi" runat="server" Text="Chiudi" 
                                onclick="cmdChiudi_Click" />
                                <br />
                                <br />
                            <asp:GridView ID="GridView3" AutoGenerateColumns="False" runat="server" 
                                CellPadding="4" ForeColor="Black" BackColor="#CCCCCC" 
                                BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellSpacing="2">
                                <Columns>
                                    <asp:BoundField DataField="alias" HeaderText="Misura" />
                                    <asp:BoundField DataField="valore" HeaderText="Valore" />
                                </Columns>
                                <FooterStyle BackColor="#CCCCCC" />
                                <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                                <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
                                <RowStyle BackColor="White" />
                                <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                                <SortedAscendingCellStyle BackColor="#F1F1F1" />
                                <SortedAscendingHeaderStyle BackColor="#808080" />
                                <SortedDescendingCellStyle BackColor="#CAC9C9" />
                                <SortedDescendingHeaderStyle BackColor="#383838" />
                            </asp:GridView>
                        </asp:Panel>   
                        </asp:Panel>                                   
                        <ajaxToolkit:DragPanelExtender ID="Panel1_DragPanelExtender" runat="server" 
                           BehaviorID="Panel1_DragPanelExtender" DragHandleID="Panel1"  
                           TargetControlID="Panel1" />
                        <ajaxToolkit:ModalPopupExtender ID="Panel1_ModalPopupExtender"  PopupControlID="Panel1"    CancelControlID="Panel1"
                        runat="server" BehaviorID="Panel1_ModalPopupExtender" DynamicServicePath=""  Enabled="true"
                      TargetControlID="Panel1">
                        </ajaxToolkit:ModalPopupExtender>                                             
                    </ContentTemplate>
                    </asp:UpdatePanel>

**ingant** · 09-12-2016, 09:47

Quando trascino il pannello scompare. Perche e cosa devo fare per evitarlo?

**ingant** · 09-12-2016, 13:37

Ciao Ragazzi.
Ho implemetato con successo un popup utilizzando un ModalPopupextnder e un dragPanelExtender.
Però quando trascino il pannello esso scompare. Come posso evitare questo problema?
Capita spesso che dopo aver spostato il pannello si riposiziona dove era inizialmente.
Sembrano problemi della libreria.
Che ne dite.

**djciko** · 10-12-2016, 15:13

il tag è [code] con le parentesi quadre, non <code>

**djciko** · 12-12-2016, 13:25

ho unito le discussioni. per favore sii piu' dettagliato, che intendi per "pannello" ?

Discussione: Modal popup extender

Strumenti discussione

Ricerca discussione

Visualizza

Modal popup extender

DragPanel extenderche scompare

Permessi di invio