Udostępnij za pośrednictwem

Używanie kontrolki ModalPopup z kontrolką elementu powtarzanego (C#)

  • Artykuł

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka ModalPopup w zestawie narzędzi AJAX Control Toolkit oferuje prosty sposób tworzenia modalnego okna podręcznego przy użyciu środków po stronie klienta. Można również użyć tej kontrolki w kontrolce powtarzanej.

Omówienie

Kontrolka ModalPopup w zestawie narzędzi AJAX Control Toolkit oferuje prosty sposób tworzenia modalnego okna podręcznego przy użyciu środków po stronie klienta. Można również użyć tej kontrolki w kontrolce powtarzanej.

Kroki

Przede wszystkim wymagane jest źródło danych. W tym przykładzie użyto bazy danych AdventureWorks i SQL Server 2005 Express Edition firmy Microsoft. Baza danych jest opcjonalną częścią instalacji programu Visual Studio (w tym wersji ekspresowej) i jest również dostępna jako oddzielny plik do pobrania w obszarze https://go.microsoft.com/fwlink/?LinkId=64064. Baza danych AdventureWorks jest częścią przykładów i przykładowych baz danych SQL Server 2005 (pobierz na stronie https://www.microsoft.com/download/details.aspx?id=10679). Najprostszym sposobem skonfigurowania bazy danych jest użycie programu Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) i dołączenie AdventureWorks.mdf pliku bazy danych. W tym przykładzie przyjęto założenie, że wystąpienie SQL Server 2005 Express Edition jest wywoływane SQLEXPRESS i znajduje się na tej samej maszynie co serwer internetowy. Jest to również konfiguracja domyślna. Jeśli konfiguracja jest inna, musisz dostosować informacje o połączeniu dla bazy danych. Aby można było aktywować funkcje ASP.NET AJAX i Control Toolkit, kontrolka ScriptManager musi zostać umieszczona w dowolnym miejscu na stronie (ale w elemecie <form> ):

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

Następnie dodaj źródło danych do strony. Aby użyć ograniczonej ilości danych, wybieramy tylko pięć pierwszych wpisów w tabeli Vendor bazy danych AdventureWorks. Jeśli używasz programu Visual Studio asystent do utworzenia źródła danych, pamiętaj, że usterka w bieżącej wersji nie prefiksuje nazwy tabeli (Vendor) za pomocą Purchasingpolecenia . Na poniższej adiustacji wyświetlana jest poprawna składnia:

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

Następnie dodaj panel, który służy jako modalne okno podręczne. Zawiera kontrolkę, Button aby ponownie zamknąć okno podręczne:

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

Aby okienko podręczne działało w powtarzaniu, kontrolka ModalPopupExtender musi zostać umieszczona w <ItemTemplate> sekcji repeatera. Panel jest więc poza wzmacniak, ale rozszerzenie znajduje się wewnątrz. Oto znaczniki dla repeatera:

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

Następnie każdy element w źródle danych jest wyświetlany za pomocą przycisku obok niego, który wyzwala modalne okno podręczne.

Modalne wyskakujące okienko może być wyzwalane dla każdego wpisu źródła danych

Modalne okienko podręczne można wyzwolić dla każdego wpisu źródła danych (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

WsteczDalej