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 🙂

InformationsquelleAutor Keith Myers | 2008-11-15

26

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
```
 $('[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.

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:
```
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" />
```
- Je suis assez nouveau à cela et n'avait aucune idée sur le nom du modificateur. Je vais vous donnez ce un aller plus loin. Je l'apprécie.
- S'habituer à l'utilisation de la "Vue de la source" (Ou équivalent) de votre navigateur. Cela vous permet non seulement de vérifier que vos pages sont rendu l'ay que vous voulez, mais pour apprendre des tours de othe gens de pages.
- c'est qu'une volonté délibérée de typo '$asp' v 'asp$'? je ne pourrais pas obtenir que cela fonctionne - elle en prend le contrôle ok mais jQuery appel ne fonctionne pas pour une raison quelconque
- J'ai corrigé la faute de frappe.
- Vous êtes à ce génie. Vous pouvez remplacer l'ensemble de cette fonction avec $('[id$=myButton]').cliquez sur(function(){ alert('le bouton cliqué'); });
- En fait, c'était avant que j'ai utilisé jQuery beaucoup à tous et le hack est un Prototype de remplacement avec l'utilisation adaptées pour jQuery. J'ai déménagé à ASP.NET MVC et, heureusement, n'ont pas à se soucier d'amputation des noms à tous.
- À l'aide de la ClientID pour obtenir le nom du contrôle est une méthode beaucoup plus simple et le sera toujours, parce que peu importe ce que le maître/le contenu de la page crée un ID, le code javascript dans la page de contenu sera bien dur de code sur la production. Si elle ne fonctionne pas sur les fichiers javascript. 🙁
- Qui fait sens. Je voulais juste dire quelque chose que les gens sachent ce n'est même pas proche de la meilleure pratique.
- Plus simple? Je prie de différer; il vous oblige à bien un couple de code côté serveur avec frontend javascript et de balisage. Si l'id des éléments en question sont susceptibles de changer, vous pouvez lui donner une classe css et sélectionnez-le de cette façon.
- votre chemin est le plus simple. stackoverflow.com/questions/1274806/...
InformationsquelleAutor tvanfosson
24

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:
```
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
```
- Quand j'ai mis cette balise d'en-tête et de l'exécution, la page d'erreur et de fournir ce La collection de Contrôles ne peuvent pas être modifiées car le contrôle contient les blocs de code (c'est à dire <% ... %>). Description: Une exception non gérée s'est produite pendant l'exécution de la demande web actuelle. Veuillez consulter la trace de la pile pour plus d'informations sur l'erreur et où elle a son origine dans le code. Détails De L'Exception: System.Web.HttpException: La collection de Contrôles ne peuvent pas être modifiées car le contrôle contient les blocs de code (c'est à dire <% ... %>).
- Collé à partir d' @Jos suggestion: Comme une réponse à @Sarawut commentaire, vous obtenez son problème, par exemple lorsque vous utilisez les thèmes. Les thèmes vais essayer d'ajouter des contrôles à la tête, mais cela ne fonctionne pas quand il y a des <%...%> balises dans la tête déjà. Pour éviter cela, vous pouvez ajouter le script à l'aide de code (dans la page principale): 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
- J'ai dû revenir à l'aide de asp.net webforms et votre réponse résolu mon problème que je ne pouvais pas utiliser le mvc 3 la syntaxe razor de @Url.Contenu ... par exemple <script src="@Url.Contenu("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> Merci!
InformationsquelleAutor djuth
20

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

InformationsquelleAutor Adam Lassek
15

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.

InformationsquelleAutor gius

Adam est la meilleure solution. Simple!

Master page:

<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ù le bouton est

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

InformationsquelleAutor AFD

5

De référence de la le Jquery .fichier js dans le head de la MasterPage comme suit:
```
<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script> 
```
(certains navigateurs n'aime pas le terminer par />)

Ensuite, vous pouvez écrire des choses comme
```
$('#<%= myBtn.ClientID%>').show() 
```
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.
- Si j'ai attendu à ce que le travail? $('#<%= Button1.ClientID%>').cliquez sur(function() { alert('Hello world!'); }); Ce code est dans mon .fichier js. Je sais que j'ai tout configuré correctement, parce que si je copie la 'déformation' id de la source de la page, il fonctionne très bien.
- Le <% %> syntaxe ne fonctionne que dans le .fichier aspx. Donc, si vous voulez l'utiliser, vous devez mettre votre script dans un <script> bloc dans votre fichier aspx.
InformationsquelleAutor Jared

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:

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

Master page:

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

Le code-behind pour les pages de contenu et les contrôles de l'utilisateur:

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

InformationsquelleAutor Patrick de Kleijn

1

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.

InformationsquelleAutor Stefan
1

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'utiliser input[id$=controlid]. Si le contrôle est rendu au contrôle d'entrée ou si comme balise d'ancrage utilisation a[id$=controlid] en jQuery.

InformationsquelleAutor Nitin Nayyar
1

Dans le cas où si quelqu'un veut accéder à un label, voici la syntaxe
```
$('[id$=lbl]').text('Hello');
```
où lbl est l'id de l'étiquette et le texte à afficher dans le label est "Bonjour"

InformationsquelleAutor hoodwink
0

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.

InformationsquelleAutor Scott Marlowe
0

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:
```
<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myButtonCssClass" />
```
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).

InformationsquelleAutor n00b
0
- 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:
  - Plus simple --> ajouter ClientIDMode="Statique" de l'asp de contrôle de la définition (ou ensemble avec des propriétés) dans la page aspx
  - Solutions comprennent:
  - Coder en dur les ContentPlaceHolderID nom dans le code js e.g "#ContentPlaceHolder1_controlName" - aïe!!!!
  - à l'aide de la <%= nom de contrôle.ClientID %> dans la page ASP - plus, estimant que c'est - il - à une variable (ou un objet de variables). La variable (ou de l'objet de notation par points) peut alors être utilisé en js externe page
    (NOTE: ne pas utiliser <%= nom de contrôle.ClientID %> en js externe)
  - À l'aide de CssClass avec un unique(même nom que l'ID) dans la page ASP et de référence pour le contrôle ".nomchamp" au lieu de "#nomchamp"
  - À l'aide de la "[id$=_controlName]" au lieu de "#nomchamp" - c'est implique une petite recherche et est à la recherche d'un contrôle qui se termine par le nom unique du fait que le début n'est pas pertinent
InformationsquelleAutor Mike

Vous devez vous connecter pour publier un commentaire.