Использование элемента управления TextBoxWatermark в элементе управления FormView (VB)

Кристиан Венц

Загрузить PDF-файл

Элемент управления TextBoxWatermark в наборе элементов управления AJAX расширяет текстовое поле, чтобы текст отображался в поле. Когда пользователь щелкает поле, оно очищается. Если пользователь покидает поле, не вводя текст, предварительно заполненный текст появляется снова. Это также возможно в элементе управления FormView.

Общие сведения

Элемент TextBoxWatermark управления в наборе элементов управления AJAX расширяет текстовое поле, чтобы в ней отображался текст. Когда пользователь щелкает поле, оно очищается. Если пользователь покидает поле, не вводя текст, предварительно заполненный текст появляется снова. Это также возможно в элементе FormView управления .

Этапы

Прежде всего, требуется источник данных. В этом примере используется база данных AdventureWorks и SQL Server 2005, экспресс-выпуск Майкрософт. База данных является необязательной частью установки Visual Studio (включая экспресс-выпуск) и также доступна для отдельной загрузки в разделе https://go.microsoft.com/fwlink/?LinkId=64064. База данных AdventureWorks является частью SQL Server 2005 Samples and Sample Databases (скачать по адресу https://www.microsoft.com/download/details.aspx?id=10679). Самый простой способ настроить базу данных — использовать SQL Server Management Studio Майкрософт (/sql/ssms/download-sql-server-management-studio-ssms) и присоединить AdventureWorks.mdf файл базы данных.

В этом примере предполагается, что экземпляр SQL Server 2005, экспресс-выпуск вызывается SQLEXPRESS и находится на том же компьютере, что и веб-сервер. Это также настройка по умолчанию. Если настройка отличается, необходимо адаптировать сведения о подключении для базы данных.

Чтобы активировать функциональные возможности ASP.NET AJAX и control Toolkit, ScriptManager элемент управления должен быть размещен в любом месте страницы (но внутри <form> элемента ):

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

Затем добавьте на страницу источник данных, который поддерживает инструкции DELETESQL и . INSERTUPDATE Если для создания источника данных используется помощник Visual Studio, следует помнить, что ошибка в текущей версии не содержит префикс имени таблицы (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) источника данных, так как оно будет использоваться в свойстве DataSourceIDFormView элемента управления . Раздел <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 управления . Щелчок внутри текстового поля позволяет тексту заполнители исчезнуть.

Подложка в поле поступает из расширителя (щелкните для просмотра полноразмерного изображения)

НазадВперед