Leggere in inglese

Condividi tramite


Gestione dei postback da un controllo ModalPopup (VB)

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. È necessario prestare particolare attenzione quando viene creato un postback dall'interno del popup.

Panoramica

Il controllo ModalPopup in AJAX Control Toolkit offre un modo semplice per creare un popup modale usando i mezzi lato client. È necessario prestare particolare attenzione quando viene creato un postback dall'interno del popup.

Passaggi

Per attivare la funzionalità di ASP.NET AJAX e Control Toolkit, il ScriptManager controllo deve essere inserito in qualsiasi punto della pagina (ma all'interno dell'elemento <form> ):

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

Aggiungere quindi un pannello che funge da popup modale. Qui, l'utente può immettere un nome e un indirizzo di posta elettronica. Un pulsante viene usato per chiudere il popup e salvare le informazioni. Si noti che l'attributo OnClick è impostato in modo che si verifichi un postback quando si fa clic su questo pulsante:

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 Name: <asp:TextBox ID="tbName" runat="server" /><br/>
 Email: <asp:TextBox ID="tbEmail" runat="server" /><br/>
 <asp:Button ID="OKButton" runat="server" Text="Save"OnClick="SaveData" />
</asp:Panel>

La pagina stessa è costituita da due etichette per esattamente le stesse informazioni: nome e indirizzo di posta elettronica. Un pulsante viene usato per attivare il popup modale:

<div>
 Contact Information:
 <asp:Label ID="lblName" runat="server" Text="AJAX Fanatic"/><br />
 <asp:Label ID="lblEmail" runat="server" Text="ajax@fanatic"/><br />
 <asp:Button ID="btn1" runat="server" Text="Edit"/>
</div>

Per visualizzare il popup, aggiungere il ModalPopupExtender controllo . Impostare l'attributo PopupControlID sull'ID del pannello e TargetControlID sull'ID del pulsante:

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btn1" PopupControlID="ModalPanel" />

A questo punto, ogni volta che si fa clic sul Save pulsante all'interno del popup modale, viene eseguito il metodo lato SaveData() server. È possibile salvare i dati immessi in un archivio dati. Per semplicità, i nuovi dati vengono semplicemente restituiti nell'etichetta:

Protected Sub SaveData(ByVal sender As Object, ByVal e As EventArgs)
 lblName.Text = HttpUtility.HtmlEncode(tbName.Text)
 lblEmail.Text = HttpUtility.HtmlEncode(tbEmail.Text)
End Sub

Inoltre, i controlli casella di testo all'interno del popup modale devono essere compilati con il nome e il messaggio di posta elettronica correnti. Tuttavia, questa operazione è necessaria solo quando non si verifica alcun postback. Se è presente un postback, la funzionalità viewstate ASP.NET riempirà automaticamente le caselle di testo con i valori appropriati.

Sub Page_Load()
 If Not Page.IsPostBack Then
 tbName.Text = lblName.Text
 tbEmail.Text = lblEmail.Text
 End If
End Sub

Il popup modale causa un postback

Il popup modale causa un postback (fare clic per visualizzare l'immagine a dimensione intera)