Avvio di una finestra popup modale dal codice del server (VB)

di Christian Wenz

Scaricare 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.

Informazioni generali

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.

Gradi

Prima di tutto, è necessario un controllo Web ASP.NET Button per dimostrare il funzionamento del controllo ModalPopup. Aggiungere tale pulsante all'interno dell'elemento <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. Definiscilo come <asp:Panel> controllo e assicurati 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 sparire.

<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 sul 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">
 Sub ServerButton_Click(ByVal sender As Object, ByVal e As EventArgs)
 ClientScript.RegisterStartupScript(Me.GetType(), "key", "launchModal();", True)
 End Sub
</script>

Il compito di launchModal() è visualizzare ModalPopup. La launchModal() funzione viene eseguita dopo il caricamento della pagina HTML completa. In questo momento, tuttavia, il framework AJAX ASP.NET non è ancora stato completamente caricato. Pertanto, la funzione launchModal() si limita a impostare una variabile, poiché il controllo ModalPopup deve essere visualizzato successivamente.

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

La pageLoad() funzione JavaScript è una funzione speciale che viene eseguita una volta che ASP.NET AJAX è stato completamente caricato. Si aggiunge quindi il 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. Restituisce $find("mpe") pertanto 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)