modo corretto di utilizzare jQuery quando si utilizza MasterPages in ASP.NET?

StackOverflow https://stackoverflow.com/questions/731407

Domanda

Non ho problemi quando si fa utilizzando jQuery in una pagina aspx senza masterpage, ma quando cerco di usarlo in pagine che hanno un masterpage, non funziona, così finisco per mettere i file jQuery e altro script file nella pagina invece del maestro. Ora, se io ho 10 pagine, sto facendo questo per tutti i 10, che so non è corretto. Nel masterpage esempio riportato di seguito, dove dovrei mettere i miei file di script. 

<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 in basso, a destra prima del asp chiusura: Content. Naturalmente, ora ho il problema della, se volevo usare il plugin fancybox in altre pagine, vorrei mettere lo script jQuery e lo script fancybox su tutte le 5 pagine invece che solo il masterpage. Quando si tratta di masterpages, da dove viene tutto andare con il mio esempio di cui sopra?

È stato utile?

Soluzione

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, una soluzione migliore sarebbe quella di esaminare la ScriptManager e ScriptManagerProxy controlli -. questi possono fornire con molto più controllo sul modo in cui i file JS sono serviti al cliente

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

<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 un certo file JS personalizzati o un plugin jQuery, si può 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 permette di fare cose come il controllo in cui gli script sulla pagina sono rese con LoadScriptsBeforeUI (o, meglio ancora, dopo impostando su false).

Altri suggerimenti

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>

Va bene utilizzare un ContentPlaceHolder diverso per lo script. Esso dovrebbe essere simile a questo 

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

</asp:ContentPlaceHolder>

Inserisci questo tag nella parte inferiore della vostra masterpage, vicino al tag </body>. Questo vi permetterà di aggiungere script sul masterpage e anche sulle tue pagine pure. Assicurarsi che gli script vengono caricati nel giusto ordine visualizzando il sorgente della pagina e garantire il rendering HTML nel modo giusto. In bocca al lupo.

Ah un'altra cosa, assicurarsi che jQuery e poi Fancybox caricare prima di qualsiasi altra js si può avere là fuori, altrimenti non funzionerà. carichi Javascript nell'ordine è stato chiamato, jQuery è necessario inserire la prima!

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

Note aggiuntive:

  1. Utilizzare le versioni minified come potrebbe possibile (FileName.min.js) e (FileName.min.css) per ridurre il tempo di carico e migliorare la SEO.
  2. Mettere il CSS prima del </head> e lo script prima della </body> a migliorare le prestazioni e migliorare la SEO.
  3. Il carattere piastrella (~) nel percorso risolverà automaticamente alla radice del tuo sito web.
  4. Non dimenticare di utilizzare runat="server" solo per il foglio di stile. Lo script non deve avere runat="server" perché utilizza già operatori del server <%= %>.
  5. È possibile utilizzare il http://jscompress.com/ di comprimere i javascript e https://csscompressor.net/ di comprimere i file CSS.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top