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.

Jquery-UI Button icon et ASP.NET

ASP.NET

Vue hybride

Discussions similaires

Partager

Partager