Usar TextBoxWatermark en un FormView (C#)

por Christian Wenz

Descargar PDF

El control TextBoxWatermark del AJAX Control Toolkit extiende un cuadro de texto para que se muestre un texto dentro del cuadro. Cuando un usuario hace clic en el cuadro, se vacía. Si el usuario deja el cuadro sin escribir texto, vuelve a aparecer el texto rellenado previamente. Esto también es posible dentro de un control FormView.

Información general

El control TextBoxWatermark de AJAX Control Toolkit extiende un cuadro de texto para que se muestre un texto dentro del cuadro. Cuando un usuario hace clic en el cuadro, se vacía. Si el usuario deja el cuadro sin escribir texto, vuelve a aparecer el texto rellenado previamente. Esto también es posible dentro de un FormView control.

Pasos

En primer lugar, se requiere un origen de datos. En este ejemplo se usa la base de datos AdventureWorks y Microsoft SQL Server 2005 Express Edition. La base de datos es una parte opcional de una instalación de Visual Studio (incluida la edición express) y también está disponible como una descarga independiente en https://go.microsoft.com/fwlink/?LinkId=64064. La base de datos AdventureWorks forma parte de los ejemplos y bases de datos de ejemplo de SQL Server 2005 (descargue en https://www.microsoft.com/download/details.aspx?id=10679). La manera más fácil de configurar la base de datos es usar Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) y adjuntar el AdventureWorks.mdf archivo de base de datos.

En este ejemplo, se supone que la instancia de SQL Server 2005 Express Edition se llama SQLEXPRESS y reside en la misma máquina que el servidor web; esta es también la configuración predeterminada. Si la configuración es diferente, tiene que adaptar la información de conexión a la base de datos.

Para activar la funcionalidad de AJAX ASP.NET y el Control Toolkit, el control ScriptManager debe colocarse en cualquier parte de la página (pero dentro del elemento <form>):

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

A continuación, agregue un origen de datos a la página que admita las instrucciones SQL DELETE, INSERT y UPDATE. Si usa el asistente de Visual Studio para crear el origen de datos, tenga en cuenta que un error en la versión actual no escribe Purchasing delante del nombre de la tabla (Vendor). El marcado siguiente muestra la sintaxis correcta:

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

Recuerde el nombre (ID) del origen de datos, ya que se usará en la DataSourceID propiedad del control FormView. La <InsertItemTemplate> sección de contiene un cuadro de FormView texto extendido por el TextBoxWatermarkExtender control. Asegúrese de que el extensor reside dentro de la plantilla y no fuera de ella.

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

Cuando el usuario cambia al modo de inserción del control FormView, el campo de texto del nuevo proveedor se rellena previamente gracias al control TextBoxWatermarkExtender. Un clic dentro del cuadro de texto permite que el texto del relleno desaparezca.

La marca de agua del campo procede del extensor (Haga clic para ver la imagen a tamaño completo)

Siguiente