Aperçu des contrôles des utilisateurs par rapport aux contrôles personnalisés

S’applique à : Microsoft ASP.NET

ASP.NET colonne Support Voice


Aperçu des contrôles des utilisateurs par rapport aux contrôles personnalisés

Pour personnaliser cette colonne en fonction de vos besoins, nous vous invitons à soumettre vos idées sur des sujets qui vous intéressent et des questions que vous souhaitez voir abordées dans les futurs articles de base de connaissances et les colonnes De soutien de la voix. Vous pouvez soumettre vos idées et vos commentaires à l'aide du formulaire Demandez pour qu'il soit. Il ya aussi un lien vers le formulaire au bas de cette colonne.

Introduction


Salut! C'est Parag, et je suis un ingénieur de support travaillant avec le groupe de support Microsoft ASP.NET depuis plus d'un an maintenant. Avant de rejoindre Microsoft, j'ai travaillé sur des projets Web et des applications de bureau à l'aide des technologies Microsoft. Tout en fournissant un soutien de qualité aux clients, j'ai vu des cas où il y avait une certaine confusion autour des contrôles personnalisés, et je voudrais juste prendre un certain temps pour expliquer certains concepts autour des contrôles personnalisés. Aussi mauvais que cela puisse être, croyez-moi, une fois que vous obtenez le coup de lui, vous serez dans une meilleure position pour apprécier ASP.NET.

Vue d’ensemble

Dans la colonne de ce mois-ci, je vais discuter des sujets suivants:
  • Qu'est-ce que les contrôles des utilisateurs ?
  • Qu'est-ce que les contrôles personnalisés?
  • Quelles sont les différences de base entre les contrôles utilisateur et les contrôles personnalisés ?
Je vais également introduire quelques-uns des sujets avancés qui concernent les contrôles personnalisés, tels que la gestion de l'État et le rendu des contrôles personnalisés.

Qu'est-ce que les contrôles des utilisateurs ?

Les contrôles des utilisateurs sont personnalisés, les contrôles réutilisables, et ils utilisent les mêmes techniques qui sont utilisées par les contrôles HTML et serveur Web. Ils offrent un moyen facile de partitionner et de réutiliser les interfaces utilisateur communes à travers les applications Web ASP.NET. Ils utilisent le même modèle de programmation de formulaires Web sur lequel fonctionne une page Web Forms. Pour plus de détails sur le modèle de programmation des formulaires Web, visitez les sites Web suivants du Microsoft Developer Network (MSDN) :

Comment créer un contrôle utilisateur

La syntaxe que vous utilisez pour créer un contrôle utilisateur est similaire à la syntaxe que vous utilisez pour créer une page Web Forms (.aspx). La seule différence est qu'un contrôle de l'utilisateur n'inclut pas les éléments de l'identation,html,, de lt;body,, et de la forme depuis qu'une page Web de formulaires héberge le contrôle de l'utilisateur. Pour créer un contrôle utilisateur, suivez les étapes suivantes :
  1. Ouvrez un texte ou un éditeur HTML et créez un bloc de code côté serveur exposant toutes les propriétés, méthodes et événements.
    <script language="C#" runat="server">   public void button1_Click(object sender, EventArgs e)   {      label1.Text = "Hello World!!!";   }</script>
  2. Créez une interface utilisateur pour le contrôle de l'utilisateur.
    <asp:Label id="label1" runat="server"/> <br><br><asp:button id="button1" text="Hit" OnClick="button1_Click" runat="server" />

Comment utiliser un contrôle d'utilisateur dans une page Web Forms

  1. Créez une nouvelle page Web Forms (.aspx) dans Microsoft Visual Studio .NET 2002, Microsoft Visual Studio .NET 2003, Microsoft Visual Studio 2005, ou tout autre éditeur de texte.
  2. Déclarer la directive sur l'enregistrement. Par exemple, utilisez le code suivant.
    <%@ Register TagPrefix="UC" TagName="TestControl" Src="test.ascx" %>
    Remarque Supposons que le contrôle de l'utilisateur et la page Des formulaires Web se trouvent au même endroit.
  3. Pour utiliser le contrôle de l'utilisateur dans la page Formulaires Web, utilisez le code suivant après la directive ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' '
    <html>    <body>          <form runat="server">               <UC:TestControl id="Test1" runat="server"/>          </form>    </body>  </html>

Comment créer une instance d'un contrôle d'utilisateur programmatiquement dans le code derrière le fichier d'une page Web Forms

L'exemple précédent a instantanément instantanéisé un contrôle d'utilisateur déclarativement dans une page De formulaires Web à l'aide de la directive ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' Toutefois, vous pouvez instantanément un contrôle utilisateur dynamiquement et l'ajouter à la page. Voici les étapes pour ce faire:
  1. Créez une nouvelle page Web Forms dans Visual Studio.
  2. Naviguez vers le code derrière le fichier généré pour cette page Formulaires Web.
  3. Dans le cas Page_Load de la classe Page, écrivez le code suivant.
    // Load the control by calling LoadControl on the page class.Control c1 = LoadControl("test.ascx");            // Add the loaded control in the page controls collection.Page.Controls.Add(c1);
    Remarque Vous pouvez ajouter un contrôle utilisateur dynamiquement à certains événements du cycle de vie de la page. Pour de plus amples renseignements, visitez les sites Web suivants :

Traitement du contrôle utilisateur

Lorsqu'une page avec un contrôle utilisateur est demandée, ce qui suit se produit :
  • L'analyse de page analyse le fichier .ascx spécifié dans l'attribut Src dans la directive ' Registre et génère une classe qui dérive de la classe System.Web.UI.UserControl.
  • L'éparsteur compile alors dynamiquement la classe dans un assemblage.
  • Si vous utilisez Visual Studio, alors au moment de la conception seulement, Visual Studio crée un code derrière le fichier pour le contrôle de l'utilisateur, et le fichier est précompilé par le concepteur lui-même.
  • Enfin, la classe pour le contrôle utilisateur, qui est générée par le processus de génération et de compilation de code dynamique, comprend le code du code derrière le fichier (.ascx.cs) ainsi que le code écrit à l'intérieur du fichier .ascx.

Qu'est-ce que les contrôles personnalisés?

Les contrôles personnalisés sont des composants de code compilés qui s'exécutent sur le serveur, exposent le modèle d'objet et rendent le texte de balisage, tel que HTML ou XML, comme le fait un formulaire Web normal ou un contrôle utilisateur.

Comment choisir la classe de base pour votre contrôle personnalisé

Pour écrire un contrôle personnalisé, vous devez tirer directement ou indirectement la nouvelle classe de la classe System.Web.UI.Control ou de la classe System.Web.UI.WebControls.WebControl :
  • Vous devez dériver de System.Web.UI.Control si vous voulez que le contrôle de rendre des éléments non visuels. Par exemple, les exemples de rendu non visuel sont des exemples de rendu non visuel.
  • Vous devez dériver de System.Web.UI.WebControls.WebControl si vous voulez le contrôle pour rendre HTML qui génère une interface visuelle sur l'ordinateur client.
Si vous souhaitez modifier la fonctionnalité des contrôles existants, tels qu'un bouton ou une étiquette, vous pouvez tirer directement la nouvelle classe avec ces classes existantes et modifier leur comportement par défaut.En bref, la classe Contrôle fournit la fonctionnalité de base par laquelle vous pouvez la placer dans l'arbre de contrôle pour une classe Page. La classe WebControl ajoute la fonctionnalité à la classe de contrôle de base pour afficher du contenu visuel sur l'ordinateur client. Par exemple, vous pouvez utiliser la classe WebControl pour contrôler l'apparence et les styles à travers des propriétés comme la police, la couleur et la hauteur.

Comment créer et utiliser un contrôle personnalisé simple qui s'étend de System.Web.UI.Control en utilisant Visual Studio

  1. Démarrer Visual Studio.
  2. Créez un projet de bibliothèque de classe et donnez-lui un nom, par exemple, CustomServerControlsLib.
  3. Ajoutez un fichier source au projet, par exemple, SimpleServerControl.cs.
  4. Inclure la référence de l'espace de nom System.Web dans la section références.
  5. Vérifiez si les espaces de nom suivants sont inclus dans le fichier SimpleServerControl.cs.
    SystemSystem.CollectionsSystem.ComponentModelSystem.DataSystem.WebSystem.Web.SessionStateSystem.Web.UISystem.Web.UI.WebControls
  6. Héritez de la classe SimpleServerControls avec la classe de base De contrôle.
    public class SimpleServerControl : Control
  7. Remplacer la méthode Render pour écrire la sortie au flux de sortie.
    protected override void Render(HtmlTextWriter writer) { writer.Write("Hello World from custom control");}
    Remarque La classe HtmlTextWriter a la fonctionnalité d'écriture HTML à un flux de texte. La méthode Ecrire de la classe HtmlTextWriter produit le texte spécifié dans le flux de réponse HTTP et est la même que la méthode Response.Write.
  8. Compilez le projet de bibliothèque de classe. Il générera la sortie DLL.
  9. Ouvrez un projet existant ou créez un nouveau projet d'application Web ASP.NET.
  10. Ajoutez une page Web Forms où le contrôle personnalisé peut être utilisé.
  11. Ajoutez une référence à la bibliothèque de classe dans la section références du projet ASP.NET.
  12. Enregistrez le contrôle personnalisé sur la page Formulaires Web.
    <%@ Register TagPrefix="CC " Namespace=" CustomServerControlsLib " Assembly="CustomServerControlsLib " %>
  13. Pour instantanément ou utiliser le contrôle personnalisé sur la page Des formulaires Web, ajoutez la ligne de code suivante dans les balises de l'article.form.gt.
    <form id="Form1" method="post" runat="server">    <CC:SimpleServerControl id="ctlSimpleControl" runat="server">    </CC:SimpleServerControl ></form>
    Remarque Dans ce code, SimpleServerControl est le nom de classe de contrôle à l'intérieur de la bibliothèque de classe.
  14. Exécutez la page Des formulaires Web, et vous verrez la sortie à partir du contrôle personnalisé.
Si vous n'utilisez pas Visual Studio, vous devez effectuer les étapes suivantes :
  1. Ouvrez n'importe quel éditeur de texte.
  2. Créez un fichier nommé SimpleServerControl.cs, et écrivez le code tel qu'il est donné dans les étapes 1 à 14.
  3. Dans la variable PATH, ajoutez le chemin suivant :
    c:\windows (winnt)\Microsoft.Net\Framework\v1.1.4322
  4. Démarrez une invite de commande et rendez-vous à l'endroit où SimpleServerControl.cs est présent.
  5. Exécutez la commande suivante :
    csc /t:library /out: CustomServerControlsLib. SimpleServerControl.dll /r:System.dll /r:System.Web.dll SimpleServerControl.cs
    Pour de plus amples renseignements sur le compilateur cmD (csc.exe), visitez le site Web suivant du MSDN :
  6. Pour exécuter le contrôle personnalisé sur la page Formulaires Web, faites ce qui suit :
    1. Créez un répertoire sous le dossier wwwroot.
    2. Démarrer Microsoft Internet Information Services (IIS) Manager, et marquer le nouvel répertoire comme l'annuaire racine virtuelle.
    3. Créez un dossier Bin sous le nouveau répertoire.
    4. Copiez le dLL de contrôle personnalisé dans le dossier Bin.
    5. Placez l'exemple de page Formulaires Web que vous avez créé dans les étapes précédentes à l'intérieur du nouvel annuaire.
    6. Exécutez la page d'exemple de IIS Manager.
Maintenant que vous avez construit un contrôle personnalisé simple, regardons comment exposer les propriétés et appliquer des attributs de conception-temps sur ce contrôle personnalisé.

Comment exposer les propriétés sur le contrôle personnalisé

Je vais m'appuyer sur l'exemple précédent et introduire une ou plusieurs propriétés qui peuvent être configurées tout en utilisant le contrôle personnalisé sur la page Formulaires Web.L'exemple suivant montre comment définir une propriété qui affichera un message à partir du contrôle un certain nombre de fois, tel que spécifié dans la propriété du contrôle :
  1. Ouvrez SimpleServerControl.cs dans un éditeur de texte.
  2. Ajoutez une propriété dans la classe SimpleServerControl.
    public class SimpleServerControl : Control{   private int noOfTimes;   public int NoOfTimes   {       get { return this.noOfTimes; }       set { this.noOfTimes = value; }   }    protected override void Render (HtmlTextWriter writer)   {     for (int i=0; i< NoOfTimes; i++)     {       write.Write("Hello World.."+"<BR>");     }    }}
  3. Compilez le contrôle personnalisé.
  4. Pour utiliser le contrôle personnalisé sur la page Formulaires Web, ajoutez la nouvelle propriété à la déclaration de contrôle.
    <CC:SimpleServerControl id="ctlSimpleControl" NoOfTimes="5" runat="server"></CC:SimpleServerControl>
  5. L'exécution de la page affichera le message "Bonjour monde" à partir du contrôle personnalisé autant de fois que spécifié dans la propriété du contrôle.

Comment appliquer les attributs de temps de conception sur le contrôle personnalisé

Pourquoi les attributs de temps de conception sont nécessaires
Le contrôle personnalisé que vous avez construit dans l'exemple précédent fonctionne comme prévu. Toutefois, si vous souhaitez utiliser ce contrôle dans Visual Studio, vous pouvez vouloir que la propriété NoOfTimes soit automatiquement mise en surbrillance dans la fenêtre Propriétés chaque fois que le contrôle personnalisé est sélectionné au moment de la conception.Pour ce faire, vous devez fournir les informations de métadonnées à Visual Studio, ce que vous pouvez faire en utilisant une fonctionnalité dans Visual Studio appelé attributs. Les attributs peuvent définir une classe, une méthode, une propriété ou un champ. Lorsque Visual Studio charge la classe du contrôle personnalisé, il vérifie tous les attributs définis au niveau de la classe, de la méthode, de la propriété ou du champ et modifie le comportement du contrôle personnalisé au moment de la conception en conséquence.Pour obtenir de plus amples renseignements sur les attributs, visitez le site Web suivant du MSDN :Construisons un échantillon qui utilise des attributs couramment utilisés :
  1. Ouvrez SimpleServerControl.cs dans un éditeur de texte.
  2. Introduire quelques attributs de base au niveau de la classe, par exemple, DefaultProperty, ToolboxData, et TagPrefixAttrbute. Nous allons construire notre échantillon sur ces trois attributs.
            [// Specify the default property for the control.DefaultProperty("DefaultProperty"),// Specify the tag that is written to the aspx page when the        // control is dragged from the Toolbox to the Design view. // However this tag is optional since the designer automatically // generates the default tag if it is not specified.ToolboxData("<{0}:ControlWithAttributes runat=\"server\">" +"</{0}:ControlWithAttributes>")]public class ControlWithAttributes : Control{private string _defaultProperty;public string DefaultProperty{get { return "This is a default property value"; }set { this._defaultProperty = value; }}protected override void Render(HtmlTextWriter writer){writer.Write("Default Property --> <B>" + DefaultProperty + "</B>");}         }
  3. Il ya une autre balise appelée TagPrefixAttrbute. Il s'agit d'un attribut de niveau d'assemblage qui fournit un préfixe à une balise lorsque vous faites glisser le contrôle de la boîte à outils au concepteur. Sinon, le concepteur génère un préfixe tel que "cc1" par défaut. TagPrefixAttrbute n'est pas directement appliqué à la classe de contrôle. Pour appliquer TagPrefixAttrbute, ouvert AssemblyInfo.cs, inclure la ligne de code suivante, puis reconstruire le projet.
    [assembly:TagPrefix("ServerControlsLib ", "MyControl")]
    Remarque Si vous souhaitez créer la source à l'aide de la ligne de commande, vous devez créer le fichier AssemblyInfo.cs, placer le fichier dans le répertoire qui contient tous les fichiers source, et exécuter la commande suivante pour construire le contrôle :
    Csc /t:library /out: ServerControlsLib.dll /r:System.dll /r :System.Web.dll .cs

Quelles sont les différences de base entre les contrôles utilisateur et les contrôles personnalisés ?

Maintenant que vous avez une idée de base de ce que les contrôles utilisateur et les contrôles personnalisés sont et comment les créer, nous allons jeter un coup d'oeil rapide sur les différences entre les deux.
Facteurs Contrôle de l'utilisateur Contrôle personnalisé
Déploiement Conçu pour les scénarios à application unique Déployé sous la forme source (.ascx) avec le code source de l'application Si le même contrôle doit être utilisé dans plus d'une application, il introduit des problèmes de redondance et de maintenance Conçu de sorte qu'il puisse être utilisé par plus d'une application Déployé soit dans l'annuaire Bin de l'application ou dans le cache d'assemblage global Distribué facilement et sans problèmes liés à la redondance et à l'entretien
Création La création est similaire à la façon dont les pages Web Forms sont créées; bien adapté pour le développement rapide d'applications (RAD) L'écriture implique beaucoup de code parce qu'il n'y a pas de support de concepteur
Contenu Un bien meilleur choix lorsque vous avez besoin de contenu statique dans une mise en page fixe, par exemple, lorsque vous faites des en-têtes et des pieds Plus adapté à l'inscription d'un contenu dynamique lorsqu'une application nécessite une présentation de contenu dynamique ; peut être réutilisé sur une application, par exemple, pour un contrôle de table lié aux données avec des lignes dynamiques
Conception L'écriture ne nécessite pas beaucoup de conception d'application parce qu'ils sont rédigés au moment de la conception et contiennent principalement des données statiques Écrire à partir de zéro nécessite une bonne compréhension du cycle de vie du contrôle et de l'ordre dans lequel les événements s'exécutent, ce qui est normalement pris en charge dans les contrôles de l'utilisateur

Sujets avancés

Ensuite, jetons un coup d'oeil à quelques-unes des fonctionnalités avancées que vous pouvez utiliser lors du développement de contrôles personnalisés.

Gestion de l'État

Les applications Web sont construites sur HTTP, qui est apatride. Une page et ses contrôles d'enfant sont créés sur chaque demande et sont éliminés après la demande est terminée. Pour maintenir l'état dans la programmation ASP classique, vous utilisez des objets de session et d'application. Mais pour cela, vous devez faire beaucoup de codage. Pour éviter cela, ASP.NET fournit un mécanisme connu sous le nom d'état de vue pour maintenir l'état à travers plusieurs demandes. Pour en savoir plus sur la gestion de l'État et voir l'état, visitez les sites Web MSDN suivants :
Introduction à la gestion de l'état des formulaires WebLe ASP.NET afficher les valeurs de page De l'état d'enregistrement des formulaires Web àl'aide de l'état d'afficher
Exemple d'utilisation de l'état de vue dans un contrôle personnalisé
ViewStateExample.cs
using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using System.Text;namespace ServerControlLib{/// <summary>/// When a page framework reloads this control after postback, it           /// will restore the values which are in view state./// This control can easily perform state management without         /// implementing our own logic for maintaining the state./// </summary>public class ViewStateExample : WebControl{// Text to be displayed in Text box control.private string _text;/* * This property needs to be populated before every                  * postback in order to  * retain its value.*/ public string Text{get { return (_text == null) ? "_text property is empty"  : _text; }set { _text = value; }}/* * This property needs to be filled once and should be                  * available on the successive postbacks.*/ public string TextInViewState{get{object o = ViewState["TextInViewState"];return (o == null) ? "View state is empty" : (string)o;}set { ViewState["TextInViewState"] = value; } }/* * Over-ridden method on WebControl base class which                                    * displays both of the property values  * i.e. one stored in view state and other which is not                  * saved in view state.*/protected override void RenderContents(HtmlTextWriter writer){writer.Write("Text Without View State = ");writer.Write(Text);writer.Write("<hr><br>");writer.Write("Text In View State = ");writer.Write(TextInViewState);}}}
Exemple d'utilisation du contrôle précédent sur une page Web De formulaires
ViewStateExampleDemo.aspx
<%@ Page Language="C#" %><%@ Register TagPrefix="CC" Namespace="ServerControlLib" Assembly = "ServerControlLib" %><html>  <head>    <script runat="server">      void button1_Click(object sender, EventArgs e)      {          Control1.Text = textbox1.Text;          Control1.TextInViewState = textbox2.Text;      }    </script>  </head>  <body>    <form runat="server" ID="Form1">      <br>      Property Value Without View State: <asp:TextBox id="textbox1"         runat="server" />      <br>      Property Value with View State: <asp:TextBox id="textbox2"         runat="server" />      <asp:Button text="Cause Postback" onClick="button1_Click"         id="button1" Runat="server" />      Output from the ViewStateExample Control :      <CC:ViewStateExample id="Control1" runat="server"/>    </form>  </body></html>

Rendu

Dans cette section, je vais décrire brièvement quelles méthodes vous devez remplacer lorsque vous tirez un contrôle personnalisé de la classe De contrôle ou de la classe WebControl.
Méthodes de rendu de la classe System.Web.UI.Control
Pour plus d'informations sur les méthodes de rendu de la classe System.Web.UI.Control, visitez les sites Web MSDN suivants :
Comment un contrôle est rendu sur la page
Chaque page a un arbre de contrôle qui représente une collection de tous les contrôles d'enfant pour cette page. Pour rendre l'arbre de contrôle, un objet de la classe HtmlTextWriter est créé qui contient le HTML à rendre sur l'ordinateur client. Cet objet est transmis à la méthode RenderControl. À son tour, la méthode RenderControl invoque la méthode Render. Ensuite, la méthode Render appelle la méthode RenderChildren sur chaque contrôle d'enfant, faisant une boucle récursive jusqu'à la fin de la collection est atteint. Ce processus est mieux expliqué par le code d'exemple suivant.
public void RenderControl(HtmlTextWriter writer) {    // Render method on that control will only be called if its visible property is true.    if (Visible)    {        Render(writer);    }}protected virtual void Render(HtmlTextWriter writer) {    RenderChildren(writer);}protected virtual void RenderChildren(HtmlTextWriter writer) {    foreach (Control c in Controls)     {        c.RenderControl(writer);    }} 
Méthodes de rendu de la classe System.Web.UI.WebControl
Pour plus d'informations sur les méthodes de rendu de la classe System.Web.UI.WebControl, visitez les sites Web MSDN suivants :
Comment se déroule le rendu de la classe WebControl
L'exemple de code suivant montre la méthode Render pour le contrôle personnalisé.
protected override void Render(HtmlTextWriter writer){    RenderBeginTag(writer);    RenderContents(writer);    RenderEndTag(writer);}
Vous n'avez pas besoin de remplacer la méthode Render pour la classe WebControl. Si vous souhaitez rendre le contenu dans la classe WebControl, vous devez passer outre à la méthode RenderContents. Toutefois, si vous souhaitez toujours passer outre à la méthode Render, vous devez remplacer la méthode RenderBeginTag ainsi que la méthode RenderEndTag dans l'ordre spécifique qui est indiqué dans l'exemple de code précédent.

Conclusion

C'est tout pour l'instant sur les contrôles des utilisateurs et des contrôles personnalisés dans ASP.NET 1.0 et ASP.NET 1.1. J'espère que cette colonne vous aidera à comprendre les différences de base entre eux et les différentes approches que vous pouvez prendre pour les développer.Merci pour votre temps. Nous nous attendons à écrire plus sur les sujets avancés pour les contrôles personnalisés, tels que la gestion de l'état, les styles de contrôle, les contrôles composites, et le support de conception-temps pour les contrôles personnalisés, dans un proche avenir.Pour de plus amples renseignements sur les contrôles, visitez les sites Web suivants du MSDN :
ASP.NET les basesdu développement du contrôle du serveur Unexamen approfondi des contrôles des utilisateursBâtiment modélisé personnalisé ASP.NET serveur contrôleles événements dans ASP.NET serveurcontrôlecomposite contrôle par rapport au contrôle de l'utilisateur Développer ASP.NET le serveur contrôlele développement de contrôlespersonnalisés : concepts clésAjout d'un support deconception-temps pour ASP.NET contrôles
Comme toujours, n'hésitez pas à soumettre des idées sur des sujets que vous souhaitez aborder dans les colonnes futures ou dans la base de connaissances en utilisant le formulaire Demandez pour elle.