Modo corretto per utilizzare JQuery quando si utilizza MasterPages in ASP.NET?

Non ho alcun problema quando uso JQuery in una pagina aspx senza una masterpage, ma quando provo a usarlo in pagine che hanno una masterpage, non funziona, quindi finisco per mettere i file jquery e altri file di script nella pagina invece del master. Ora se ho 10 pagine, lo faccio per tutti e 10, che so che non è corretto. Nella seguente pagina di esempio, dove inserirò i miei file di script.Modo corretto per utilizzare JQuery quando si utilizza MasterPages in ASP.NET?

<html> 
<head runat="server"> 
    <asp:ContentPlaceHolder ID="head" runat="server"> 
    </asp:ContentPlaceHolder> 
</head> 
<body> 
    <asp:ContentPlaceHolder ID="ContentPanel" runat="server"> 
    </asp:ContentPlaceHolder>    
</body> 
</html>

Recentemente ho usato il plugin fancybox e quello che ho fatto è stato invece di mettere gli script di script e Fancybox jQuery nel masterpage perché ho avuto frustrato su come farlo funzionare, ho appena messo nella pagina in cui ho voluto lo script da eseguire, in particolare nella parte inferiore, subito prima dell'aspirazione finale: Contenuto. Ovviamente, ora ho il problema di, se volessi usare il plugin fancybox in altre pagine, inserirò lo script jquery e lo script fancybox su tutte e 5 le pagine invece che solo sulla masterpage. Quando si tratta di masterpages, dove va tutto usando il mio esempio sopra?

fonte

2009-04-08 Xaisoft

Si potrebbe dichiarare le principali script jQuery all'interno della pagina master, come si farebbe normalmente:

<head runat="server"> 
    <link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" /> 
    <script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script> 
    <asp:ContentPlaceHolder ID="head" runat="server"> 
    </asp:ContentPlaceHolder> 
</head>

E poi tutti i file JS pagina specifica potrebbe essere caricato entro i controlli contenuti che fanno riferimento al capo ContentPlaceHolder.

Tuttavia, un'opzione migliore sarebbe esaminare i controlli ScriptManager e ScriptManagerProxy, che possono fornire un controllo molto maggiore sul modo in cui i file JS vengono offerti al client.

Così si sarebbe posto un controllo ScriptManager in voi pagina master, e aggiungere un riferimento al codice di base jQuery in quanto:

<body> 
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
     <Scripts> 
     <asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" /> 
     </Scripts> 
    </asp:ScriptManager>

Poi, nella tua pagina che richiede alcuni file JS personalizzati, o un jQuery plugin, è possibile avere:

<asp:Content ID="bodyContent" ContentPlaceholderID="body"> 
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server"> 
     <Scripts> 
     <asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" /> 
     </Scripts> 
    </asp:ScriptManagerProxy>

Lo ScriptManager ti permette di fare cose come il controllo in cui gli script sulla pagina sono resi con LoadScriptsBeforeUI (o, meglio ancora, dopo impostandolo su false).

fonte

2009-04-08 19:44:22

Va bene, usa un contentplaceplace diverso per il tuo script. Esso dovrebbe essere simile a questo

<script type="text/javascript" src="myscript.js" /> 
<asp:ContentPlaceHolder ID="ScriptContent" runat="server"> 

</asp:ContentPlaceHolder>

collocare questo tag nella parte inferiore del vostro masterpage, vicino al tag </body>. Ciò ti consentirà di aggiungere script nella masterpage e anche nelle tue pagine. Assicurati che gli script vengano caricati nell'ordine corretto visualizzando l'origine della pagina e assicurando il rendering HTML nel modo corretto. In bocca al lupo.

Oh un'altra cosa, assicurati che jQuery e poi FancyBox vengano caricati prima di qualsiasi altro js che potresti avere là fuori, altrimenti non funzionerà. Javascript viene caricato nell'ordine in cui è stato chiamato, jQuery deve essere caricato prima!

fonte

2009-04-08 19:19:10

JavaScript si carica prima del markup html? – Xaisoft

Io uso questo metodo.

<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>

Basta posizionarlo sopra il tag ...

<asp:ContentPlaceHolder ID="head" runat="server"> 
    </asp:ContentPlaceHolder>

fonte

2010-02-11 01:40:25 Kieran

+1 ma ho ricevuto un avviso quando includo l'attributo language che dice attributo non valido –

Preferisco questo perché non richiede ScriptManager o componente aggiuntivo. –

Questo è quello che funziona all'interno di una pagina master:

per il file script:

<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>

Per file CSS:

<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />

supplementare non es:

utilizzare le versioni ridotte di come potrebbero possibile (FileName.min.js) e (FileName.min.css) per ridurre i tempi di caricamento e migliorare la SEO.
Inserire il codice CSS prima dello </head> e lo script prima dello </body> su migliorare le prestazioni e migliorare la SEO.
Il carattere di tile (~) nel percorso verrà risolto automaticamente nella radice del sito Web.
Non dimenticare di utilizzare runat="server" solo per il foglio di stile. Lo script non deve avere runat="server" perché utilizza già operatori di server <%= %>.
È possibile utilizzare lo http://jscompress.com/ online per comprimere il javascript e https://csscompressor.net/ per comprimere i file CSS.

fonte

2015-05-12 01:12:52

Modo corretto per utilizzare JQuery quando si utilizza MasterPages in ASP.NET?

risposta

Problemi correlati