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