通过 Repeater 控件使用 ModalPopup (C#)
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>
然后,数据源中的每个项都会显示,旁边有一个按钮,用于触发模式弹出窗口。
可以针对每个数据源条目触发模式弹出窗口, (单击以查看全尺寸图像)