Avvio di una finestra popup modale dal codice server (C#)

di Christian Wenz

Scarica il PDF

Il controllo ModalPopup in AJAX Control Toolkit offre un modo semplice per creare un popup modale usando i mezzi lato client. Tuttavia, alcuni scenari richiedono che l'apertura del popup modale venga attivata sul lato server.

Panoramica

Il controllo ModalPopup in AJAX Control Toolkit offre un modo semplice per creare un popup modale usando i mezzi lato client. Tuttavia, alcuni scenari richiedono che l'apertura del popup modale venga attivata sul lato server.

Passaggi

Prima di tutto, è necessario un controllo Web ASP.NET Button per dimostrare il funzionamento del controllo ModalPopup. Aggiungere un pulsante di questo tipo all'interno dell'elemento del <modulo> in una nuova pagina:

<asp:Button ID="ClientButton" runat="server" Text="Launch Modal Popup (Client)" />

È quindi necessario il markup per il popup che si vuole creare. Definirlo come <asp:Panel> controllo e assicurarsi che includa un controllo Button. Il controllo ModalPopup offre la funzionalità per fare in modo che tale pulsante chiuda il popup; altrimenti non c'è modo semplice per lasciarlo svanire.

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

Aggiungere quindi il controllo ModalPopup dalla ASP.NET AJAX Toolkit alla pagina. Impostare le proprietà per il pulsante che carica il controllo, il pulsante che lo rende scomparso e l'ID del popup effettivo.

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlId="ClientButton" 
 PopupControlID="ModalPanel" OkControlID="OKButton" />

Come per tutte le pagine Web basate su ASP.NET AJAX; Script Manager è necessario per caricare le librerie JavaScript necessarie per i diversi browser di destinazione:

<asp:ScriptManager ID="asm" runat="server" />

Eseguire l'esempio nel browser. Quando si fa clic sul pulsante, viene visualizzato il popup modale. Per ottenere lo stesso effetto usando il codice lato server, è necessario un nuovo pulsante:

<asp:Button ID="ServerButton" runat="server" Text="Launch Modal Popup (Server)" 
 OnClick="ServerButton_Click" />

Come si può notare, un clic sul pulsante genera un postback ed esegue il ServerButton_Click() metodo nel server. In questo metodo viene eseguita una funzione JavaScript denominata launchModal() per essere esatta, la funzione JavaScript verrà eseguita dopo il caricamento della pagina:

<script runat="server">
 protected void ServerButton_Click(object sender, EventArgs e)
 {
 ClientScript.RegisterStartupScript(this.GetType(), "key", "launchModal();", true);
 }
</script>

Il processo di launchModal() consiste nel visualizzare ModalPopup. La launchModal() funzione viene eseguita dopo il caricamento della pagina HTML completa. In questo momento, tuttavia, il framework ASP.NET AJAX non è stato ancora completamente caricato. Pertanto, la launchModal() funzione imposta solo una variabile che il controllo ModalPopup deve essere visualizzato più avanti in:

<script type="text/javascript">
 var launch = false;
 function launchModal() 
 {
 launch = true;
 }

La pageLoad() funzione JavaScript è una funzione speciale che viene eseguita una volta ASP.NET AJAX è stato completamente caricato. Aggiungere quindi codice a questa funzione per visualizzare il controllo ModalPopup, ma solo se launchModal() è stato chiamato prima:

function pageLoad() 
 {
 if (launch) 
 {
 $find("mpe").show();
 }
 }
</script>

La $find() funzione cerca un elemento denominato nella pagina e prevede l'ID lato server come parametro. $find("mpe") Restituisce quindi la rappresentazione client del controllo ModalPopup. Il relativo show() metodo consente la visualizzazione del popup.

Il popup modale viene visualizzato quando si fa clic su uno dei pulsanti (fare clic per visualizzare l'immagine a dimensione intera)

Avanti