Uso de TextBoxWatermark em um FormView (VB)

por Christian Wenz

Baixar PDF

O controle TextBoxWatermark no Kit de Ferramentas de Controle AJAX estende uma caixa de texto para que um texto seja exibido dentro da caixa. Quando um usuário clica na caixa, ela é esvaziada. Se o usuário sair da caixa sem inserir texto, o texto pré-preenchido reaparecerá. Isso também é possível em um controle FormView.

Visão geral

O TextBoxWatermark controle no Kit de Ferramentas de Controle AJAX estende uma caixa de texto para que um texto seja exibido dentro da caixa. Quando um usuário clica na caixa, ela é esvaziada. Se o usuário sair da caixa sem inserir texto, o texto pré-preenchido reaparecerá. Isso também é possível dentro de um FormView controle.

Etapas

Em primeiro lugar, uma fonte de dados é necessária. Este exemplo usa o banco de dados AdventureWorks e o microsoft SQL Server 2005 Express Edition. O banco de dados é uma parte opcional de uma instalação do Visual Studio (incluindo a edição expressa) e também está disponível como um download separado em https://go.microsoft.com/fwlink/?LinkId=64064. O banco de dados AdventureWorks faz parte do SQL Server 2005 Samples and Sample Databases (baixe em https://www.microsoft.com/download/details.aspx?id=10679). A maneira mais fácil de configurar o banco de dados é usar o Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) e anexar o arquivo de AdventureWorks.mdf banco de dados.

Para este exemplo, pressupomos que a instância do SQL Server 2005 Express Edition é chamada SQLEXPRESS e reside no mesmo computador que o servidor Web; essa também é a configuração padrão. Se a configuração for diferente, você precisará adaptar as informações de conexão para o banco de dados.

Para ativar a funcionalidade de ASP.NET AJAX e o Kit de Ferramentas de Controle, o ScriptManager controle deve ser colocado em qualquer lugar na página (mas dentro do <form> elemento):

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

Em seguida, adicione uma fonte de dados à página que dá suporte às DELETEinstruções , INSERT e UPDATE SQL. Se você estiver usando o Visual Studio assistente para criar a fonte de dados, lembre-se de que um bug na versão atual não prefixa o nome da tabela (Vendor) com Purchasing. A marcação a seguir mostra a sintaxe correta:

<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>

Lembre-se do nome (ID) da fonte de dados, pois ela será usada na DataSourceID propriedade do FormView controle. A <InsertItemTemplate> seção do contém uma caixa de FormView texto que é estendida pelo TextBoxWatermarkExtender controle . Verifique se o extensor reside dentro do modelo e não fora dele.

<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>

Agora, quando o usuário muda para o modo de inserção do FormView controle, o campo de texto do novo fornecedor é pré-preenchido graças ao TextBoxWatermarkExtender controle . Um clique dentro da caixa de texto permite que o texto do preenchimento desapareça.

A marca d'água no campo vem do extensor (Clique para exibir a imagem em tamanho real)