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 l'écriture du code. Cela peut être fait une seule fois et réutilisé à plusieurs endroits.

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

ASP.Net a la capacité de créer des contrôles Web. Ces contrôles contiennent du code qui peut être réutilisé. Il peut être utilisé dans toutes les applications selon les besoins.

Jetons un coup d'œil à un exemple de la façon dont nous pouvons créer un contrôle utilisateur Web dans 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. "Tutoriels Guru99" Ce tutoriel est pour 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.

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

  1. Accédez à l'Explorateur de solutions dans Visual Studio et cliquez avec le bouton droit sur la solution DemoApplication.
  2. Choisissez l'élément de menu Ajouter->Nouvel élément

Étape 2) Dans l'étape suivante, nous devons choisir l'option de création d'un contrôle utilisateur Web

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

  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 nous cliquons sur l'option « Web », vous voyez une option pour « Contrôle utilisateur des formulaires Web ». Cliquez sur cette option.
  3. Nous donnons ensuite un nom au Web Control « Guru99Control ».
  4. Enfin, cliquez sur le bouton « Ajouter » pour laisser Visual Studio ajouter le contrôle utilisateur Web à notre solution.

Vous verrez le « Guru99Control » ajouté à la solution.

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

Étape 4) Il est maintenant temps d'ajouter le code personnalisé au contrôle utilisateur Web. Notre code sera basé sur une syntaxe HTML pure. Ajoutez le code suivant au fichier 'Guru99Control.ascx'

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

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

Explication du code : -

  1. Dans notre fichier Web Control, nous créons d’abord un élément table. Celui-ci sera utilisé pour contenir 2 lignes de texte qui seront utilisées pour afficher
  • « Tutoriels Guru99 » et
  • "Ce didacticiel est destiné à ASP.Net."
  1. Ensuite, nous définissons notre première ligne de tableau et mettons le texte comme « Tutoriels Guru99 ».
  2. Nous définissons ensuite notre deuxième ligne de tableau et mettons le texte comme suit : « Ce didacticiel est destiné à ASP.Net ».

REMARQUE: Nous ne pouvons plus exécuter ce code et afficher la sortie. La seule façon de voir si cela fonctionne est de l'inclure dans notre application (fichier aspx). Nous verrons cela dans le sujet suivant.

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é. Cela peut être utilisé pour afficher les deux lignes suivantes dans un formulaire Web

  • «Tutoriels Guru99»
  • "Ce didacticiel est destiné à ASP.Net."

Une fois le « contrôle » personnalisé créé, nous devons l’utiliser dans notre application Web. La première étape consiste à enregistrer le composant dans notre application (Demo.aspx). Il s’agit de la condition préalable à utiliser dans tout contrôle Web personnalisé dans une application ASP.Net.

Enregistrement des contrôles utilisateur sur un ASP.NET

Voyons comment nous pouvons y parvenir. Les étapes ci-dessous sont une continuation de la section précédente. Dans la section précédente, nous avons créé notre contrôle personnalisé. Dans cette section, nous utiliserons le contrôle dans notre Démo.aspx formulaire internet.

Tout d’abord, nous allons enregistrer notre « contrôle » personnalisé dans le fichier Demo.aspx.

Étape 1) Assurez-vous que vous travaillez sur le fichier demo.aspx. C'est dans ce fichier que sera enregistré le champ utilisateur web. Cela peut être fait en double-cliquant sur le fichier demo.aspx dans l'explorateur de solutions de votre solution .Net.

Enregistrement des contrôles utilisateur sur un ASP.NET

Une fois que vous aurez double-cliqué sur le formulaire, vous verrez probablement le code ci-dessous dans le formulaire. Il s'agit du code par défaut ajouté par Visual Studio lorsqu'un formulaire Web est ajouté à un projet ASP.Net.

Le code par défaut se compose d'étapes nécessaires pour garantir que le formulaire peut s'exécuter en tant que formulaire Web ASP.Net dans le navigateur.

Enregistrement des contrôles utilisateur sur un ASP.NET

Étape 2) Ajoutons maintenant notre code pour enregistrer le contrôle utilisateur. La capture d'écran ci-dessous montre l'enregistrement du contrôle utilisateur dans le code de base ci-dessus.

Enregistrement des contrôles utilisateur sur un ASP.NET

<%@ 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.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Explication du code : -

  1. La première étape consiste à enregistrer le contrôle utilisateur Web. Cela comprend les paramètres de base ci-dessous
    1. Le mot-clé 'Register' est utilisé pour enregistrer le contrôle utilisateur Web.
    2. Le paramètre src permet de définir le nom du contrôle, qui dans notre cas est Guru99Control.ascx.
    3. Le tagname et le Tagprefix sont des noms individuels attribués au contrôle. Ceci est fait pour qu'ils puissent faire référence aux pages HTML comme un contrôle HTML normal.
  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 est un indicateur que nous souhaitons utiliser notre contrôle Web personnalisé. Lorsque la page est traitée par le serveur Web, vous pouvez voir que nous avons utilisé la balise TWebControl:WebControl. Il traitera ensuite le 'Guru99Control' en conséquence. Dans notre exemple, il s'agit de TWebControl:WebControl.
    1. Un identifiant optionnel est donné au champ « Header ». C'est généralement une bonne pratique de donner un identifiant à un contrôle HTML.
    2. Enfin, l'attribut runat=server pour que le contrôle s'exécute 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 être exécutés sur le serveur. Leur sortie est ensuite envoyée du serveur au client et affichée en conséquence 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:-

Enregistrement des contrôles utilisateur sur un ASP.NET

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

Enregistrement des contrôles asp.net globalement dans le fichier de configuration Web config asp

Parfois, on peut vouloir utiliser des contrôles utilisateur sur plusieurs pages dans une application .Net. À ce stade, vous ne souhaitez pas continuer à enregistrer les contrôles utilisateur 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 du 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.

Enregistrement des contrôles asp.net globalement dans la configuration Web

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 sur le fichier.

Enregistrement des contrôles asp.net globalement dans la configuration Web

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.

Enregistrement des contrôles asp.net globalement dans la configuration Web

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

Enregistrement des contrôles asp.net globalement dans la configuration Web

<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'enregistrement comprend les sous-étapes ci-dessous

  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. Ensuite, nous enregistrons le contrôle utilisateur avec la balise supplémentaire. Les paramètres restants de tagPrefix, tagName et src restent les mêmes qu'auparavant.

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

Enregistrement des contrôles asp.net globalement dans la configuration Web

<%@ 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.ore/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>	
<body>
	<form id="form1" runat="server”>
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Le code ci-dessus est défini et le projet est exécuté à l'aide de Visual Studio. Vous obtiendrez le résultat ci-dessous.

Production:-

Enregistrement des contrôles asp.net globalement dans la configuration Web

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 à n’importe quel contrôle. Prenons un exemple simple Balise HTML. Une capture d'écran de l'apparence de la balise est présentée ci-dessous.

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

<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 construisons sur notre « Guru99Control » 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ésenterait le nombre minimum de caractères dans le texte affiché dans le contrôle utilisateur.

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

Étape 1) Ouvrez le fichier Guru99Control.ascx. Ajoutez le code pour ajouter la propriété MinValue.

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

<%@ 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
	</tr>
</table>

Explication du code : -

L'attribut script runat=server est utilisé pour indiquer que nous ajoutons du code spécifique à.Net et qu'il doit être exécuté sur le serveur Web.

Ceci est requis pour traiter toute propriété ajoutée au contrôle utilisateur. Nous ajoutons ensuite notre propriété MinValue et lui donnons une valeur par défaut de 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.

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

!DOCTYPE html>
<html xmlns="http://www.w3.ore/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>

REMARQUE: – Lorsque vous exécutez ce code, il n’affichera aucune sortie. En effet, la sortie est inférieure à la limite de 100 caractères.

Résumé

  • ASP.Net a la capacité de créer des contrôles utilisateur. Les contrôles utilisateur sont utilisés pour avoir du code qui est utilisé plusieurs fois dans une application. Le contrôle utilisateur peut ensuite être réutilisé dans toute l’application.
  • Le contrôle utilisateur doit être enregistré sur la page ASP.Net avant de pouvoir être utilisé.
  • Pour utiliser le contrôle utilisateur sur toutes les pages d'une application, enregistrez-le dans le fichier web.config.
  • Des propriétés peuvent également être ajoutées à un contrôle utilisateur Web.