Ajouter un événement OnClick à un button contenu dans un .ascx ?

**sylvebarbe78** · 07/04/2009, 08h54

Bonjour,

Au secours !

Je vous explique mon problème. J'ai écrit un control .ascx qui permet de créer un bouton graphique. Sans trop rentrer dans les détails, j'encapsule le asp:button dans un <span> dans lequel j'applique une image via une balise de style css. J'ai mis les bordures et le fond du bouton en transparent et je simule un rollover graphique en ajoutant des événements onmouseover et onmouseout pour modifier le fond du span. Le résultat est très concluant. Le problème est que j'aimerai à présent rajouter la possibilité de pouvoir utiliser l'événement OnClick à ce bouton (l'événement serveur pas l'événement client OnClientClick que j'ai déjà intégré). Voici quelques lignes :

Déclaration dans la page aspx :

Code :

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

<cc1:ButtonGraphique size="medium" Text="Mon bouton" ID="sb1" runat="server" Tooltip="Mon bouton"   />

Une fois le code générer j'obtiens ceci :

Code :

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

<span id="sb1"><span Id="sbButton1_div" Title="Mon bouton" class="btnOut_100px" onmouseover="this.className='btnOver_100px';" onmouseout="this.className='btnOut_100px';"><input Type="submit" Id="sbButton1" Value="Mon bouton" Title="Mon bouton" class="btnOut_100px" onmouseover="this.className='btnOver_100px';" onmouseout="this.className='btnOut_100px';" /></span></span>

Comment puis-je d'une part ajouter un événement OnClick à ce bouton contenu dans l'ascx et d'autre part ajouter dynamiquement le code associé Protected void sbButton1_Click si je le l'utilise de cette façon :

Code :

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

<cc1:ButtonGraphique size="medium" Text="Mon bouton" ID="sb1" runat="server" Tooltip="Mon bouton" Onclick="sbButton1_Click"   />

Comment procéder dans mon ascx ? Et puis en y réfléchissant bien, je me heurte à un autre point inextricable pour moi, comment rediriger l'événement vers la page qui intègre ce même control ? car celui-ci est traité dans l'ascx et non pas dans la page qui contient l'ascx....

Merci d'avance pour votre aide

Cordialement

**lutecefalco** · 07/04/2009, 09h21

J'ai écrit un article là dessus.
Il n'est pas encore officiellement publié mais le voilà: http://lutecefalco.developpez.com/tu...-page-asp-net/

**sylvebarbe78** · 07/04/2009, 10h01

Merci pour votre réponse,

Ok mais alors....

Comment ajouter nommément un événement OnClick à mon bouton s'il n'existe pas encore ? En effet, contrairement à votre exemple, (votre contrôle contient déjà un Calendar), il n'existe pas dans mon ascx, je le construis de toutes pièces dans l'événement RenderContents en la surchargeant via les méthodes output.AddAttribute, output.RenderBeginTag, output.RenderEndTag avec lesquels je créé d'une part le <SPAN> et le <input type=submit .... /></SPAN> . ?

Ou alors je m'y prend comme une bille !

cordialement

**lutecefalco** · 07/04/2009, 10h13

Dans ton ascx, tu crées une fonction OnClick qui se contente de lever un événement que t'auras défini public (comme dans mon control UcCalendar).

Qd tu construis dynamiquement ton control, tu associes cette fontion à l'événement Click de ton bouton.

Reste plus qu'à t'abonner à cet événement dans ta page

**sylvebarbe78** · 07/04/2009, 11h11

Désolé,

Je dois être le dernier de la classe ! Je suis un peu perdu...

Je vois qu'il faut ajouter la ligne (l'événement) ok :

Code :

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

1
2
3
4
5
...

    public partial class ButtonGraphique : WebControl
    {
        public event EventHandler Click;

Mais comment et à quel endroit générer la fonction pour l'associer à l'événement ci-dessus comme dans ton exemple ?

Code :

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

1
2
3
4
5
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
    if (SelectedDateChanged != null)
       SelectedDateChanged(sender, e);
}

et une adaptation dans mon cas qui serait comme cela :

Code :

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

1
2
3
4
5
protected void xControleName_OnClick(object sender, EventArgs e)
    {
    if (Click!= null)
       Click(sender, e);
     }

Dans le RenderContents que dois-je utiliser pour construire une fonction identique à celle ci-dessus, car mis à part les fonctions disponibles décrites dans le post précédent et quelques autres, je ne vois pas comment générer cette satanée fonction ?

Désolé, je dois paraitre un peu neuneu

à tes yeux mais je ne suis qu'un pauvre débutant !

Cordialement

**lutecefalco** · 07/04/2009, 11h18

Dans ton ascx, t'as un asp:Button non?
Si oui, associes lui la fonction OnClick de façon déclarative. T'embêtes pas à faire ça dans le Render & co

**sylvebarbe78** · 07/04/2009, 13h35

Et non, justement, pas de contrôle asp:button (voilà le hic !)

J'aimerai bien ne pas m'embêter... Enfin bref, j'ai essayé avec ta methode mais la propriété Text du Label1 dans l'exemple n'est pas actualisé ? Pourtant il semble il y avoir un repostage de la page !

page asp.aspx :

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
...
<%@ Register src="ButtonGraphique.ascx" tagname="UcButtonGraphique" tagprefix="uc2" %>


...

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>

<uc2:UcButtonGraphique Text="Exemple Control" runat="server" ID="ButtonGraphique1" Size="Medium" OnClick="ButtonGraphique1_Click" /> 
<br>
<asp:Label ID="Label1" runat="server" ></asp:Label>

</ContentTemplate>
</asp:UpdatePanel>

...

pages aspx.cs :

Code :

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

1
2
3
4
protected void ButtonGraphique1_Click(object sender, EventArgs e)
{
  Label1.Text = "bouton valider";      
}

ASCX (code aspx) :

Code :

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

1
2
3
4
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ButtonGraphique.ascx.cs" Inherits="WebApplication4.ButtonGraphique" %>
<asp: Panel ID="Panel1" runat="server">
    <asp:Button ID="Button1" runat="server" OnClick="Button1_OnClick" />
</asp: Panel>

ASCX (CodeBehind) :
...

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
public partial class ButtonGraphique : System.Web.UI.UserControl
    {
        public event EventHandler Click;
        
        protected void Page_Load(object sender, EventArgs e)
        {
          ...
         }

         protected void Button1_OnClick(object sender, EventArgs e)
        {
            if (Click != null)
                Click(sender, e);
        }

}

Aurais-je oublié quelque chose ?

Cordialement

**lutecefalco** · 07/04/2009, 13h50

A première vue, je dirais que c'est à cause de l'UpdatePanel, essaye sans

**sylvebarbe78** · 07/04/2009, 14h04

Bien non, c'est pas ça !

J'ai retiré l'update Panel comme tu me l'as demandé, la page est bien reposté (ça se voit

...) mais le label lui n'est toujours pas actualisé.
Le plus bizarre dans l'histoire est que lorsque j'utilise un bouton standard et que j'essaie de faire exactement la même chose, qu'il y ait un updatePanel ou pas ça fonctionne très bien !? ?

J'ai l'impression que la fonction de la page .aspx

Code :

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

1
2
3
4
protected void ButtonGraphique1_Click(object sender, EventArgs e)
{
  Label1.Text = "bouton valider";      
}

N'est jamais mise à profit....

Cordialement

**sylvebarbe78** · 07/04/2009, 14h40

Génial ! ça fonctionne...

Encore un grand merci à toi !

Par contre, je rencontre un nouveau problème lié à ce control. Je veux à présent lier l'ID de ce bouton à un ajaxToolkit:ModalPopupExtender via la propriété TargetControlID de ce dernier, mais j'obtiens une erreur.

Sys.ArgumentException: Value must not be null Controls and Behaviors.
Parameter name : element

Il semble que le problème vient du fait que le nom du control est renommé ? Dans le code source, il porte par exemple le nom de 'ButtonGraphique1' et après génération 'ButtonGraphique1_Button1'. Existe-il une solution au problème ?

J'ai bien essayé de rajouter une propriété BehaviorID au bouton en vain, mais rien n'y fait

une idée ?

Cordialement

**lutecefalco** · 07/04/2009, 15h34

Dans ton UserControl, faut créer une propriété publique qui retourne le client Id de ton bouton1

Un truc comme

Code :

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

1
2
3
4
5
6
7
8
 
public string BtnClientID
{
  get
  {
       return Bouton1.ClientID;
  }
}

Tu associes cette propriété à TargetControlID

**sylvebarbe78** · 07/04/2009, 15h49

Ok, suivant tes indications j'ai ajouté la propriété indiquée dans mon ascx et ajouté la liaison dans le Page_Load de la page contenant le ModalPopupExtender :

Code :

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

1
2
3
4
5
6
 
protected void Page_Load(object sender, EventArgs e)
{
      if(!IsPostBack)         
            Popup1.TargetControlID = ButtonGraphique1.BtnClientID;
}

mais j'obtiens l'erreur suivante :

The TargetControlID of 'Popup1' is not valid. The value cannot be null or empty.

Ou alors faut-il effectuer cette liaison à un autre endroit ?

Cordialement

**lutecefalco** · 07/04/2009, 16h05

Tu es sûr que la propriété retourne bien qqchose?

**sylvebarbe78** · 07/04/2009, 16h11

oui j'en suis sure ! exactement ceci: ButtonGraphique1_Button1 mais hélas en retour toujours ce message :

The TargetControlID of 'Popup1' is not valid. A control with ID 'ButtonGraphique1_Button1' could not be found.

**lutecefalco** · 07/04/2009, 16h19

Essaye en déclarant ça de façon déclarative.
Dans le code aspx, au niveau de ton PopupModalExtender, tu mets:

Code :

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

1
2
 
TargetControlId = '<%= ButtonGraphique1.BtnClientID %>'

**sylvebarbe78** · 07/04/2009, 16h24

Désolé, toujours le même type d'erreur !!! :

The TargetControlID of 'Popup1' is not valid. A control with ID '<%= ButtonGraphique1.BtnClientID %>' could not be found.

**lutecefalco** · 07/04/2009, 16h27

Envoyé par sylvebarbe78

Désolé, toujours le même type d'erreur !!! :

C'est pas bon là, '<%= ButtonGraphique1.BtnClientID %>' n'est pas interprété apparemment

**lutecefalco** · 07/04/2009, 16h34

Laisse tomber, ça fonctionne pas les <%= dans un UpdatePanel

**lutecefalco** · 07/04/2009, 16h36

C'est peut être un problème de cycle de page.
Essaye de setter ta propriété dans le Page_PreRender par exemple

**sylvebarbe78** · 07/04/2009, 16h38

Non, apparemment ce n'est toujours pas interprété, rien à faire !!! Incroyable mais vrai

Je me demande si le processus Ajax ne vérifie pas avant la compilation de la page la présence effective du contrôle avec qui il est lié ? Car pour renvoyer systématiquement le même type d'erreur (impossible de trouver le contrôle indiqué) je ne vois pas d'autre explication !

En ce qui concerne l'updatePanel, j'avais retirer le bouton de l'updatePanel il y a quelque temps, mais j'ai toujours le même problème, donc le problème ne vient pas seulement de là...

Ok j'essaie avec le Page_PreRender...

Ajouter un événement OnClick à un button contenu dans un .ascx ?

ASP.NET

Discussions similaires

Partager

Partager