Tutoriel ASP.NET Web Forms : exemples de contrôles utilisateur

Dans ASP.Net, il est possible de créer du code réutilisable. Le code réutilisable peut être utilisé dans de nombreux endroits sans avoir besoin de réécrire le code.

Le code réutilisable permet de réduire le temps passé par le développeur après son écriture. Il peut être écrit une seule fois et réutilisé à de multiples endroits.

Créer un contrôle utilisateur dans ASP.Net

ASP.NET permet de créer des contrôles Web. Ces contrôles contiennent du code réutilisable et peuvent être utilisés dans toute l'application selon les besoins.

Prenons l'exemple de la création d'un contrôle utilisateur Web en ASP.Net.

Dans notre exemple :

• Nous allons créer un contrôle web.
• Il sera utilisé pour créer un composant d'en-tête.
• Il contiendra le texte mentionné ci-dessous : «Guru« 99 tutoriels » et « Ce tutoriel concerne ASP.Net ».

Travaillons avec notre application Web actuelle créée dans les sections précédentes. Suivons les étapes ci-dessous pour créer un contrôle utilisateur Web.

Étape 1) La première étape consiste à créer un contrôle utilisateur Web et à l'ajouter à notre solution Visual Studio.

1. Dans Visual Studio, accédez à l'Explorateur de solutions et cliquez avec le bouton droit sur la solution DemoApplication.
2. Sélectionnez l'élément de menu Ajouter -> Nouvel élément.

Étape 2) L'étape suivante consiste à choisir l'option de création d'un contrôle utilisateur web.

1. Dans la boîte de dialogue du projet, nous pouvons voir différentes options pour créer différents types de composants. Cliquez sur l'option « Web » sur le côté gauche.
2. Lorsque vous cliquez sur l'option « Web », vous voyez une option « Contrôle utilisateur des formulaires Web ». Cliquez sur cette option.
3. Nous donnons ensuite un nom au contrôle Web, «Guru99Contrôle".
4. Enfin, cliquez sur le bouton « Ajouter » pour laisser Visual Studio ajouter le contrôle utilisateur Web à notre solution.

Vous verrez alors le "Guru« 99Control » ajouté à la solution.

Étape 3) Il est maintenant temps d'ajouter le code personnalisé au contrôle utilisateur Web. Notre code sera basé sur la syntaxe HTML pure. Ajoutez le code suivant à 'GuruFichier '99Control.ascx'.

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Code Explication:-

1. Dans notre fichier de contrôle Web, nous créons d'abord un élément de tableau. Celui-ci servira à contenir deux lignes de texte qui afficheront «Guru« 99 tutoriels » et « Ce tutoriel concerne ASP.Net ».
2. Ensuite, nous définissons notre première ligne de tableau et y insérons le texte «Guru99 tutoriels.
3. Nous définissons ensuite notre deuxième ligne de tableau et mettons le texte comme suit : « Ce didacticiel est destiné à ASP.Net ».

NOTE: Pour l'instant, nous ne pouvons pas exécuter ce code ni afficher le résultat. La seule façon de vérifier son bon fonctionnement est de l'intégrer à notre application (fichier aspx). Nous verrons cela dans la section suivante.

Enregistrement des contrôles utilisateur sur un formulaire Web ASP.NET

Dans la section précédente, nous avons vu comment créer un contrôle Web personnalisé. Celui-ci permet d'afficher les deux lignes suivantes dans un formulaire Web :

• "Guru99 tutoriels
• "Ce didacticiel est destiné à ASP.Net."

Une fois le contrôle personnalisé créé, il faut l'utiliser dans notre application web. La première étape consiste à enregistrer le composant dans notre application (Demo.aspx). Cette étape est indispensable pour utiliser tout contrôle web personnalisé dans une application ASP.NET.

Voyons comment y parvenir. Les étapes ci-dessous font suite à la section précédente, dans laquelle nous avons créé notre contrôle personnalisé. Dans cette section, nous utiliserons ce contrôle dans notre… Démo.aspx Formulaire web. Nous allons d'abord enregistrer notre « contrôle » personnalisé dans le fichier Demo.aspx.

Étape 1) Assurez-vous de travailler sur le fichier demo.aspx. C'est dans ce fichier que le contrôle utilisateur Web sera enregistré. Pour ce faire, double-cliquez sur le fichier demo.aspx dans l'Explorateur de solutions de votre solution .NET.

Lorsque vous double-cliquez sur le formulaire, vous verrez probablement le code ci-dessous. Il s'agit du code par défaut ajouté par Visual Studio lorsqu'un formulaire web est ajouté à un projet ASP.NET. Ce code par défaut contient les étapes nécessaires pour que le formulaire puisse s'exécuter comme un formulaire web ASP.NET dans le navigateur.

Étape 2) Ajoutons maintenant le code permettant d'enregistrer le contrôle utilisateur. La capture d'écran ci-dessous illustre l'enregistrement du contrôle utilisateur ajouté au code de base ci-dessus.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Code Explication:-

1. La première étape consiste à enregistrer le contrôle utilisateur Web. Cela comprend les paramètres de base suivants :
   1. Le mot-clé 'Register' est utilisé pour enregistrer le contrôle utilisateur Web.
   2. Le paramètre Src est utilisé pour définir le nom du contrôle, qui dans notre cas est Guru99Contrôle.ascx.
   3. TagName et TagPrefix sont des noms individuels attribués au contrôle. Ceci permet de les référencer dans les pages HTML comme des contrôles HTML classiques.
2. Ensuite, nous référençons notre contrôle utilisateur Web via le TagPrefix:TagName qui a été attribué précédemment. Le TagPrefix:TagName indique que nous souhaitons utiliser notre contrôle Web personnalisé. Lorsque la page est traitée par le serveur Web, vous pouvez constater que nous avons utilisé la balise TWebControl:WebControl. Il traitera ensuite le «Guru99Contrôle en conséquence.
   1. Un identifiant facultatif est attribué au contrôle « Header ». Il est généralement recommandé d’attribuer un identifiant à un contrôle HTML.
   2. Enfin, l'attribut `runat="server"` garantit que le contrôle s'exécutera sur le serveur web. Pour tous les contrôles ASP.NET, il s'agit de l'attribut par défaut. Tous les contrôles ASP.NET (y compris les contrôles personnalisés) doivent s'exécuter sur le serveur. Leur résultat est ensuite envoyé du serveur au client et affiché dans le navigateur.

Lorsque le code ci-dessus est défini et que le projet est exécuté en utilisant Visual Studio, vous obtiendrez le résultat ci-dessous.

Production:-

Le message de sortie affiché dans le navigateur indique que le contrôle utilisateur Web a été exécuté avec succès.

Enregistrement global des contrôles ASP.Net dans le fichier de configuration web.config

Il peut arriver que l'on souhaite utiliser des contrôles utilisateur sur plusieurs pages d'une application .NET. Dans ce cas, il n'est pas nécessaire d'enregistrer ces contrôles sur chaque page ASP.NET.

• Dans .Net, vous pouvez effectuer l'enregistrement dans le fichier 'web.config'.
• Le fichier web.config est un fichier de configuration commun utilisé par toutes les pages web d'un projet .Net.
• Il contient les détails de configuration nécessaires pour le projet Web ASP.Net. Par exemple, une configuration courante dans le fichier web.config est la paramètre de cadre cible.
• Ce paramètre est utilisé pour identifier la version du framework .Net utilisée par l'application.

Vous trouverez ci-dessous un instantané du code par défaut dans le fichier web.config. La partie en surbrillance est la partie du framework cible.

Voyons comment nous pouvons enregistrer notre Guru99Control dans le fichier web.config.

Étape 1) Ouvrez le fichier web.config depuis l'Explorateur de solutions en double-cliquant dessus.

Lorsque vous ouvrez le fichier web.config, vous verrez peut-être la configuration ci-dessous. Le 'web.config' est ajouté automatiquement par Visual Studio lors de la création du projet. Il s'agit de la configuration de base requise pour que le projet ASP.Net fonctionne correctement.

Étape 2) Enregistrons maintenant notre composant dans le fichier web.config. Nous devons ajouter les lignes ci-dessous pour cela.

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src="~/Guru99Control.ascx" tagName="WebControl" />
		</controls>
	</pages>
	</system.web>
</configuration>

L'inscription comprend les sous-étapes suivantes :

1. Ajoutez une balise appelée . Cela signifie que toute la configuration des contrôles sera applicable à toutes les pages ASP.Net de la solution.
2. Le La balise signifie que vous ajoutez une configuration pour le contrôle utilisateur.
3. Nous enregistrons ensuite le contrôle utilisateur avec l'étiquette supplémentaire. Les autres paramètres (tagPrefix, tagName et src) restent inchangés.

Étape 3) N'oubliez pas d'aller sur la page « demo.aspx » et de supprimer les lignes correspondant au contrôle qui avait l'enregistrement de Guru99 composants. Si vous n'effectuez pas cette étape, alors le 'GuruLe fichier « 99Control.ascx » sera exécuté à partir du fichier « demo.aspx » au lieu du fichier « web.config ».

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Une fois le code ci-dessus configuré et le projet exécuté à l'aide de Visual Studio, vous obtiendrez le résultat ci-dessous.

Production:-

Le message de sortie indique que le contrôle utilisateur Web a été exécuté avec succès.

Ajout de propriétés publiques à un contrôle Web

Une propriété est une paire clé-valeur associée à un contrôle. Prenons l'exemple d'un contrôle simple. Balise HTML. Une capture d'écran de l'apparence de la balise est présentée ci-dessous.

<html>
<body>
	<div style="color:#0000FF">

		Demo Form

	</div>
</body>
</html>

La balise 'div' est utilisée pour créer une section dans un document HTML. La balise 'div' possède une propriété appelée propriété de style. Cela peut être utilisé pour donner un style différent au texte affiché dans la balise div. Normalement, vous verriez le code de la balise div comme indiqué ci-dessous.

<div style="color:#0000FF">

L'attribut color n'est donc rien d'autre qu'une paire clé-valeur qui donne plus d'informations sur la balise elle-même. Dans le cas ci-dessus, le nom de la clé est « style » et la valeur de la clé est « color:#0000FF ».

De même, pour les contrôles utilisateur, vous pouvez créer vos propres propriétés qui décrivent le contrôle.

Prenons un exemple simple et développons notre «GuruLe contrôle « 99Control » a été créé dans les sections précédentes. Dans notre exemple, nous allons ajouter une simple propriété entière appelée MinValue. Cette valeur représentera le nombre minimal de caractères du texte affiché dans le contrôle utilisateur.

Effectuons les étapes mentionnées ci-dessous pour mettre cela en place.

Étape 1) Ouvrez le GuruFichier 99Control.ascx. Ajoutez le code permettant d'ajouter la propriété MinValue.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

	<script runat="server">
	  public int MinValue = 0;
	</script>

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Code Explication:-

L'attribut `runat="server"` du script indique que nous ajoutons du code spécifique à .NET et qu'il doit être exécuté sur le serveur web. Ceci est nécessaire pour le traitement de toute propriété ajoutée au contrôle utilisateur. Nous ajoutons ensuite notre propriété `MinValue` et lui attribuons la valeur par défaut 0.

Étape 2) Référençons maintenant cette propriété dans notre fichier demo.aspx. Tout ce que nous faisons maintenant, c'est simplement référencer la propriété MinValue et lui attribuer une nouvelle valeur de 100.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" MinValue="100" />
	</form>
</body>
</html>

NOTE: Lorsque vous exécuterez ce code, aucun résultat ne s'affichera, car la sortie est inférieure à la limite de 100 caractères.

FAQ