Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

1 août 2007 3 01 /08 /août /2007 20:46
[ASP.NET] les custom controls

Avant d’aborder les custom controls
une notion qui est bien à avoir assimiler c’est qu’une page aspx affichée dans le navigateur du client n’affiche que du html et du javascript, toutes les balises <asp :> sont « traduites » par le serveur asp.net
… une simple ouverture de la source de la page affichée dans le navigateur permet de le constater
 Les custom controls sont un peu l'équivalent des components(composants) en Windows Forms
1 – créer le site web
2 – ajouter un nouveau projet de type « bibliotheque de controls web »
custom1.JPG
C’est dans ce projet que l’on pourra ajouter des custom controls (ou controls web personnalisés)
Ici je vais créer un custom control DropDownList
C’est la que ce que j’ai expliqué au début est important dans la methode RenderContents je vais renvoyer le Html à insérer comme ici c’est un control de type liste je fais une boucle sur les items,
Si le custom control avait dérivé par exemple une textbox c’est la propriété text qu’il aurait fallu retourner ,etc.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace WebControlLibrary1
{
    [DefaultProperty("Items")]
    [ToolboxData("<{0}:CustomDropDownList runat=server></{0}:CustomDropDownList>")]
    public class CustomDropDownList : DropDownList
    {
        protected override void RenderContents(HtmlTextWriter output)
        {
            output.Write(BuildHtml());
        }
 
        public String BuildHtml()
        {
            string result = string.Empty;
            bool selected = true;
            foreach (ListItem item in this.Items)
                if (selected)
                {
                    result += "<option selected="selected" value="" + item.Value + "">" + item.Text + "</option>";
                    selected = false;
                }
                else
                    result += "<option value="" + item.Value + "">" + item.Text + "</option>";
 
            return result;
        }
    }
}
 
3 – Ajouter une référence au site web pointant sur le projet contenant le custom control … générer le site web
Le custom control est désormais disponible dans la boite à outils il suffit donc de le glisser sur la page aspx désirée
Le code du control est de la forme :
<cc1:CustomDropDownList ID="CustomDropDownList1" runat="server"></cc1:CustomDropDownList>
 
Il suffit ensuite d’ajouter des éléments au custom control comme on le ferait avec une dropdownlist classique
 custom2.JPG
Voila un exemple de source de la page générée , on voit bien que la DropDownList est convertie en « select » html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
                Test customDropDownList
</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTMyNDcyODMzOA9kFgICAw9kFgQCAQ8PFgIeBFRleHQFEzAxLzA4LzIwMDcgMjA6Mjc6NDJkZAIHDxBkDxYCZgIBFgIQBQdwcmVtaWVyBQdwcmVtaWVyZxAFBnNlY29uZAUGc2Vjb25kZxYBZmRkRjfX3GI5C/+nuCitxM8iYw/QSYw=" />
</div>
 
    <div>
        <span id="Label1">01/08/2007 20:27:42</span>
        <input name="TextBox1" type="text" value="second" id="TextBox1" />
        <input type="submit" name="Button1" value="Button" id="Button1" />&nbsp;
        <select name="CustomDropDownList1" id="CustomDropDownList1">
                <option selected="selected" value="premier">premier</option><option value="second">second</option>
</select>
    </div>
   
<div>
 
                <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKeqdrbDwLs0bLrBgKM54rGBid26Ir5YurgmN0Kn2uAx5BkSjfz" />
</div></form>
</body>
</html>

Partager cet article

Repost 0
Published by Romagny13 - dans ASP.NET
commenter cet article

commentaires