Créer un WebControl personnalisé

**joce21** · 16/03/2012, 14h08

Bonjour,

J'ai un menu vertical dans lequel j'ai créé des boutons à l'aide de DIV. Cependant je trouve que j'ai beaucoup de duplication de code et j'aimerais pouvoir créer un WebControl.

Voici à quoi ressemble mes boutons:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
            <div id="bCommun" class="mainMenuButton" title="Communs">
                <input type="hidden" value="communs.aspx" />
                <table border="1" style="margin-left: 10px; height: 70px;">
                    <tr>
                        <td>
                            <img src="Images/Icons/041-Shopping-bag-Icon.png" alt="" />
                        </td>
                        <td>
                            <span class="Tag2910">Communs</span>
                        </td>
                    </tr>
                </table>
            </div>

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
.mainMenuButton img
{
    width: 32;
    height: 32; 
    vertical-align: middle;
}
 
.mainMenuButton
{
    background: url('../Images/menu_button.png') no-repeat;
    height: 70px;
    width: 150px !important;
    line-height: 70px;
    overflow: hidden;
}
.mainMenuButton:hover
{
    cursor: hand !important;
    background: url('../Images/menu_button_over.png') no-repeat;
}
 
.mainMenuButton span:hover
{
    cursor: hand !important;
}
 
.mainMenuButton img:hover
{
    cursor: hand !important;
}

J'aimerais avoir un WebControl qui ressemblerais à cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<GESPHARxLite_2:MenuButton runat="server" ID="button1" NavigationLanguage="VB" tooltip="Communs" 
pageURL="communs.aspx" text="Communs" iconImage="Images/Icons/041-Shopping-bag-Icon.png" />

Je voudrais donc que,

tooltip = "title" du div,
pageURL = le "value" du input,
text = la valeur du span,
iconImage = le "src" de l'image.

J'ai chercher sur le Web, mais je n'ai pas trouvé de tuto qui répondait à mon besoin.

Quelqu'un pourrait m'éclairer?

Merci!

PS: Je travaille en langage VB.

**vhoward99** · 16/03/2012, 17h40

Bonjour,

voici pour t'aider (mais il y a plein de tuto sur le sujet), il faut ajouter à ton projet un WebUserControl (ascx)

voici un code pour modifier le title de ta balise bCommun comme dans ton exemple :

default.aspx - bien faire le register du contrôle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register TagPrefix="my" TagName="myc" Src="WebUserControl.ascx" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<my:myc ID="ctrl" title="LE TITRE" runat="server" />
    </div>
    </form>
</body>
</html>

le WebUserControl.ascx, bien mettre l'attribut runat=server à ton div bCommun

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"
    Inherits="WebUserControl" %>
 
<div id="bCommun" class="mainMenuButton" runat="server">
    <input type="hidden" value="communs.aspx" />
    <table border="1" style="margin-left: 10px; height: 70px;">
        <tr>
            <td>
                <img src="Images/Icons/041-Shopping-bag-Icon.png" alt="" />
            </td>
            <td>
                <span class="Tag2910">Communs</span>
            </td>
        </tr>
    </table>
</div>

et le WebUserControl.ascx.cs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class WebUserControl : System.Web.UI.UserControl
{
    private String _title;
    public string title
    {
        get
        {
            return _title;
        }
        set
        {
            _title = value;
        }
    }
 
    protected void Page_Load(object sender, EventArgs e)
    {
        bCommun.Attributes.Add("title", _title);
    }
}

Cordialement

**joce21** · 16/03/2012, 20h50

Merci beaucoup! Exactement ce que je cherchais!

Créer un WebControl personnalisé

ASP.NET

Vue hybride

Discussions similaires

Partager

Partager