Creating a UserControl

Bon, nous allons donc créer un UserControl pour afficher des informations sur un utilisateur de la communauté. Tout d’abord, ajoutons un UserControl à notre projet. Dans votre Visual Studio, vous devriez pouvoir cliquer avec le bouton droit de la souris sur votre projet et sélectionner Ajouter un nouvel élément. Une boîte de dialogue s'ouvre. Vous allez sélectionner le " Contrôle Utilisateur Web " dans la liste des éléments à ajouter. Appelons notre UserControl UserInfoBoxControl, avec le nom de fichier UserInfoBoxControl.ascx. Assurez-vous que vous avez coché la case à cocher qui place le code dans un fichier séparé, appelé fichier CodeBehind.

Vous devriez maintenant avoir un UserInfoBoxControl.ascx et un UserInfoBoxControl.ascx.cs dans votre projet. Le premier est l'endroit où nous mettons notre balisage et le second notre fichier CodeBehind. Maintenant, si UserInfoBoxControl.ascx n'est pas déjà ouvert et sélectionné, faites-le maintenant. Vous ne verrez qu'une seule ligne de code, la déclaration UserControl. Comme mentionné, ce contrôle affichera des informations sur un utilisateur, alors commençons à ajouter du balisage pour le faire:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserInfoBoxControl.ascx.cs" Inherits="UserInfoBoxControl" %>
<b>Information about <%= this.UserName %></b>
<br /><br />
<%= this.UserName %> is <%= this.UserAge %> years old and lives in <%= this.UserCountry %>

As you can see, it's all very basic. We have a declaration, some standard tags, some text, and then we have some sort of variables. Now, where do they come from? Well, right now, they come from nowhere, since we haven't declared them yet. We better do that right away. Open the CodeBehind file for the UserControl, that is, the one which ends on .cs.

As you can see, it looks just like a CodeBehind file for a regular page, except that it inherits from UserControl instead of from Page. We will declare the tree properties used in our markup, and base them on three corresponding fields.

private string userName;
private int userAge;
private string userCountry;

public string UserName
{
    get { return userName; }
    set { userName = value; }
}

public int UserAge
{
    get { return userAge; }
    set { userAge = value; }
}

public string UserCountry
{
    get { return userCountry; }
    set { userCountry = value; }
}

It's all very simple and works just like a regular class. You can even add methods, if you feel like it! Our UserControl is actually done now, but as you may have already experienced, we can't use it yet. A UserControl can't be displayed directly in the browser - it has to be included on a page. We will do that in the next chapter.