Menggunakan ModalPopup dengan Repeater Control (C#)

oleh Christian Wenz

Unduh PDF

Kontrol ModalPopup di Toolkit Kontrol AJAX menawarkan cara sederhana untuk membuat popup modal menggunakan cara sisi klien. Dimungkinkan juga untuk menggunakan kontrol ini dalam pengulang.

Gambaran Umum

Kontrol ModalPopup di Toolkit Kontrol AJAX menawarkan cara sederhana untuk membuat popup modal menggunakan cara sisi klien. Dimungkinkan juga untuk menggunakan kontrol ini dalam pengulang.

Langkah-langkah

Pertama-tama, sumber data diperlukan. Sampel ini menggunakan database AdventureWorks dan microsoft SQL Server 2005 Express Edition. Database adalah bagian opsional dari penginstalan Visual Studio (termasuk edisi ekspres) dan juga tersedia sebagai unduhan terpisah di bawah https://go.microsoft.com/fwlink/?LinkId=64064. Database AdventureWorks adalah bagian dari Sampel SQL Server 2005 dan Database Sampel (unduh di https://www.microsoft.com/download/details.aspx?id=10679). Cara termudah untuk menyiapkan database adalah dengan menggunakan Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) dan melampirkan AdventureWorks.mdf file database. Untuk sampel ini, kami berasumsi bahwa instans SQL Server 2005 Express Edition dipanggil SQLEXPRESS dan berada di komputer yang sama dengan server web; ini juga merupakan pengaturan default. Jika penyetelan Anda berbeda, Anda harus menyesuaikan informasi koneksi untuk database. Untuk mengaktifkan fungsionalitas ASP.NET AJAX dan Control Toolkit, ScriptManager kontrol harus diletakkan di mana saja di halaman (tetapi dalam <form> elemen ):

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

Kemudian, tambahkan sumber data ke halaman. Untuk menggunakan data dalam jumlah terbatas, kami hanya memilih lima entri pertama dalam tabel Vendor database AdventureWorks. Jika Anda menggunakan asisten Visual Studio untuk membuat sumber data, ingatlah bahwa bug dalam versi saat ini tidak mengawali nama tabel (Vendor) dengan Purchasing. Markup berikut menunjukkan sintaks yang benar:

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

Selanjutnya, tambahkan panel yang berfungsi sebagai popup modal. Ini berisi Button kontrol untuk menutup popup lagi:

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

Untuk membuat popup berfungsi di dalam pengulang, ModalPopupExtender kontrol harus diletakkan di dalam bagian <ItemTemplate> pengulang. Jadi panel berada di luar pengulang, tetapi extender berada di dalam. Berikut adalah markup untuk pengulang:

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

Kemudian, setiap item di sumber data ditampilkan dengan tombol di sampingnya yang memicu popup modal.

Popup modal dapat dipicu untuk setiap entri sumber data (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya