通过 Repeater 控件使用 ModalPopup (C#)

作者 ：Christian Wenz

下载 PDF

AJAX 控件工具包中的 ModalPopup 控件提供了一种使用客户端方式创建模式弹出窗口的简单方法。 还可以在中继器内使用此控件。

概述

AJAX 控件工具包中的 ModalPopup 控件提供了一种使用客户端方式创建模式弹出窗口的简单方法。 还可以在中继器内使用此控件。

步骤

首先，需要数据源。 此示例使用 AdventureWorks 数据库和 Microsoft SQL Server 2005 Express Edition。 数据库是 Visual Studio 安装 (包括 express edition) 的可选部分，也可在 下 https://go.microsoft.com/fwlink/?LinkId=64064单独下载。 AdventureWorks 数据库是 SQL Server 2005 示例和示例数据库的一部分， () https://www.microsoft.com/download/details.aspx?id=10679 下载。 设置数据库的最简单方法是使用 Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) 并附加AdventureWorks.mdf数据库文件。 对于此示例，我们假定SQL Server 2005 Express Edition的实例被调用SQLEXPRESS并驻留在 Web 服务器所在的计算机上;这也是默认设置。 如果设置不同，则必须调整数据库的连接信息。 若要激活 ASP.NET AJAX 和 Control Toolkit 的功能， ScriptManager 必须将控件放置在页面上的任意位置 (但 <form> 位于 元素) ：

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

然后，将数据源添加到页面。 为了使用有限的数据量，我们只选择 AdventureWorks 数据库的供应商表中的前五个条目。 如果使用 Visual Studio 助手创建数据源，请注意，当前版本中的 bug 不会将表名称 (Vendor) 前缀Purchasing。 以下标记显示了正确的语法：

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

接下来，添加一个用作模式弹出窗口的面板。 它包含一个 Button 用于再次关闭弹出窗口的控件：

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

为了使弹出窗口在中继器内正常工作， ModalPopupExtender 必须将控件放在 <ItemTemplate> 中继器的 节中。 因此，面板位于中继器外部，但扩展器位于内部。 下面是中继器标记：

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

然后，数据源中的每个项都会显示，旁边有一个按钮，用于触发模式弹出窗口。

可以针对每个数据源条目触发模式弹出窗口， (单击以查看全尺寸图像)

上一页下一页