Использование TextBoxWatermark в FormView (VB)

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

Скачать в формате PDF

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

Обзор

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

Шаги

Во-первых, требуется источник данных. В этом примере используется база данных AdventureWorks и Microsoft SQL Server 2005 Express Edition. База данных является необязательной частью установки Visual Studio (включая экспресс-выпуск), а также доступна как отдельная загрузка в разделе 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 и находится на том же компьютере, что и веб-сервер. Это также настройка по умолчанию. Если настройка отличается, необходимо адаптировать сведения о подключении для базы данных.

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

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

Затем добавьте источник данных на страницу, который поддерживает инструкции SQL DELETE, INSERT и UPDATE. Если вы используете помощник 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) источника данных, так как оно будет использоваться в DataSourceID свойстве FormView элемента управления. Раздел <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. Щелчок внутри текстового поля удаляет текст-заполнитель.

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