web-dev-qa-db-fra.com

Comment utiliser JQuery avec des pages maîtres?

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

asp.netjquerymaster-pages
30
Keith Myers

MODIFIER

Comme @Adam le souligne dans les commentaires, il existe un mécanisme natif jQuery qui fait essentiellement la même chose que le hack dans ma réponse d'origine. En utilisant jQuery, vous pouvez faire

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

Mon hack a été développé à l'origine comme un travail de prototype pour ASP.NET et je l'ai adapté pour la réponse originale. Notez que jQuery fait essentiellement la même chose sous le capot. Je recommande cependant d'utiliser la méthode jQuery plutôt que d'implémenter mon hack.

Réponse originale laissée pour le contexte du commentaire

Lorsque vous utilisez une page maître, ASP.NET modifie les noms des contrôles sur les pages dépendantes. Vous devrez trouver un moyen de trouver le bon contrôle auquel ajouter le gestionnaire (en supposant que vous ajoutez le gestionnaire avec javascript).

J'utilise cette fonction pour cela:

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 ce qui suit sur votre page enfant

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

Si votre site contient 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>
24
djuth

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 câbler le javascript avec ceci:

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

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

$(function() {});

La syntaxe du sélecteur $('[id$=myButton]') recherche les éléments en fonction de leur attribut id, mais ne correspond qu'à la fin de la chaîne. À l'inverse, '[id^=myButton]' Correspondrait au début, mais pour filtrer le UniqueID, cela ne serait pas très utile. Il existe de nombreux autres sélecteurs utiles que vous pouvez utiliser avec jQuery. Apprenez-les tous , et une grande partie de votre travail sera fait pour vous.

Le problème est que ASP.Net crée un attribut id et nom unique pour chaque élément, ce qui rend leur recherche difficile. Auparavant, vous deviez transmettre la propriété UniqueID au javascript du serveur, mais jQuery rend cela inutile.

Grâce à la puissance des sélecteurs de jQuery, vous pouvez dissocier le javascript du côté serveur et les événements de câblage directement dans votre code javascript. Vous ne devriez plus avoir à ajouter de javascript dans le balisage, ce qui améliore la lisibilité et facilite la refactorisation.

20
Adam Lassek

Déplacez simplement le <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.

15
gius

La solution d'Adam est la meilleure. Facile!

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" />
7
AFD

Référencez le fichier .js Jquery dans la tête de la MasterPage comme suit:

<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>

(certains navigateurs n'aiment pas le terminer avec />)

Ensuite, vous pouvez écrire des choses comme

$('#<%= myBtn.ClientID%>').show()

dans votre javascript en vous assurant d'utiliser le ClientId lors du référencement d'un contrôle ASP.Net dans votre code client. Cela gérera tout "mangling" des noms et identifiants des contrôles.

5
Jared

La page principale:

La bibliothèque jQuery va dans la page maître. Vérifiez si le chemin est correctement référencé. Vous voudrez peut-être ajouter la documentation supplémentaire comme ceci:

<head>
    <script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script> 
    <% if (false) { %>
    <script type="text/javascript" src="/Scripts/jquery-1.2.6-vsdoc.js"></script>
    <% } %>
</head>

La page principale:

<head>
<script type="text/javascript">
    $(document).ready(
        function()
        {
            alert('Hello!');
        }
    );
</script>
</head>

CodeBehind pour les pages de contenu et les contrôles utilisateur:

this.textBox.Attributes.Add("onChange",
    String.Format("passElementReferenceToJavascript({0})", this.textBox.ClientID));
1
Patrick de Kleijn

Lorsque les pages sont rendues avec les pages maîtres, l'ID de contrôle est modifié lors du rendu des pages, nous ne pouvons donc pas les référencer dans jQuery comme ceci #controlid. Au lieu de cela, nous devrions essayer d'utiliser input[id$=controlid]. Si le contrôle est rendu comme contrôle d'entrée ou comme balise d'ancrage, utilisez a[id$=controlid] dans jQuery.

1
Nitin Nayyar

Si quelqu'un veut accéder à une étiquette, voici la syntaxe

$('[id$=lbl]').text('Hello');

où lbl est l'ID de l'étiquette et le texte à afficher dans l'étiquette est "Bonjour"

1
hoodwink

Découvrez ce post:

http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx

explique également comment obtenir intellisense pour jQuery dans Visual studio.

1
Stefan

J'ai également commencé avec les exemples les plus simples et je n'ai pas eu de chance. J'ai finalement dû ajouter le fichier jquery .js extérieur du <head> section de la page maître. C'était le seul moyen de faire fonctionner quoi que ce soit dans Firefox (je n'ai pas encore essayé d'autres navigateurs).

J'ai également dû référencer le fichier .js avec une adresse absolue. Je ne sais pas vraiment ce qui se passe avec celui-là.

0
Scott Marlowe

Adam Lassek est lié à l'utilisation des sélecteurs jQuery, bien que je pense que cela vaut la peine d'appeler explicitement la sélection des éléments par leur classe, par opposition à leur identifiant.

par exemple. Au lieu de $("#myButton").click(function() { alert('button clicked'); });

utilisez plutôt $(".myButtonCssClass").click(function() { alert('button clicked'); });

et ajoutez la classe au bouton:

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

Cela a l'avantage de ne pas avoir à se soucier de savoir si deux identifiants de contrôle "se terminent" de la même manière en plus de pouvoir appliquer le même code jQuery à plusieurs contrôles à la fois (avec la même classe css).

0
n00b

  • PROBLÈME -> lors de l'utilisation des pages Site.Master, les noms d'ID de contrôle (pour ASP) obtiennent le préfixe ContentPlaceHolderID. (Notez que ce n'est pas un problème pour les contrôles non asp car ils ne le font pas ' t être "réinterprété" - c'est-à-dire qu'ils apparaissent juste comme écrit)

  • SOLUTIONS:

      1. Le plus simple -> ajoutez ClientIDMode = "Static" à la définition du contrôle asp (ou définissez avec des propriétés) dans la page aspx
    • Les alternatives incluent:
      1. Codage en dur du nom ContentPlaceHolderID dans le code js, par exemple "# ContentPlaceHolder1_controlName" - eek !!!!
      1. en utilisant le <% = controlName.ClientID%> dans la page ASP - plus, en l'attribuant - là- à une variable (ou un objet de variables). La variable (ou la notation de point d'objet) peut puis être utilisé dans la page js externe (REMARQUE: ne peut pas utiliser <% = controlName.ClientID%> dans js externe)
      1. Utilisation de CssClass avec un unique (même nom que l'ID) dans la page ASP et référence au contrôle en tant que ".controlName" au lieu de "#controlName"
      1. Utiliser le "[id $ = _ controlName]" au lieu de "#controlName" - cela implique une petite recherche et recherche un contrôle qui se termine par le nom unique - de cette façon, le début n'est pas pertinent
0
Mike