Uso di ModalPopup con un controllo Repeater (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. È anche possibile usare questo controllo all'interno di un ripetitore.

Informazioni generali

Il controllo ModalPopup in AJAX Control Toolkit offre un modo semplice per creare un popup modale usando i mezzi lato client. È anche possibile usare questo controllo all'interno di un ripetitore.

Gradi

Prima di tutto, è necessaria un'origine dati. Questo esempio usa il database AdventureWorks e Microsoft SQL Server 2005 Express Edition. Il database è una parte facoltativa di un'installazione di Visual Studio (inclusa l'edizione rapida) ed è disponibile anche come download separato in https://go.microsoft.com/fwlink/?LinkId=64064. Il database AdventureWorks fa parte degli esempi e dei database di esempio di SQL Server 2005 (scaricare all'indirizzo https://www.microsoft.com/download/details.aspx?id=10679). Il modo più semplice per impostare il database consiste nell'usare Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) e allegare il file di AdventureWorks.mdf database. Per questo esempio si presuppone che l'istanza di SQL Server 2005 Express Edition venga chiamata SQLEXPRESS e risieda nello stesso computer del server Web. Si tratta anche dell'installazione predefinita. Se la configurazione è diversa, è necessario adattare le informazioni di connessione per il database. 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'origine dati alla pagina. Per usare una quantità limitata di dati, vengono selezionate solo le prime cinque voci nella tabella Vendor del database AdventureWorks. Se si usa l'assistente di Visual Studio per creare l'origine dati, tenere presente che un bug nella versione corrente non antepone il nome della tabella (Vendor) con Purchasing. Il markup seguente illustra la sintassi corretta:

<asp:SqlDataSource ID="sds1" runat="server" ConnectionString="Data
 Source=(local)\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True"
 ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5
 [VendorID], [Name] FROM [Purchasing].[Vendor]" />

Aggiungere quindi un pannello che funge da popup modale. Contiene un Button controllo per chiudere di nuovo il popup:

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 Are you sure?!<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

Per far funzionare il popup all'interno del ripetitore, il ModalPopupExtender controllo deve essere inserito all'interno della <ItemTemplate> sezione del ripetitore. Quindi il pannello si trova all'esterno del ripetitore, ma l'extender si trova all'interno. Ecco il markup per il ripetitore:

<div>
 <ul>
 <asp:Repeater ID="rep1" DataSourceID="sds1" runat="server">
 <ItemTemplate>
 <li>
 <%#DataBinder.Eval(Container.DataItem, "Name")%>
 <asp:LinkButton ID="btn1" Text="Remove Item" runat="server" />
 <ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
 TargetControlId="btn1" PopupControlID="ModalPanel" OkControlID="OKButton" />
 </li>
 </ItemTemplate>
 </asp:Repeater>
 </ul>
</div>

Quindi, ogni elemento nell'origine dati viene visualizzato con un pulsante accanto ad esso che attiva la finestra modale.

Il popup modale può essere attivato per ciascun elemento della sorgente dati (fare clic per visualizzare l'immagine a schermo intero)