Comment générer le webcontrol tabstrip totalement en dynamique

Soyez le premier à donner votre avis sur cette source.

Vue 22 871 fois - Téléchargée 1 077 fois

Description

C'est ma première contribution sur ce site et j'espère que je serais à la hauteur par rapport aux excellents codes présent sur ce site.

Cet exemple nous montre comment générer le webcontrol TabStrip de manière totalement dynamique. On y trouve en autre :

- Plusieurs controls générer dynamiquement,
- Imbrication de ces controls entre eux,
- Utilisation des feuilles de style sur le control TabStrip,
- Utilisation du control Multipage,
- Utilisation du control PageView

Le tout est mis dans un PlaceHolder afin de faciliter la manipulation du code côté HTML et code behind.
J'ai fourni un zip dans lequel se trouve tous les fichiers nécessaires pour l'exécution de cet exemple (fichier code source, images et css).

Source / Exemple :



          • Code sur la page HTML *****
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> <%@ Page Language="vb" AutoEventWireup="false" Codebehind="tab.aspx.vb" Inherits="NetWork.tab"%> <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>TabStrip Control</title> <link rel="STYLESHEET" href="essai.css" type="text/css"> </head> <body ms_positioning="GridLayout"> <form id="Form1" method="post" runat="server"> <asp:placeholder id="PlaceHolder1" runat="server"></asp:placeholder> </form> </body> </html>
          • Code behind *****
Public Class tab Inherits System.Web.UI.Page #Region " Code généré par le Concepteur Web Form " 'Cet appel est requis par le Concepteur Web Form. <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() End Sub Protected WithEvents PlaceHolder1 As System.Web.UI.WebControls.PlaceHolder 'REMARQUE : la déclaration d'espace réservé suivante est requise par le Concepteur Web Form. 'Ne pas supprimer ou déplacer. Private designerPlaceholderDeclaration As System.Object Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN : cet appel de méthode est requis par le Concepteur Web Form 'Ne le modifiez pas en utilisant l'éditeur de code. InitializeComponent() End Sub #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Dim Tab_Strip As New Microsoft.Web.UI.WebControls.TabStrip Dim M_Page As New Microsoft.Web.UI.WebControls.MultiPage Dim tdStyle As New Microsoft.Web.UI.WebControls.CssCollection ' TabDefaultStyle Dim thStyle As New Microsoft.Web.UI.WebControls.CssCollection ' TabHoverStyle Dim tsStyle As New Microsoft.Web.UI.WebControls.CssCollection ' TabSelectedStyle Dim sdStyle As New Microsoft.Web.UI.WebControls.CssCollection ' SepDefaultStyle Dim mpStyle As New Microsoft.Web.UI.WebControls.CssCollection ' Multipage '--- Définition des styles pour le control TABSTRIP tdStyle.CssText = "border-bottom:solid 2px #344C64; padding-top:4px; padding-left:15px; padding-right:5px; background-image:url(tabule_down.gif); background-repeat:no-repeat; width:110;" tsStyle.CssText = "border-bottom:none; padding-top:4px; padding-left:30px; padding-right:5px; background-image:url(tabule_img.gif); background-repeat:no-repeat; width:110;" thStyle.CssText = "color:#FFFFFF; background-image:url(tabule_over.gif);" sdStyle.CssText = "border-bottom:solid 2px #344C64;" Tab_Strip.ID = "TabStrip" Tab_Strip.ForeColor = System.Drawing.Color.FromArgb(0, 0, 51, 102) ' Alpha, Rouge, Vert, Bleu Tab_Strip.Font.Size = System.Web.UI.WebControls.FontUnit.Point(11) Tab_Strip.Height = System.Web.UI.WebControls.Unit.Point(19) Tab_Strip.Font.Name = "Verdana" Tab_Strip.Font.Bold = True Tab_Strip.TabDefaultStyle = tdStyle Tab_Strip.TabHoverStyle = thStyle Tab_Strip.TabSelectedStyle = tsStyle Tab_Strip.SepDefaultStyle = sdStyle Tab_Strip.SelectedIndex = 0 Tab_Strip.TargetID = "Multipage1" '--- Définition des styles pour le control MULTIPAGE M_Page.ID = "Multipage1" M_Page.Height = System.Web.UI.WebControls.Unit.Point(100) M_Page.CssClass = "MultiItem" ' Utilisation d'un fichier de style CSS définit dans le code HTML M_Page.BackColor = System.Drawing.Color.FromArgb(0, 255, 255, 230) Dim Cpt As Integer For Cpt = 1 To 3 Dim Tab As New Microsoft.Web.UI.WebControls.Tab Dim Tsep As New Microsoft.Web.UI.WebControls.TabSeparator Tab.ID = "Tabule" & Cpt Tab.Text = "Tab n° " & Cpt Tab_Strip.Items.Add(Tab) If Cpt = 3 Then Tsep.DefaultStyle.CssText = "width:100%" End If Tab_Strip.Items.Add(Tsep) Next '--- Création d'un tableau dynamique Dim M_Table As New HtmlTable Dim M_TR As New HtmlTableRow Dim M_TD As New HtmlTableCell M_Table.Width = "60%" M_Table.Align = "Center" M_TD.InnerText = "Essai du control TABSTRIP totalement dynamique" ' Ajout dans la cellule d'un texte M_TD.InnerHtml += "<br><hr>" M_TD.Controls.Add(Tab_Strip) ' Ajout du control dynamique TABSTRIP dans la cellule For Cpt = 1 To 3 ' Ajout de 3 tableaux dynamiques dans chaque PAGEVIEW Dim P_View1 As New Microsoft.Web.UI.WebControls.PageView Dim M_Table1 As New HtmlTable Dim M_TR1 As New HtmlTableRow Dim M_TD1 As New HtmlTableCell M_TD1.InnerText = "Tabulation " & Cpt M_TR1.Cells.Add(M_TD1) M_Table1.Rows.Add(M_TR1) P_View1.Controls.Add(M_Table1) M_Page.Controls.Add(P_View1) ' Ajout du PAGEVIEW dans le MULTIPAGE Next M_TD.Controls.Add(M_Page) ' Ajout du control MULTIPAGE dans la cellule M_TR.Cells.Add(M_TD) ' Ajout de la cellule dans la rangée M_Table.Rows.Add(M_TR) ' Ajout de la rangée dans le tableau PlaceHolder1.Controls.Add(M_Table) ' Ajout de tous les controls dynamiques dans le PlaceHolder End Sub End Class

Conclusion :


Ce code est écrit avec Visual Studio 2003 et un Framework version 1.1.4322.
Il est nécessaire de se munir avant tout des outils WebControls sur le site de Microsoft à l'adresse suivante pour la version francaise :

http://www.microsoft.com/downloads/details.aspx?displaylang=fr&FamilyID=FAC6350C-8AD6-4BCA-8860-8A6AE3F64448

Si vous avez des remarques ou si j'ai des erreurs de concept, je suis bien sûr à votre écoute et j'essayerais d'y répondre ou de mettre à jour cet exemple.

Merci de me communiquer vos remarques et de me noter.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
9
Date d'inscription
dimanche 1 juin 2003
Statut
Membre
Dernière intervention
9 septembre 2004

Bonjour,

Ca fait longtemps que je ne suis pas venu voir ici.
A la lecture de vos commentaires, je ne sais pas trop quoi répondre. Le code qui est présenté ici est vraiment celui qui tourne sur mon site et je n'ai pas les pb que vous évoquez.

J'ai de ce fait un peu de mal à vous aider.
Je ne pourrais vous conseiller de bien consulter vos déclarations ou vos en-tête. J'ai eu moi-même plusieurs fois des pb à cause de ces déclarations plus ou moins automatique par Visual Studio.

Cordialement à tous et toutes,
Alain
Messages postés
4
Date d'inscription
mercredi 20 octobre 2004
Statut
Membre
Dernière intervention
6 août 2007

J'ai le même problème que SAVOY sur mon appli sous visual mais le probleme n'y est plus sur le serveur alors que c'est le même fichier... Il doit y avoir un problème de config queck part ???
Messages postés
3
Date d'inscription
mardi 23 mai 2006
Statut
Membre
Dernière intervention
6 avril 2007

SVP il ne connait l'espace de nom Microsoft.Web.UI.WebControls, dois-je ajouter une reference? ou quoi Merci
Messages postés
1
Date d'inscription
mardi 29 novembre 2005
Statut
Membre
Dernière intervention
14 mars 2007

même probleme avec le page view!!!
QQun a une solution?
Messages postés
1
Date d'inscription
jeudi 17 novembre 2005
Statut
Membre
Dernière intervention
16 novembre 2006

Merci pour le code,

Tout est OK mais il ne me reconnait pas le tag dans ma page, alors que côté C# il le voit bien avec Microsoft.Web.UI.Webcontrols.Pageview

C'est OK pour les autres (tabscript, multipage, ...) mais pas pour pageview.

Conséquence, mes onglets ne fonctionnent pas et je vois la totalité des 3 onglets à l'écran.

Je cherche ...

Si quelqu'un a une idée je suis preneur.

Merci
Pierre
Afficher les 10 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.