Utilisation du contrôle TextBoxWatermark dans un FormView

Date de publication : 03 mai 2009 , Date de mise à jour : 03 mai 2009

Par Christian Wenz
 Philippe Vialatte (Traduction) (ma page DVP) (Blog)
 

Le contrôle TextBoxWatermark de l'AJAX Control Toolkit étend une zone de texte, de sorte qu'un texte est affiché dans la zone. Lorsque l'utilisateur clique dans la zone de texte, elle est vidée. Si l'utilisateur quitte la zone sans saisir de texte, le texte pré-rempli réapparaît. Cela est également possible à l'intérieur d'un contrôle FormView.
Voir une démo
Téléchargez le code de ce tutoriel

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Traduction
Étapes


Traduction

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


Étapes

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 fr  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 à fr 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 (fr  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.

Le 'watermark' dans le champ vient de l'extenseur


               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web