Utilisation de TextBoxWatermark dans un FormView (VB)
par Christian Wenz
Le contrôle TextBoxWatermark dans ajax Control Toolkit étend une zone de texte afin qu’un texte s’affiche dans la zone. Lorsqu’un utilisateur clique dans la zone, celle-ci est vidée. Si l’utilisateur quitte la zone sans entrer de texte, le texte prérempli réapparaît. Cela est également possible dans un contrôle FormView.
Vue d’ensemble
Le TextBoxWatermark contrôle dans ajax Control Toolkit étend une zone de texte afin qu’un texte s’affiche dans la zone. Lorsqu’un utilisateur clique dans la zone, celle-ci est vidée. Si l’utilisateur quitte la zone sans entrer de texte, le texte prérempli réapparaît. Cela est également possible dans un FormView contrôle.
Étapes
Tout d’abord, une source de données est requise. Cet exemple utilise la base de données AdventureWorks et microsoft SQL Server 2005 Express Edition. La base de données est une partie facultative d’une installation de Visual Studio (y compris l’édition express) et est également disponible en tant que téléchargement distinct sous https://go.microsoft.com/fwlink/?LinkId=64064. La base de données AdventureWorks fait partie du SQL Server 2005 Samples and Sample Databases (télécharger à l’adresse https://www.microsoft.com/download/details.aspx?id=10679). Le moyen le plus simple de configurer la base de données consiste à utiliser microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) et à attacher le AdventureWorks.mdf fichier de base de données.
Pour cet exemple, nous partons du principe que le instance du SQL Server 2005 Express Edition est appelé SQLEXPRESS et réside sur la même machine que le serveur web ; il s’agit également de la configuration par défaut. Si votre configuration diffère, vous devez adapter les informations de connexion pour la base de données.
Pour activer les fonctionnalités de ASP.NET AJAX et du Kit de ressources de contrôle, le ScriptManager contrôle doit être placé n’importe où sur la page (mais dans l’élément <form> ) :
<asp:ScriptManager ID="asm" runat="server" />
Ensuite, ajoutez une source de données à la page qui prend en charge les DELETEinstructions SQL et INSERT .UPDATE Si vous utilisez le assistant Visual Studio pour créer la source de données, n’oubliez pas qu’un bogue dans la version actuelle ne préfixe pas le nom de la table (Vendor) avec Purchasing. Le balisage suivant montre la syntaxe correcte :
<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>
N’oubliez pas le nom (ID) de la source de données, car elle sera utilisée dans la DataSourceID propriété du FormView contrôle. La <InsertItemTemplate> section du FormView contient une zone de texte qui est étendue par le TextBoxWatermarkExtender contrôle. Assurez-vous que l’extension réside dans le modèle et non en dehors de celui-ci.
<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>
À présent, lorsque l’utilisateur passe en mode d’insertion du FormView contrôle, le champ de texte du nouveau fournisseur est prérempli grâce au TextBoxWatermarkExtender contrôle. Un clic à l’intérieur de la zone de texte permet au texte de remplissage de disparaître.
Le filigrane dans le champ provient de l’extension (Cliquez pour afficher l’image en taille réelle)
