Jquery-UI Button icon et ASP.NET

Version imprimable

Bonjour,

Je suis en train de mettre en place des Jquery-Ui Button Icon sur les pages de mon site en ASP.NET.
J'ai suivi cet article de blog : http://csharp-guide.blogspot.in/2012...ons-using.html
Pour résoudre l'exception System.ArgumentException: Invalid postback or callback argument, j'ai ajouté :
Code:

1 2 3 4 if (Page.IsPostBack) { Response.Write(Request.Form[button1.UniqueID]); }
et
Code:

1 2 3 4 5 6 protected override void Render(HtmlTextWriter writer) { Page.ClientScript.RegisterForEventValidation(button1.UniqueID, string.Empty); // and so on base.Render(writer); }
Mon code est totalement fonctionnel lorsque le code JS décrit dans l'article cité est compris dans ma page ASP mais dès que j'externalise le script, il n'est plus interprété correctement.
Voici le code dans mon fichier js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function() { $('#cmdjQueryButton').button(); $('#cmdLogin').button( { label: 'Login', icons: { primary: 'ui-icon-locked', secondary: 'ui-icon-key' } }); $('#cmdLogin').click(function(event) { <%= Page.ClientScript.GetPostBackEventReference(this.cmdjQueryButton, string.Empty) %>; }); });
C'est au niveau de cette ligne que ça coince :

Code:

<%= Page.ClientScript.GetPostBackEventReference(this.cmdjQueryButton, string.Empty) %>;

Pourriez-vous m'aiguilliez pour résoudre mon problème ?
Si je laisse le code js dans ma page, je perds en lisibilité et en maintenabilité ...
Merci d'avance pour vos conseils ;)

05/01/2014, 20h25
plume13

Les fichiers js ne sont pas interprétés par le moteur ASP.NET, donc le code entre <% %> reste tel quel.
Pour contourner le problème, tu peux faire un fichier .aspx et l'appeler comme un .js avec une balise <script>.
05/01/2014, 21h27
Petit Rasta

Ha ok c'est pour ça !
Je suis pas très à l'aise avec les spécifiées liées à ASP.NET ...
Je vais passer par un .aspx alors, merci beaucoup !!

Je viens de faire un test en faisant un appel de ma page .aspx :

Code:

<script type="text/javascript" src="Scripts/JqueryButton.aspx" ></script>

Le contenu de la page aspx :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <@ Page language="C#"> $(document).ready(function () { $('#editedjQueryButton').button(); $('#btEdited').button( { label: 'Login', icons: { primary: 'ui-icon-locked', secondary: 'ui-icon-key' } }); $('#btEdited').click(function (event) { <%= Page.ClientScript.GetPostBackEventReference(editedjQueryButton, String.Empty)%>; }); });
Mon code ne semble pas être exécutée. Je ne trouve pas le script en question dans Firebug ...
J'ai du me planter quelque par mais je ne vois pas où ...

06/01/2014, 08h59
plume13

Oups, j'ai perdu toute crédibilité, moi ! 8O
Du coup, vérifie avec Firebug que :
1. l'appel au fichier aspx est bien présent dans le code html ;
2. il n'y a pas d'erreur 404 concernant ce fichier.

Je ne sais pas où tu as placé l'appel, mais je te conseille d'utiliser une syntaxe du type :

Code:

<script type="text/javascript" src='<%=this.ResolveUrl("~/Scripts/JqueryButton.aspx") %>' ></script>

ou le ~ correspond à la racine de l'application (très utile !)

tu as la possibilité de laisser ton button asp être généré et comme ça tu peux cliquer dessus simplement en javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery Button</title>
    <link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
        rel="Stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="Temp/Button.js"></script>
</head>
<body>
    <form id="frmButton" runat="server">
    <div>
        <asp:Button ID="cmdjQueryButton" runat="server" Text="jQuery Button" OnClick="cmdjQueryButton_Click"
            Style="display: none" />
        <button type="button" id="cmdLogin" value="Login" />
    </div>
    </form>
</body>
</html>

le fichier js

Code:

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
    $('#cmdjQueryButton').button();
    $('#cmdLogin').button(
                {
                    label: 'Login',
                    icons: { primary: 'ui-icon-locked', secondary: 'ui-icon-key' }
                });
    $('#cmdLogin').click(function (event) {
        $('#cmdjQueryButton').click();
    });
});

après tu peux avoir quelque problème en ciblant un button asp.net par son id en javascript comme l'id du bouton est généré automatiquement, une solution est de mettre une classe fictive au bouton et de cibler par cette classe.

06/01/2014, 11h07
Petit Rasta

Merci pour vos réponses.

Plume13, le fichier aspx n'est pas présent dans l'onglet Script de Firebug. En fait il y a une exception lors de la compilation. Le bouton "editedjQueryButton" n'est pas déclaré ou n'est pas accessible.
J'ai tenté de le rendre accessible via un accesseur mais je galère avec la propriété static de mon accesseurs (pour y accéder depuis une autre page aspx) et mon asp:button qui ne l'est pas ...

youtpout978, ce que tu m'as dis a fonctionné parfaitement. Je suis passé par la classe pour accéder aux contrôles.

Je reste intéressé pour le faire fonctionner via un fichier .aspx, je risque d'en avoir besoin dans le futur !
06/01/2014, 14h38
youtpout978

Je ne savais même pas qu'on pouvais importer un fichier aspx dans le JS et j'en vois surtout pas l'utilité, le scriptlets sont à bannir autant que faire ce peut, dans certain cas on à pas trop le choix mais ils peuvent amener des erreurs qui ne sont pas facile à résoudre.
06/01/2014, 15h10
Petit Rasta
J'ai encore un petit problème.
Le bouton s'affiche bien, le lien fonctionne bien.
C'est déjà pas si mal :D
Le seul élément gênant, c'est que le bouton jQuery Buton semble être présent dans ma page appelé grâce à la fonction de mon onClick :
Code:

1 2 // Redirect to another page Server.Transfer("Page.aspx");
Sur ma nouvelle page, j'ai le texte du bouton "jQuery Buton" en haut de page et l'esthétisme de ma page est un petit peu endommagé.
Je pensais que ma page appelée régénérait l'ensemble du body du coup je ne comprend pas vraiment ...
06/01/2014, 17h49
youtpout978

Pourquoi tu ne fais pas un

Code:

Response.Redirect("Page.aspx");

à moins que le server.transfer soit obligatoire?

Non je ne vois pas d'obligation d'utiliser un Server.Transfer.
Le style est correctement appliqué avec un Response.Redirect.
J'ai une nouvelle difficulté, dans certaines pages j'ai des boutons générés en C# pour une liste d'objet (exemple bouton supprimé pour plusieurs lignes).
J'ai donc appliqué une classe à mon bouton et créé le code js associé :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $(document).ready(function () { $('.btnDel').button( { icons: { primary: '.ui-icon-trash' }, text: false }); $('.btnDel').click(function (event) { $('.btnDel').click(); }); });
Du coup je n'ai plus à interagir avec l'<asp:Button>. Le style est bien appliqué mais l’icône n'apparait pas ... Une idée de pourquoi l’icône n'est pas affichée ?

Le code C# associé :
Code:

1 2 3 4 5 6 7 // Add delete button Button delButton = new Button(); delButton.Text = "Supprimer"; delButton.ID = String.Format("delete_{0}", IndexOf(user).ToString()); delButton.Click += new EventHandler(this.delButton_Click); delButton.CssClass = "btnDel"; newCell.Controls.Add(delButton);

08/01/2014, 09h36
youtpout978

Quand j'avais essayé ton bout de code la première fois je n'avais pas les petites icones d'afficher, cela vient du fait que j'avais utilisé un button (balise input) classique et non la balise Button, donc si tu veux résoudre ton problème il faut utiliser une balise button pour afficher les petites icônes.
08/01/2014, 11h26
Petit Rasta

Ha oui effectivement !
C'est traitre le Jquery ... bon je ne suis pas arrivé à modifier le type du Button créé en code-behind du coup je suis passé en ciblant les

Code:

$('input[type="submit"]')

et en ciblant la classe de mon bouton.

Par contre, en testant ma page, j'ai un dernier soucis.
Dans mes formulaires, j'utilise des

Code:

<asp:CustomValidator>

pour tester la bonne validité de mes champs.
Je me suis rendu compte qu'en fait c'était traduit en JavaScript lors de l'exécution.
Le problème est le même qu'avec

Code:

Server.Transfer

, lors du chargement de la page mon style est totalement cassé et j'ai le texte du bouton ASP qui est affiché en haut.
Sur ce coup là je ne sais pas du tout comment intervenir parce que le rechargement ce fait de façon implicite ...
08/01/2014, 11h37
youtpout978

Je n'ai pas compris le problème que tu as avec lec customvalidator, et tu peux désactiver la validation coté client avec les validators pour la faire côté server seulement.
08/01/2014, 11h44
plume13

Et sinon, tu veux pas passer au MVC ? Au moins tu pourras faire du jQuery comme tu veux ! :pastaper:
08/01/2014, 12h20
Petit Rasta
En fait j'utilise ce contrôle :
Code:

1 2 3 <asp:CustomValidator ID="customID" runat="server" ControlToValidate="controlToValidate" OnServerValidate="functionControl" ValidationGroup="list" Text="" />
La fonction de contrôle renvoi en cas d'erreur :
Code:

1 2 customID.Text = "<div class='error'>Vous devez saisir au moins <b>1</b> caractère.</div>"; ServerValidateEventArgs.IsValid = false;
Ensuite la page est rechargée je suppose grâce à ServerValidateEventArgs=false; et affiche le texte de l'erreur.
C'est lors de ce rechargement que mes styles ne sont plus correctement appliqués (notamment sur IE) et que le texte du bouton apparaît ...

Je reprends ce sujet du coup je ne suis pas encore très à l'aise pour tout passer en MVC ...
08/01/2014, 12h59
plume13

Citation:

Envoyé par Petit Rasta

Je reprends ce sujet du coup je ne suis pas encore très à l'aise pour tout passer en MVC ...

Je me doute que les contraintes sont fortes, c'était juste pour faire un peu de provoc' (et sache que je compatis... :?)
08/01/2014, 14h31
youtpout978

la validation se fait au premier chargement de la page ou à un autre moment je n’ai pas compris à quel moment ton texte apparait.
08/01/2014, 16h42
Petit Rasta

Nan pas au chargement de la page mais plutôt quand je fais des actions sur la page.
Concrètement, la validation est appelé lors du clic sur le bouton "Ajouter" où je test les champs et leur format. Celui-ci fonctionne correctement sans tout casser.
Celui qui merde, c'est sur le bouton retour. Je fais un test pour savoir si j'ai ajouter au moins une personne avant de procéder à la redirection sur une autre page.
Celui fonctionne (pas de redirection et affichage de l'erreur) mais détruit le style et affiche le text du bouton asp ...

J'ai trouvé comment contourner le problème mais je ne sais pas vraiment l'impact par contre. J'ai commenté le code contenu dans le Page.IsPostBack :

Code:

Response.Write(Request.Form[btnID.UniqueID]
08/01/2014, 17h03
youtpout978

Je pense qu'il était là pour savoir sur quel bouton on avait cliquer, une personne a mis ceci pour faire des tests et a oublié de le supprimer je pense.
13/01/2014, 10h10
Petit Rasta

Désolé pour le temps de réponse mais effectivement je pense que tu as raison. Merci pour ton aide, c'est top ! :ccool:

Bonjour,

Je suis tombé sur une nouvelle difficulté, lorsque mon tableau où mes boutons sont ajoutés via l'appel d'une fonction, mes .click() ne fonctionnent pas.
Lorsque le même code est présent dans le Page_Load, tout fonctionne correctement.
Code peuplement asp:table est exécutée dans le onClick d'un bouton :

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
// Load contacts in table
            foreach (Model.User user in listUsers)
            {
                TableRow newRow = new TableRow();
                newRow.Attributes["id"] = listUsers.IndexOf(user).ToString();
 
                // Login Cell
                TableCell newCell = new TableCell();
                newCell.Text = user.Login;
                newCell.Attributes.Add("class", "lists");
                newRow.Cells.Add(newCell);
 
                // Display Name Cell
                newCell = new TableCell();
                newCell.Text = user.DisplayName;
                newCell.Attributes.Add("class", "lists");
                newRow.Cells.Add(newCell);
 
                // Display Name Cell
                newCell = new TableCell();
                newCell.Text = user.Mail;
                newCell.Attributes.Add("class", "lists");
                newRow.Cells.Add(newCell);
 
                newCell.Attributes.Add("class", "lists");
                newRow.Cells.Add(newCell);
 
                // Action Cell
                newCell = new TableCell();
                // Add ADD button
                Button addButton = new Button();
                addButton.Text = "Ajouter";
                addButton.ID = String.Format("add_{0}", listUsers.IndexOf(user).ToString());
                addButton.Click += new EventHandler(addButton_Click);
                addButton.CssClass = "inputAdd";
                newCell.Controls.Add(addButton);
                newCell.Attributes.Add("class", "lists");
                newRow.Cells.Add(newCell);
 
                // Add row to table
                userSearchList.Rows.Add(newRow);
            }

Code Jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$('input[type="submit"]').each(function()
	{
		if ( $(this).is(".inputAdd")) {
			$(this).hide().after('<button>').next().button
			({
				icons:
				{
					primary: 'ui-icon-plus'
				},
				text: false
			}).click(function(event)
			{
				event.preventDefault();
				$(this).prev().click();
				return false;
			});
		}
	});

Je cherche depuis quelque temps pour comprendre pourquoi le clic ne fonctionne pas ... En fait il est bien détecté mais il me relance ma page alors qu'il devrait passer dans addButton_Click.
Merci pour toute l'aide que vous pourrez m'apporter.

14/01/2014, 17h28
youtpout978

Est-ce que tu fais un postback asynchrone quand tu appelles tes fonctions (tu utilises un updatepanel) ?

Non rien de tout ça ...
Je fais ça directement dans un asp:table, ceci est mon entête :
Code:

1 2 3 4 5 6 7 <asp:Table ID="usersList" runat="server" GridLines="None" CellPadding="5"> <asp:TableHeaderRow> <asp:TableHeaderCell>Login</asp:TableHeaderCell> <asp:TableHeaderCell>Nom complet</asp:TableHeaderCell> <asp:TableHeaderCell>Supprimer</asp:TableHeaderCell> </asp:TableHeaderRow> </asp:Table>
Je le peuple avec le code plus haut en fonction du nombre de ligne que je récupère via une autre fonction.
Je ne le fais pas que dans ce cas là. A un autre endroit, j'ai deux boutons par ligne, le premier fonctionne mais pas le second alors qu'ils sont générés de la même façon.
J'ai regardé le code via Firebug et je me suis aperçu qu'il était surchargé au niveau de sa classe ce qui pourrait expliquer pourquoi le .Click() ne fonctionne pas ...
Premier bouton qui fonctionne:
Code:

1 2 3 <input id="MainContent_admin_086baf58-9040-49f8-a0c2-2d476a9ab61c" class="btnEdit" type="submit" value="Editer" name="ctl00$MainContent$admin_086baf58-9040-49f8-a0c2-2d476a9ab61c" style="display: none;"> <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="">uiButton=Object { element={...}, uuid=11, eventNamespace=".button11", more...}
Second bouton qui ne fonctionne pas :
Code:

1 2 3 <input id="MainContent_cancel_086baf58-9040-49f8-a0c2-2d476a9ab61c" class="btnCancel ui-button ui-widget ui-state-default ui-corner-all" type="submit" value="Annuler" name="ctl00$MainContent$cancel_086baf58-9040-49f8-a0c2-2d476a9ab61c" role="button" aria-disabled="false" style="display: none;">uiButton=Object { element={...}, uuid=0, eventNamespace=".button0", more...} <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="">uiButton=Object { element={...}, uuid=12, eventNamespace=".button12", more...}

J'ai fait un peu debug avec Firefox pour voir ce qui se passait lors du click sur le bouton. Dans le cas où je peuple mon tableau via une fonction, j'ai ceci dans le html :
Code:

1 2 3 <input id="MainContent_Spinner1_add_0" class="inputAdd" type="submit" value="Ajouter" name="ctl00$MainContent$Spinner1$add_0" style="display: none;"> <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-state-focus" role="button" aria-disabled="false" title="">uiButton=Object { element={...}, uuid=9, eventNamespace=".button9", more...}
J'ai donc mes deux boutons, le premier permet de faire référence à celui que j'ai créé en C#. Lors du clic, je passe dans :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if ( $(this).is(".inputAdd")) { $(this).hide().after('<button>').next().button ({ icons: { primary: 'ui-icon-plus' }, text: false }).click(function(event) { event.preventDefault(); $(this).prev().click(); return false; });
Je passe bien dans le .Click() et j'ai vérifié que

Code:

$(this).prev().click();

fait bien référence à mon champ input. Donc en toute logique le problème vient du côté C# ...
Un peu plus haut dans ma page j'ai le même mécanisme qui est initialisé dans le Page.Load et là tout fonctionne correctement ...

15/01/2014, 14h19
youtpout978

En faite tu veux dire que tu fais bien un postback sauf que la fonction addButton_Click n'est jamais appelé.
Pour qu'une méthode attachée à un événement soit bien appeler à chaque chargement elle doit être rattachée à chaque chargement, ce morceau de code doit donc être appeler à chargement de ta page.

Code:

addButton.Click += new EventHandler(addButton_Click);
17/01/2014, 10h57
Petit Rasta

J'ai compris que ça venait de ça du coup j'ai pu corriger le problème.
Merci !