Includere file JavaScript in viste parziali
https://stackoverflow.com/questions/912755
-
06-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Mi chiedo quale sia la migliore pratica per includere i file JavaScript all'interno di una vista parziale. Una volta reso questo finirà come un js includono tag nel mezzo del codice HTML della mia pagina. Dal mio punto di vista questo non è un bel modo di fare questo. Appartengono nel tag testa e come tale non dovrebbe impedire al browser dal rendering html in una sola volta.
Esempio: Sto usando un plugin jQuery picturegallery all'interno di vista parziale di una 'picturegallery' come questa visione parziale sarà utilizzato su diverse pagine. Questo plugin ha solo bisogno di essere caricato quando questo punto di vista viene utilizzato e Non voglio avere bisogno di sapere quali plugin ogni visione parziale sta usando ...
Grazie per le vostre risposte.
Soluzione
sembra molto simile a questa domanda: Linking JavaScript Biblioteche in controlli utente
Io ripubblicare la mia risposta che la questione qui.
avrei sicuramente consigliare contro la loro messa parziali all'interno esattamente per la ragione si parla. C'è un'alta probabilità che un punto di vista potrebbe tirare in due parziali che entrambi hanno i riferimenti allo stesso file js. Hai anche avuto il calo di prestazioni di js caricamento prima di caricare il resto del codice HTML.
Non so circa le migliori pratiche, ma ho scelto di includere tutti i file js comuni all'interno masterpage e quindi definire un ContentPlaceHolder separato per alcuni file js aggiuntivi che sono specifici per un particolare o un piccolo numero di visualizzazioni.
Ecco un esempio pagina master - è piuttosto auto esplicativo
.<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<head runat="server">
... BLAH ...
<asp:ContentPlaceHolder ID="AdditionalHead" runat="server" />
... BLAH ...
<%= Html.CSSBlock("/styles/site.css") %>
<%= Html.CSSBlock("/styles/ie6.css", 6) %>
<%= Html.CSSBlock("/styles/ie7.css", 7) %>
<asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" />
</head>
<body>
... BLAH ...
<%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %>
<%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %>
<asp:ContentPlaceHolder ID="AdditionalJS" runat="server" />
</body>
& Html.CSSBlock Html.JSBlock sono ovviamente le mie estensioni ma ancora una volta, sono auto esplicative in quello che fanno.
Poi nel dire una vista SignUp.aspx avrei
<asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server">
<%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %>
</asp:Content>
HTHS, Charles
Ps. Ecco una domanda di follow-up ho chiesto minifying e concatenando i file js: Concatenate & Minify JS sul mosca o al momento della compilazione - ASP.NET MVC
Modifica Come richiesto sulla mia altra risposta, la mia implementazione di .JSBlock (a, b) come richiesto
public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName)
{
return html.JSBlock(fileName, string.Empty);
}
public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName, string releaseFileName)
{
if (string.IsNullOrEmpty(fileName))
throw new ArgumentNullException("fileName");
string jsTag = string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>",
html.MEDebugReleaseString(fileName, releaseFileName));
return MvcHtmlString.Create(jsTag);
}
E poi dove avviene la magia ...
public static MvcHtmlString MEDebugReleaseString(this HtmlHelper html, string debugString, string releaseString)
{
string toReturn = debugString;
#if DEBUG
#else
if (!string.IsNullOrEmpty(releaseString))
toReturn = releaseString;
#endif
return MvcHtmlString.Create(toReturn);
}
Altri suggerimenti
Il motivo si dovrebbe mettere uno script in fondo alla pagina è quello di garantire il DOM è stato caricato prima di tentare qualsiasi manipolazione. Questo può essere ottenuto anche in qualcosa di simile alla $ (document) .ready (callback); metodo di jQuery.
Condivido il parere di non mettere JavaScript incorporato nel codice HTML. Invece io uso un aiutante HTML per creare un div vuoto da utilizzare come un'istruzione server. Il sig helper è Html.ServerData (String name, Data Object);
Io uso questo metodo ServerData per istruzioni dal server al client. Il tag div mantiene pulito e l'attributo "dati-" è HTML5 valido.
Per l'istruzione CaricaScript io possa fare qualcosa di simile nella mia ascx o aspx:
<%= Html.ServerData("loadScript", new { url: "pathTo.js" }) %>
O aggiungere un altro aiutante di fare questo, che sembra un po 'più pulito:
<%= Html.LoadScript("~/path/to.js") %>
L'output HTML potrebbe essere:
<div name="loadScript" data-server="encoded json string">
Poi ho un metodo di jQuery che può trovare qualsiasi tag di dati del server: $ (ContainingElement) .serverData ( "CaricaScript"); // restituisce un jQuery come array di oggetti json decodificati.
Il cliente può essere simile a questa:
var script = $(containingelement").serverData("loadScript");
$.getScript(script.url, function () {
// script has been loaded - can do stuff with it now
});
Questa tecnica è grande per i controlli utente o script che devono essere caricati entro ajax caricati contenuti. La versione che ho scritto è un piccolo script movimentazione di caching più coinvolti in modo da caricare solo una volta per carico completo della pagina e contengono callback e jQuery innesca in modo da poter collegare in esso quando è pronto.
Se qualcuno è interessato nella versione completa di questo (da MVC all'estensione jQuery) Sarei felice di mostrare questa tecnica in modo più dettagliato. In caso contrario -. Spera che qualcuno dà un nuovo modo di affrontare questo problema difficile
Oggi ho creato la mia soluzione che si adatta perfettamente il disegno di legge. Che si tratti di un buon design o no, è per tutti voi a decidere, ma pensato che avrei dovuto condividere in entrambi i casi!
Di seguito è la mia classe HtmlExtensions, che ti permette di fare questo nel vostro masterpage:
<%=Html.RenderJScripts() %>
La mia classe HtmlExtensions:
public static class HtmlExtensions
{
private const string JSCRIPT_VIEWDATA = "__js";
#region Javascript Inclusions
public static void JScript(this HtmlHelper html, string scriptLocation)
{
html.JScript(scriptLocation, string.Empty);
}
public static void JScript(this HtmlHelper html, string scriptLocationDebug, string scriptLocationRelease)
{
if (string.IsNullOrEmpty(scriptLocationDebug))
throw new ArgumentNullException("fileName");
string jsTag = "<script type=\"text/javascript\" src=\"{0}\"></script>";
#if DEBUG
jsTag = string.Format(jsTag, scriptLocationDebug);
#else
jsTag = string.Format(jsTag, !string.IsNullOrEmpty(scriptLocationRelease) ? scriptLocationRelease : scriptLocationDebug);
#endif
registerJScript(html, jsTag);
}
public static MvcHtmlString RenderJScripts(this HtmlHelper html)
{
List<string> jscripts = html.ViewContext.TempData[JSCRIPT_VIEWDATA] as List<string>;
string result = string.Empty; ;
if(jscripts != null)
{
result = string.Join("\r\n", jscripts);
}
return MvcHtmlString.Create(result);
}
private static void registerJScript(HtmlHelper html, string jsTag)
{
List<string> jscripts = html.ViewContext.TempData[JSCRIPT_VIEWDATA] as List<string>;
if(jscripts == null) jscripts = new List<string>();
if(!jscripts.Contains(jsTag))
jscripts.Add(jsTag);
html.ViewContext.TempData[JSCRIPT_VIEWDATA] = jscripts;
}
#endregion
}
Che cosa sta succedendo?
La classe di cui sopra si estenderà la HtmlHelper con metodi per aggiungere link JavaScript ad una collezione che viene memorizzato dalla collezione HtmlHelper.ViewContext.TempData. Alla fine del masterpage metto la <%=Html.RenderJScripts() %> cui verrà ciclo la raccolta jscripts all'interno HtmlHelper.ViewContext.TempData e rendere questi all'uscita.
C'è un rovescio della medaglia però, .. È necessario garantire che non rendano gli script prima di aver aggiunto. Se ci si vuole fare questo per i collegamenti CSS, ad esempio, che non avrebbe funzionato, perché devi mettere questi nel tag <head> della pagina e il HtmlHelper renderebbe l'uscita ancor prima di aver aggiunto un collegamento.
Questa sembra una simile domanda (anche se non del tutto). E 'cattiva pratica per tornare viste parziali che contengono JavaScript?
La mia preferenza sarà quello di creare una pagina plugin.master che eredita dal Site.master principale. L'idea è che si roba questi plugin in plugin.master e apportare le 8 di pagine che utilizzeranno questa vista parziale ereditare da plugin.master.
L'approccio preferito è quello di mettere gli script in fondo , tuttavia, se non si può evitare che allora è ragionevole metterli in mezzo.
I browser di solito caricano i vari elementi della pagina in parallelo, tuttavia, mentre il browser sta scaricando il file Javascript, non sarà scaricare altri elementi della pagina in parallelo fino a quando il Javascript è fatto il download. Questo significa che le immagini e ciò che non dovranno attendere quindi è generalmente considerato meglio spostare gli script in fondo, ma se lo script è piccolo allora io non mi preoccuperei.
hejdig.
Giocare con Aspnetmvc3 ho deciso, per ora, a poco includere il mio file javascript nel parziale
Questa js file è quindi specifico per il mio file /user/List.schtml.
/ DI
I progettisti di MVC ha attraversato un sacco di problemi di impedirci di utilizzare il codice-sedere, ma creando un file denominato <> ViewName .aspx.cs e modificare l'attributo eredita della pagina aspx di conseguenza, è ancora possibile per farli.
direi, il posto migliore per mettere l'inclusione sarebbe nel gestore Page_Load nel codebehind (utilizzando Page.ClientScript.RegisterClientScriptInclude).
