Comment utiliser JQuery avec des pages maîtres?

Question

Je peux obtenir des exemples simples pour bien fonctionner tant qu'il n'y a pas de page maître impliquée. Tout ce que je veux faire, c'est cliquer sur un bouton et lui faire dire "bonjour le monde" avec le javascript dans un fichier .js, en utilisant une page maître. Toute aide sera grandement appréciée :)

Answer 1

MODIFIER

Comme @Adam points dans les commentaires, il y a un natif, jQuery mécanisme qui se fait de la même chose que le hack dans ma réponse originale à cette question. À l'aide de jQuery, vous pouvez le faire

 $('[id$=myButton]').click(function(){ alert('button clicked'); });

Mon hack a été développé à l'origine comme un Prototype de travail autour de ASP.NET et je l'ai adapté pour la réponse originale à cette question. Notez que jQuery se fait de la même chose sous le capot. Je recommande l'utilisation de jQuery, même si, au cours de la mise en œuvre de mon hack.

Réponse originale à cette question gauche pour le commentaire contexte

Lorsque vous utilisez une page maître, ASP.NET mangles les noms des contrôles sur les pages dépendantes. Vous aurez besoin de trouver un moyen de trouver la bonne commande pour ajouter le gestionnaire (en supposant que vous êtes en train d'ajouter le gestionnaire avec le javascript).

J'utilise cette fonction pour faire ça:

function asp$( id, tagName ) {
    var idRegexp = new RegExp( id + '$', 'i' );
    var tags = new Array();
    if (tagName) {
        tags = document.getElementsByTagName( tagName );
    }
    else {
        tags = document.getElementsByName( id );
    }
    var control = null;
    for (var i = 0; i < tags.length; ++i) {
       var ctl = tags[i];
       if (idRegexp.test(ctl.id)) {
          control = ctl;
          break;
       }
    }

    if (control) {
        return $(control.id);
    }
    else {
        return null;
    }
}

Ensuite, vous pouvez faire quelque chose comme:

jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } );

où vous avez le suivant sur votre page enfant

<asp:Button ID="myButton" runat="server" Text="Click Me" />

Answer 2

Si votre site a des pages de contenu dans d'autres dossiers, l'utilisation de la méthode ResolveUrl de la page dans le chemin src garantira que votre fichier js sera toujours trouvé:

 <script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
 

Answer 3

Assurez-vous que jQuery est ajouté dans la page maître. Étant donné que vous avez ce contrôle:

<asp:Button ID="myButton" runat="server" Text="Submit" />

Vous pouvez wireup le javascript avec ceci:

$(document).ready(function() {
    $('[id$=myButton]').click(function() { alert('button clicked'); });
});

$(document).ready() se déclenche lorsque le DOM est chargé complètement, et tous les éléments doivent être là. Vous pouvez simplifier davantage avec

$(function() {});

Le sélecteur de syntaxe $('[id$=myButton]') recherches éléments en fonction de leur attribut id, mais ne correspond qu'à la fin de la chaîne. À l'inverse, '[id^=myButton]' correspond au début, mais pour les fins de filtrage des id unique qui ne serait pas très utile. Il y en a beaucoup plus utile sélecteurs vous pouvez utiliser avec jQuery. Apprendre tous, et une grande partie de votre travail sera fait pour vous.

Le problème est que ASP.Net crée un identifiant unique et le nom de l'attribut pour chaque élément, ce qui rend la recherche difficile. Il a utilisé pour être que vous auriez besoin de passer l'id unique de la propriété du javascript à partir du serveur, mais jQuery fait que inutile.

Avec la puissance de jQuery sélecteurs, vous pouvez dissocier le javascript côté serveur tout à fait, et wireup événements directement dans votre code javascript. Vous ne devriez pas avoir à ajouter du code javascript dans le balisage plus, ce qui contribue à la lisibilité et rend refactoring beaucoup plus facile.

Answer 4

Déplacez simplement la balise <script type="text/javascript" src="jquery.js" /> dans la balise head de la page maître. Ensuite, vous pouvez utiliser jquery dans toutes les pages de contenu.

Il n'y a pas de magie à utiliser des pages maîtres avec jQuery.

Answer 5

La solution d'Adam est la meilleure. Simple!

La page principale:

 <head runat="server">    
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>    
</head>
 

Contenu de la page:

 <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">       
<script type="text/javascript">
    $(document).ready(function () {
        $("[id$=AlertButton]").click(function () {
            alert("Welcome jQuery !");
        });
    }); 
</script> 
</asp:Content>
 

où se trouve le bouton

 <asp:Button ID="AlertButton" runat="server" Text="Button" />