comment spécifier le contenu d'un custom control ?

Version imprimable

27/08/2009, 13h46
duffman

comment spécifier le contenu d'un custom control ?

Bonjour

j'ai un problème qui je pense doit être assez basique mais je n'arrive pas à trouver la réponse malheureusement...

J'ai besoin d'afficher beaucoup de cadre aux angles arrondis dans ma page asp.net, et pour cela je dispose du code html et CSS (un div, des tables, des images pour les coins, le tout bien positioné etc...).

Afin d'éviter d'avoir toutes les balises dans ma page aspx ce qui rendrait le code plus difficile à lire et à maintenir, j'ai essayé de faire un contrôle pour rendre cette boite.

Comme je débute, je n'avais pas connaissance des fichiers .ascx qui semble parfait pour mon besoin, j'ai donc pris l'option d'hériter de WebControl et de mettre tous mes tags via HTMLTextWriter en surchargeant les méthodes RenderBeginTag et RenderEndTag. Cela fonctionne parfaitement à un détail près, il m'insère automatiquement une balise <span> autour de tout mon code et je n'en veux pas.
1ère question: comment puis-je spécifier que la balise "de base" de rendu de mon WebControl serait un div et non un span ?

Comme je n'ai pas trouvé, et que j'ai découvert les .ascx, je me suis orienté vers ça, mais là l'information qu'il me manque, c'est comment dans mon .ascx je précise l'endroit qui correspond au contenu de mon contrôle ? (autrement dit toutes les balises qui seront incluses dans mon controle).

L'une ou l'autre réponse me sauverait l'après midi d'une nouvelle migraine (pas évident de débuter en asp.net sans expérience web solide... ça change des windows forms :))

Merci bcp
27/08/2009, 22h54
Immobilis

Salut,

En général, un "span" est ajouté pour les "label", un "div" pour les "panel". Vérifie.

Ensuite, tu peux faire une propriété (un "Literal"?) à ton contrôle. Tu pourras ainsi lui passer du code HTML. Ce code HTML sera inséré où tu veux dans ton contrôle.

A+

salut et merci

je ne peux pas passer par une propriété pour setter mon code html car je veux justement éviter de le voir apparaitre dans ma page aspx (j'ai grosso modo une bonne vingtaine de balise pour mon cadre, et bcp de cadre par page... mon but c'est de condenser tout ça avec une seule balise).

je vais mettre le code que j'ai fais, il fonctionne très bien sauf que j'ai un span comme balise principal et je ne sais pas comment modifier ça. Cela dit ça marche aussi avec un span (en précisant un vieux docType html 3.2 :?)

J'ajoute les classes CSS des différents élément de mon cadre et dans le CSS je spécifie les border, les tailles, les images etc..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
    [ParseChildren()]
    public class CustomRoundBox : WebControl
    {
 
        public override void RenderBeginTag(HtmlTextWriter writer)
        {
 
            base.RenderBeginTag(writer);
 
            writer.AddAttribute(HtmlTextWriterAttribute.Border, "0");
            writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "0");
            writer.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "0");
            writer.AddAttribute(HtmlTextWriterAttribute.Width, "100%");
            writer.AddAttribute(HtmlTextWriterAttribute.Height, "100%");
            writer.RenderBeginTag(HtmlTextWriterTag.Table);
 
            //début 1ère ligne
 
            writer.AddAttribute(HtmlTextWriterAttribute.Class,"boxBorderTopRow");                        
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.AddAttribute(HtmlTextWriterAttribute.Border, "0");
            writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "0");
            writer.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "0");
            writer.AddAttribute(HtmlTextWriterAttribute.Width, "100%");
            writer.AddAttribute(HtmlTextWriterAttribute.Height, "100%");
            writer.RenderBeginTag(HtmlTextWriterTag.Table);
 
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.AddAttribute(HtmlTextWriterAttribute.Class, "tl"); //top left
            writer.RenderBeginTag(HtmlTextWriterTag.Td);            
            writer.RenderEndTag();
 
            writer.AddAttribute(HtmlTextWriterAttribute.Class, "boxBorderTop");
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.Write("&nbsp");
            writer.RenderEndTag();
 
            writer.AddAttribute(HtmlTextWriterAttribute.Class, "tr");  
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.RenderEndTag(); 
            writer.RenderEndTag(); //TR
            writer.RenderEndTag(); //Table
            writer.RenderEndTag(); //TD
            writer.RenderEndTag(); //TR
            //fin 1ère ligne
 
            //début 2ème ligne (contenu)
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.AddAttribute(HtmlTextWriterAttribute.Class, "roundBoxBody");
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
 
        }
 
        public override void RenderEndTag(HtmlTextWriter writer)
        {
            base.RenderEndTag(writer);
 
            writer.RenderEndTag(); //Tr 2ème ligne
 
            //début 3ème ligne            
 
            writer.AddAttribute(HtmlTextWriterAttribute.Class, "boxBorderBottomRow");
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.AddAttribute(HtmlTextWriterAttribute.Border, "0");
            writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "0");
            writer.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "0");
            writer.AddAttribute(HtmlTextWriterAttribute.Width, "100%");
            writer.AddAttribute(HtmlTextWriterAttribute.Height, "100%");
            writer.RenderBeginTag(HtmlTextWriterTag.Table);
 
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.AddAttribute(HtmlTextWriterAttribute.Class, "bl"); //top left
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.RenderEndTag();
 
            writer.AddAttribute(HtmlTextWriterAttribute.Class, "boxBorderBottom");
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.Write("&nbsp");
            writer.RenderEndTag();
 
            writer.AddAttribute(HtmlTextWriterAttribute.Class, "br");
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.RenderEndTag();
            writer.RenderEndTag(); //TR
            writer.RenderEndTag(); //Table
            writer.RenderEndTag(); //TD
            writer.RenderEndTag(); //TR
            //fin 3ème ligne
 
            writer.RenderEndTag(); //Table
            writer.RenderEndTag(); //Span
        }
    }

Ensuite dans ma page aspx je mets :

Code:

1
2
3
4
 
    <cc1:CustomRoundBox ID="CustomRoundBox2" runat="server" CssClass="roundBoxWhite" style="width:200; height:500;">   
    contenu 
    </cc1:CustomRoundBox>

sans oublier le

Code:

<%@ Register assembly="monAssembly" namespace="monNameSpace" tagprefix="cc1" %>

qui va bien.

et voici le code HTML qui est généré :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
  <span id="MyCustomCC1" class="roundBoxWhite" style="width:300px;height:200px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
	<tr class="boxBorderTopRow">
		<td><table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
			<tr>
				<td class="tl"></td><td class="boxBorderTop">&nbsp</td><td class="tr"></td>
			</tr>
		</table></td>
	</tr><tr>
		<td class="roundBoxBody"> 
        contenu
    </td>
	</tr><tr class="boxBorderBottomRow">
		<td><table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
			<tr>
				<td class="bl"></td><td class="boxBorderBottom">&nbsp</td><td class="br"></td>
			</tr>
		</table>
</td>
	</tr>
</table>
</span>

28/08/2009, 10h52
duffman

Citation:

Envoyé par duffman

salut et merci

je ne peux pas passer par une propriété pour setter mon code html car je veux justement éviter de le voir apparaitre dans ma page aspx (j'ai grosso modo une bonne vingtaine de balise pour mon cadre, et bcp de cadre par page... mon but c'est de condenser tout ça avec une seule balise).

pardon j'ai lu un peu trop vite ta réponse, dans le cas d'un ascx ça fonctionnera effectivement, je pensais qu'on pouvait faire autrement cela dit (faire ne sorte que le contenu soit situé entre les balises de mon ascx..
28/08/2009, 11h49
Immobilis

Et à quoi ressemble le code "frontal" de ton controle?
28/08/2009, 11h55
duffman

dsl je comprends pas trop, qu'est ce que tu entends par code frontal ?

la déclaration du controle dans la page aspx ?

ou bien le code qui apparait dans le browser après génération ?
(auquel cas c'est le code html qui est 2 messages plus haut)
28/08/2009, 12h05
Immobilis

Le code dans la page ascx, pas ascx.cs.
28/08/2009, 12h25
duffman
bah il aurait exactement la même tête que le HTML généré mais j'ai laissé tomber cette option vu que j'ai quasiment réussi à faire fonctionnerle contrôle C# héritant de WebControl.

Pour modifier la balise span par défaut en div il suffit de modifier le constructeur:
Code:

1 2 3 4 5 6 7 [ParseChildren()] public class CustomRoundBox : WebControl { public CustomRoundBox() : base(HtmlTextWriterTag.Div) { }
bon maintenant j'ai plein de problème d'affichage avec le doctype par défaut, en mettant un vieux ça fonctionne bien...
28/08/2009, 12h33
Immobilis
Ok, le span serait la valeur utilisée par défaut pour baliser le contrôle. A mon avis c'est parce que tu lui appliques un style
Code:

1 2 3 <cc1:CustomRoundBox ID="CustomRoundBox2" runat="server" CssClass="roundBoxWhite" style="width:200; height:500;"> contenu </cc1:CustomRoundBox>
alors que le contenu n'est qu'un tableau. Ce style est donc associé à un span qui est une balise relativement neutre. Essayes d'ajouter un panel qui contiendra ton tableau.
28/08/2009, 14h47
duffman

c'est bon j'ai résolu mon problème merci il manquait un l'attribut taille 100% pour la partie du milieu de mon cadre qui faisait foirer l'affichage.

Merci pour tes réponses elles m'ont été utiles
28/08/2009, 19h33
Immobilis

Cette discussion est interessante, tu as mis du code qui peut servir. Peux-tu nous indiquer un peu plus clairement comment tu as résolu tes deux questions?

Citation:

1ère question: comment puis-je spécifier que la balise "de base" de rendu de mon WebControl serait un div et non un span ?

(...)

c'est comment dans mon .ascx je précise l'endroit qui correspond au contenu de mon contrôle ? (autrement dit toutes les balises qui seront incluses dans mon controle).