Použití ovládacího prvku ModalPopup v ovládacím prvku Repeater (C#)

Christian Wenz

Stáhnout PDF

Ovládací prvek ModalPopup v sadě nástrojů AJAX Control Nabízí jednoduchý způsob, jak vytvořit modální automaticky otevírané okno pomocí prostředků na straně klienta. Tento ovládací prvek je také možné použít v opakovači.

Přehled

Ovládací prvek ModalPopup v sadě nástrojů AJAX Control Nabízí jednoduchý způsob, jak vytvořit modální automaticky otevírané okno pomocí prostředků na straně klienta. Tento ovládací prvek je také možné použít v opakovači.

Postup

V první řadě se vyžaduje zdroj dat. Tato ukázka používá databázi AdventureWorks a microsoft SQL Server 2005 Express Edition. Databáze je volitelnou součástí instalace sady Visual Studio (včetně edice Express) a je také k dispozici jako samostatný soubor ke stažení v části https://go.microsoft.com/fwlink/?LinkId=64064. Databáze AdventureWorks je součástí SQL Server 2005 Samples and Sample Databases (ke stažení na adrese https://www.microsoft.com/download/details.aspx?id=10679). Nejjednodušším způsobem, jak databázi nastavit, je použít microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) a připojit AdventureWorks.mdf soubor databáze. U této ukázky předpokládáme, že se volá SQLEXPRESS instance SQL Server 2005 Express Edition a nachází se na stejném počítači jako webový server. Jedná se také o výchozí nastavení. Pokud se vaše nastavení liší, musíte upravit informace o připojení pro databázi. Aby bylo možné aktivovat funkce ASP.NET AJAX a Control Toolkit, ScriptManager musí být ovládací prvek umístěn kdekoli na stránce (ale v rámci elementu <form> ):

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

Potom na stránku přidejte zdroj dat. Abychom mohli použít omezené množství dat, vybereme pouze prvních pět položek v tabulce Vendor databáze AdventureWorks. Pokud k vytvoření zdroje dat používáte asistent sady Visual Studio, mějte na paměti, že při chybě v aktuální verzi není název tabulky (Vendor) předponou Purchasing. Následující kód ukazuje správnou syntaxi:

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

Dále přidejte panel, který slouží jako modální automaticky otevírané okno. Obsahuje ovládací prvek Button pro opětovné zavření automaticky otevírané nabídky:

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

Aby automaticky otevírané okno fungovalo v opakovači ModalPopupExtender , musí být ovládací prvek umístěn v <ItemTemplate> části opakovače. Panel je tedy mimo opakovač, ale extender je uvnitř. Tady je kód pro opakovač:

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

Každá položka ve zdroji dat se pak zobrazí s tlačítkem vedle ní, které aktivuje modální automaticky otevírané okno.

Modální automaticky otevírané okno se může aktivovat pro každou položku zdroje dat (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší