Utilisation du contrôle TextBoxWatermark dans un FormView

Cet article est la traduction la plus fidèle possible de l'article original : Using TextBoxWatermark in a FormView

Tout d'abord, une source de données est nécessaire. Cet exemple utilise la base de données AdventureWorks et Microsoft SQL Server 2005 Express Edition. SQL Server 2005 Express Edition est une partie optionnelle d'une installation de Visual Studio (y compris Express Edition) et est également disponible en téléchargement séparé à l'adresse http://msdn.microsoft.com/fr-fr/express/bb410791.aspx. La base de données AdventureWorks fait partie des exemples fournis pour SQL Server 2005 (à télécharger à http://codeplex.com/SqlServerSamples). La façon la plus simple dce mettre en place la base de données est d'utiliser Microsoft SQL Server Management Studio Express (http://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&DisplayLang=fr) et d'attacher le fichier AdventureWorks.mdf à la base de données.

Pour cet exemple, nous supposons que l'instance de SQL Server 2005 Express Edition est appelée SQLEXPRESS et réside sur la même machine que le serveur web, ce qui est également la configuration par défaut. Si votre configuration est différente, vous devrez adapter les informations de connexion à la base de données.

Afin d'activer les fonctionnalités d'ASP.NET AJAX et du Control Toolkit, le contrôle ScriptManager doit être mis n'importe où sur la page (mais dans l'élément <form>) :

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

Ensuite, ajoutez à la page une source de données contenant les opérations SQL DELETE, INSERT et UPDATE. Si vous utilisez l'assistant de Visual Studio pour créer la source de données, gardez à l'esprit d'un bug dans la version actuelle fait que le préfixe Purchasing n'est pas ajouté au nom de la table Vendor. Le marquage 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. Cette identification doit être utilisée dans la propriété DataSourceID du contrôle FormView. La section <InsertItemTemplate> du contrôle FormView contient une zone de texte qui est étendue par le contrôle TextBoxWatermarkExtender. Assurez-vous que l'extenseur se trouve dans le modèle, et pas 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="&lt;Vendor name&gt;" />           
		</InsertItemTemplate>      
	</asp:FormView> 
</div>

Maintenant, lorsque l'utilisateur entre dans le mode d'insertion du contrôle FormView, le champ de texte pour le nouveau vendeur est prérempli grâce au contrôle TextBoxWatermarkExtender. Un clic dans la zone de texte fera disparaître le texte de remplissage.