在 FormView 中使用 TextBoxWatermark (VB)

作者 :Christian Wenz

下载 PDF

AJAX 控件工具包中的 TextBoxWatermark 控件扩展文本框,以便在框中显示文本。 当用户单击框时,该框将被清空。 如果用户在未输入文本的情况下离开框,则预填充的文本将重新出现。 这也可以在 FormView 控件中实现。

概述

TextBoxWatermark AJAX 控件工具包中的 控件扩展文本框,以便在框中显示文本。 当用户单击框时,该框将被清空。 如果用户在未输入文本的情况下离开框,则预填充的文本将重新出现。 这在 控件中 FormView 也是可能的。

步骤

首先,需要数据源。 此示例使用 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" />

然后,将数据源添加到支持 DELETEINSERTUPDATE SQL 语句的页面。 如果使用 Visual Studio 助手创建数据源,请注意,当前版本中的 bug 不会将表名称 (Vendor) 前缀Purchasing。 以下标记显示了正确的语法:

<asp:SqlDataSource ID="sds" runat="server" ConnectionString="Data
 Source=(local)\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True"
 DeleteCommand="DELETE FROM [Purchasing].[Vendor] WHERE [VendorID] = @VendorID"
 InsertCommand="INSERT INTO [Purchasing].[Vendor] ([Name]) VALUES (@Name)"
 ProviderName="System.Data.SqlClient"
 SelectCommand="SELECT [VendorID], [Name] FROM [Purchasing].[Vendor]"
 UpdateCommand="UPDATE [Purchasing].[Vendor] SET [Name] = @Name WHERE [VendorID] = @VendorID">
 <DeleteParameters>
 <asp:Parameter Name="VendorID" Type="Int32" />
 </DeleteParameters>
 <UpdateParameters>
 <asp:Parameter Name="Name" Type="String" />
 <asp:Parameter Name="VendorID" Type="Int32" />
 </UpdateParameters>
 <InsertParameters>
 <asp:Parameter Name="Name" Type="String" />
 </InsertParameters>
</asp:SqlDataSource>

请记住数据源的名称 (ID) ,因为它将在 控件的 FormView 属性中使用DataSourceID<InsertItemTemplate>FormView 部分包含由 TextBoxWatermarkExtender 控件扩展的文本框。 确保扩展程序驻留在模板中,而不是模板外部。

<div>
 <asp:FormView ID="FormView1" runat="server" DataSourceID="sds" AllowPaging="True">
 <ItemTemplate>
 <%# Eval("Name") %>
 <asp:LinkButton ID="btnNew" runat="server" CommandName="New" Text="Insert" />
 <asp:LinkButton ID="btnEdit" runat="server" CommandName="Edit" Text="Edit" />
 <asp:LinkButton ID="btnDelete" runat="server" CommandName="Delete" Text="Delete" />
 </ItemTemplate>
 <EditItemTemplate>
 <asp:TextBox ID="tbEdit" runat="server" Text='<%# Bind("Name") %>' />
 <asp:LinkButton ID="btnUpdate" runat="server" CommandName="Update" Text="Update" />
 </EditItemTemplate>
 <InsertItemTemplate>
 <asp:TextBox ID="tbNew" runat="server" Text='<%# Bind("Name") %>' />
 <asp:LinkButton ID="btnInsert" runat="server" CommandName="Insert" Text="Insert" />
 <ajaxToolkit:TextBoxWatermarkExtender ID="tbwe" runat="server"
 TargetControlID="tbNew" WatermarkText=" Vendor name " />
 </InsertItemTemplate>
 </asp:FormView>
</div>

现在,当用户切换到控件的 FormView 插入模式时,由于控件,新供应商的文本字段已 TextBoxWatermarkExtender 预先填充。 在文本框中单击可让填充文本消失。

字段中的水印来自扩展器

字段中的水印来自扩展器 (单击以查看全尺寸图像)