Comment faire pour utiliser JQuery avec les Pages Maîtres?
Je peux obtenir de simples exemples fonctionnent bien tant qu'il n'y a pas de page maître impliqués. Tout ce que je veux faire est de cliquer sur un bouton et ont-il dire "hello world" avec le javascript dans un .js fichiers, à l'aide d'une page maître. Toute aide très appréciée 🙂
Vous devez vous connecter pour publier un commentaire.
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 faire
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.
Original de la réponse de la 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 javascript).
J'utilise cette fonction pour faire ça:
Ensuite, vous pouvez faire quelque chose comme:
où vous avez le suivant sur votre page enfant
Si votre site a des pages de contenu dans d'autres dossiers, à l'aide de la Page de
ResolveUrl
méthode de la src chemin fera en sorte que votre fichier js peut toujours être trouvée:Public Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Dim lit As New Literal() lit.Text = String.Format("<script type='text/javascript' src='{0}'><" & "/script>", ResolveUrl("~/Script/jquery-1.6.1.js")) Page.Header.Controls.Add(lit) End Sub
Assurez-vous que jQuery est ajouté dans la page maître. Étant donné que vous avez ce contrôle:
Vous pouvez wireup le javascript avec ceci:
$(document).ready()
déclenche lorsque le DOM est chargé complètement, et tous les éléments doivent être là. Vous pouvez simplifier davantage avecLe 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.
Il suffit de déplacer le
<script type="text/javascript" src="jquery.js" />
tag 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 sur l'utilisation des pages maîtres avec jQuery.
Adam est la meilleure solution. Simple!
Master page:
Contenu de la page:
où le bouton est
De référence de la le Jquery .fichier js dans le head de la MasterPage comme suit:
(certains navigateurs n'aime pas le terminer par />)
Ensuite, vous pouvez écrire des choses comme
dans votre javascript en vous assurant d'utiliser le ClientId lorsque le référencement d'un ASP.Net de contrôle dans votre code client. Qui va gérer toutes les "mutilations" des noms et des id des contrôles.
Master page:
La bibliothèque jQuery va dans la page maître. Voir si le chemin est correctement référencé. Vous pourriez, comme pour ajouter de la documentation supplémentaire comme ceci:
Master page:
Le code-behind pour les pages de contenu et les contrôles de l'utilisateur:
Découvrez ce post:
http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx
explique également comment obtenir de l'intellisense pour jQuery dans Visual studio.
Lorsque les pages sont affichées avec les pages maîtres, les id de contrôle est modifié sur le rendu de la page donc on ne peut pas les renvoyer en jQuery comme ce
#controlid
. Au lieu de cela, nous devrions essayer d'utiliserinput[id$=controlid]
. Si le contrôle est rendu au contrôle d'entrée ou si comme balise d'ancrage utilisationa[id$=controlid]
en jQuery.Dans le cas où si quelqu'un veut accéder à un label, voici la syntaxe
où
lbl
est l'id de l'étiquette et le texte à afficher dans le label est "Bonjour"J'ai aussi commencé avec le plus simple des exemples et n'avait pas de chance. J'ai finalement dû ajouter le jquery .fichier js à l'extérieur de la
<head>
section de la page maître. C'était la seule façon que je pouvais trouver quelque chose à travailler dans Firefox (n'ai pas essayé d'autres navigateurs pour l'instant).J'ai également référence à la .fichier js avec une adresse absolue. Pas entièrement sûr de ce qui se passe avec un.
Adam Lassek liés à l'utilisation de sélecteurs jQuery, mais je pense que sa vaut le coup explicitement l'appel de la sélection d'éléments par leur classe, par opposition à leur id.
par exemple au Lieu de
$("#myButton").click(function() { alert('button clicked'); });
au lieu d'utiliser
$(".myButtonCssClass").click(function() { alert('button clicked'); });
et ajouter la classe le bouton:
Cela a l'avantage de ne pas avoir à vous soucier de savoir si deux id de contrôle " fin " de la même façon en plus d'être en mesure d'appliquer le même code jQuery à plusieurs commandes à la fois (avec la même classe css).
PROBLÈME --> lors de l'utilisation du Site.Les pages maîtres de l'id de contrôle noms (ASP contrôles) obtenir l'ContentPlaceHolderID le préfixe pour eux.
(Notez que ce n'est pas un problème pour les non-asp contrôles qu'ils n'obtiennent pas 'réinterprété' - c'est à dire tout simplement apparaître comme l'écrit)
SOLUTIONS:
(NOTE: ne pas utiliser <%= nom de contrôle.ClientID %> en js externe)