Jquery-UI Button icon et ASP.NET

**Petit Rasta** · 05/01/2014, 19h12

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 :

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

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

et

Code :

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

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 :

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

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 :

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

<%= 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

**plume13** · 05/01/2014, 20h25

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>.

**Petit Rasta** · 05/01/2014, 21h27

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 !!

**Petit Rasta** · 05/01/2014, 22h59

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

Code :

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

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

Le contenu de la page aspx :

Code :

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

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ù ...

**plume13** · 06/01/2014, 08h59

Oups, j'ai perdu toute crédibilité, moi !

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 :

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

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

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

**youtpout978** · 06/01/2014, 09h58

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

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
<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 :

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

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.

**Petit Rasta** · 06/01/2014, 11h07

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 !

**youtpout978** · 06/01/2014, 14h38

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.

**Petit Rasta** · 06/01/2014, 15h10

J'ai encore un petit problème.
Le bouton s'affiche bien, le lien fonctionne bien.
C'est déjà pas si mal

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 :

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

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 ...

**youtpout978** · 06/01/2014, 17h49

Pourquoi tu ne fais pas un

Code :

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

Response.Redirect("Page.aspx");

à moins que le server.transfer soit obligatoire?

**Petit Rasta** · 07/01/2014, 15h07

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 :

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

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 :

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

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);

**youtpout978** · 08/01/2014, 09h36

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.

**Petit Rasta** · 08/01/2014, 11h26

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 :

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

$('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 :

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

<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 :

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

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 ...

**youtpout978** · 08/01/2014, 11h37

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.

**plume13** · 08/01/2014, 11h44

Et sinon, tu veux pas passer au MVC ? Au moins tu pourras faire du jQuery comme tu veux !

**Petit Rasta** · 08/01/2014, 12h20

En fait j'utilise ce contrôle :

Code :

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

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 :

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

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 ...

**plume13** · 08/01/2014, 12h59

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...

)

**youtpout978** · 08/01/2014, 14h31

la validation se fait au premier chargement de la page ou à un autre moment je n’ai pas compris à quel moment ton texte apparait.

**Petit Rasta** · 08/01/2014, 16h42

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 :

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

Response.Write(Request.Form[btnID.UniqueID]

**youtpout978** · 08/01/2014, 17h03

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.

Jquery-UI Button icon et ASP.NET

ASP.NET

Discussions similaires

Partager

Partager