Verwenden von ModalPopup mit einem Wiederholungssteuerelement (VB)

von Christian Wenz

PDF herunterladen

Das ModalPopup-Steuerelement im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein modales Popup mit clientseitigen Mitteln zu erstellen. Es ist auch möglich, dieses Steuerelement in einem Repeater zu verwenden.

Überblick

Das ModalPopup-Steuerelement im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein modales Popup mit clientseitigen Mitteln zu erstellen. Es ist auch möglich, dieses Steuerelement in einem Repeater zu verwenden.

Schritte

Zunächst ist eine Datenquelle erforderlich. In diesem Beispiel werden die AdventureWorks-Datenbank und die Microsoft-SQL Server 2005 Express Edition verwendet. Die Datenbank ist optionaler Bestandteil einer Visual Studio-Installation (einschließlich Express Edition) und steht auch als separater Download unter https://go.microsoft.com/fwlink/?LinkId=64064zur Verfügung. Die AdventureWorks-Datenbank ist Teil der SQL Server 2005 Samples and Sample Databases (Download unter https://www.microsoft.com/download/details.aspx?id=10679). Die einfachste Möglichkeit zum Einrichten der Datenbank besteht darin, die Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) zu verwenden und die AdventureWorks.mdf Datenbankdatei anzufügen. Für dieses Beispiel wird davon ausgegangen, dass die instance der SQL Server 2005 Express Edition aufgerufen SQLEXPRESS wird und sich auf demselben Computer wie der Webserver befindet. Dies ist auch das Standardsetup. Wenn ihr Setup unterschiedlich ist, müssen Sie die Verbindungsinformationen für die Datenbank anpassen. Um die Funktionalität von ASP.NET AJAX und dem Control Toolkit zu aktivieren, muss das ScriptManager Steuerelement an einer beliebigen Stelle auf der Seite (aber innerhalb des <form> Elements) platziert werden:

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

Fügen Sie dann der Seite eine Datenquelle hinzu. Um eine begrenzte Datenmenge zu verwenden, wählen wir nur die ersten fünf Einträge in der Vendor-Tabelle der AdventureWorks-Datenbank aus. Wenn Sie den Visual Studio-Assistent verwenden, um die Datenquelle zu erstellen, beachten Sie, dass ein Fehler in der aktuellen Version dem Tabellennamen (Vendor) Purchasingnicht vorangestellt wird. Das folgende Markup zeigt die richtige Syntax:

<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]" />

Fügen Sie als Nächstes einen Bereich hinzu, der als modales Popup dient. Es enthält ein Button Steuerelement zum erneuten Schließen des Popups:

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

Damit das Popup innerhalb des Repeaters funktioniert, muss das ModalPopupExtender Steuerelement innerhalb des <ItemTemplate> Abschnitts des Repeaters platziert werden. Das Panel befindet sich also außerhalb des Repeaters, aber der Extender befindet sich darin. Hier sehen Sie das Markup für den Repeater:

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

Anschließend wird jedes Element in der Datenquelle mit einer Schaltfläche daneben angezeigt, die das modale Popup auslöst.

Das modale Popup kann für jeden Datenquelleneintrag ausgelöst werden (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

ZurückWeiter