Inclure fichier JavaScript dans une vue partielle
https://stackoverflow.com/questions/912755
-
06-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je me demande quelle est la meilleure pratique pour inclure des fichiers JavaScript dans une vue partielle. Une fois rendu cela finira comme js balise Include au milieu du html de ma page. De mon point de vue, ce n'est pas une bonne façon de le faire. Ils appartiennent à l'étiquette de tête et en tant que telle ne devrait pas empêcher le navigateur de rendre le code HTML en une seule fois.
Un exemple: J'utilise un plugin picturegallery jquery l'intérieur d'une vue partielle « picturegallery » que cette vue partielle sera utilisé sur plusieurs pages. Ce plugin ne doit être chargé lorsque ce point de vue est utilisé et Je ne veux pas avoir besoin de savoir quels plug-ins chaque vue partielle utilise ...
Merci pour vos réponses.
La solution
semble très similaire à cette question: Lier bibliothèques JavaScript dans les contrôles de l'utilisateur
Je reposte ma réponse que cette question ici.
Je déconseille clairement de les mettre à l'intérieur pour partials exactement la raison pour laquelle vous mentionnez. Il y a une forte chance que l'on pourrait tirer vue en deux que les deux ont partials références au même fichier js. Vous avez également la baisse de performance de chargement js avant de charger le reste du html.
Je ne sais pas sur les meilleures pratiques, mais je choisis d'inclure tous les fichiers js communs à l'intérieur du masterpage puis définir une ContentPlaceHolder distincte pour certains fichiers js supplémentaires qui sont spécifiques à un nombre particulier ou faible de vues.
Voici un exemple page maître - il est assez explicite
.<%@ 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 sont évidemment mes propres extensions mais encore une fois, ils sont explicites dans ce qu'ils font.
Puis, en dire une vue SignUp.aspx j'aurais
<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. Voici une question de suivi je leur ai demandé minifying et concaténer fichiers js: Concatenate & Minify JS sur la mouche ou à la compilation - ASP.NET MVC
EDIT: Comme l'a demandé à mon autre réponse, ma mise en œuvre de .JSBlock (a, b) comme demandé
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);
}
Et puis où la magie se produit ...
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);
}
Autres conseils
La raison pour laquelle vous mettriez un script au bas de la page est d'assurer le Royaume a été chargé avant de tenter toute manipulation. Cela peut aussi être réalisé quelque chose comme $ (document) .ready (rappel); Procédé jQuery.
Je partage l'opinion de ne pas mettre JavaScript intégré dans le code HTML. Au lieu de cela j'utilise un aide Html pour créer un div vide à utiliser comme une instruction du serveur. Le sig aide est Html.ServerData (String name, les données d'objets);
J'utilise cette méthode pour ServerData instructions du serveur au client. La balise div maintient propre et l'attribut « Data- » est valide html5.
Pour l'instruction loadScript je peux faire quelque chose comme ça dans mon ascx ou ASPX:
<%= Html.ServerData("loadScript", new { url: "pathTo.js" }) %>
Ou ajouter une autre aide à faire ce qui ressemble un peu plus propre:
<%= Html.LoadScript("~/path/to.js") %>
La sortie html serait:
<div name="loadScript" data-server="encoded json string">
J'ai une méthode jQuery qui peut trouver une étiquette de données du serveur: $ (ContainingElement) .serverData ( "loadScript"); // retourne un jQuery comme tableau des objets JSON décodées.
Le client peut ressembler à ceci:
var script = $(containingelement").serverData("loadScript");
$.getScript(script.url, function () {
// script has been loaded - can do stuff with it now
});
Cette technique est idéale pour les contrôles utilisateur ou des scripts qui doivent être chargés dans le contenu chargé ajax. La version que j'ai écrit est un peu des scripts de mise en cache de manipulation plus impliqués afin qu'ils se chargent qu'une seule fois par pleine charge page et contiennent callbacks et jQuery déclenche de sorte que vous pouvez brancher dedans quand il est prêt.
Si quelqu'un est intéressé par la version complète de ce (de MVC à l'extension jQuery) Je serais heureux de montrer cette technique plus en détail. Dans le cas contraire -. Espère que cela donne à quelqu'un une nouvelle façon d'aborder ce problème délicat
Aujourd'hui, j'ai créé ma propre solution qui répond parfaitement. Que ce soit une bonne conception ou non, est pour vous tous de décider, mais pensé que je devrais partager de toute façon!
Voici ma classe HtmlExtensions qui vous permet de le faire dans votre masterpage:
<%=Html.RenderJScripts() %>
Ma 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
}
Qu'est-ce qui se passe?
La classe ci-dessus prolongera la HtmlHelper avec des méthodes pour ajouter des liens javascript à une collection qui est stockée par la collection HtmlHelper.ViewContext.TempData. A la fin de la masterpage je mets la <%=Html.RenderJScripts() %> qui bouclera la collection jscripts à l'intérieur du HtmlHelper.ViewContext.TempData et de rendre ceux-ci à la sortie.
Il y a un inconvénient cependant, .. Vous devez vous assurer que vous ne rend pas les scripts avant de les avez ajoutés. Si vous voulez faire cela pour des liens css par exemple, cela ne fonctionnerait pas parce que vous devez placer dans la balise <head> de votre page et la HtmlHelper rendrait la sortie avant même d'avoir ajouté un lien.
Cela semble être une question similaire (bien que pas tout à fait). Est-ce une mauvaise pratique pour revenir une vue partielle qui contiennent javascript?
Ma préférence sera de créer une page plugin.master qui hérite de votre Site.master principal. L'idée est que vous farcir ces plugins dans plugin.master et faire 8 ou de pages qui utiliseront cette vue partielle d'hériter de plugin.master.
L'approche privilégiée est mettre des scripts au bas , cependant, si vous ne pouvez pas éviter que, alors il est raisonnable de les mettre au milieu.
Les navigateurs chargent généralement les différents éléments de la page en parallèle, cependant, alors que le navigateur télécharge le fichier Javascript, il ne sera pas télécharger d'autres éléments de la page en parallèle jusqu'à ce que le Javascript téléchargement terminé. Cela signifie que vos images et ce qui ne devront attendre donc il est généralement considéré comme préférable de déplacer des scripts en bas, mais si votre script est petite alors je ne vous inquiétez pas.
hejdig.
Jouer avec Aspnetmvc3 j'ai décidé, pour l'instant, d'inclure juste mon fichier javascript dans la partie
Ce fichier js est alors spécifique pour mon fichier /user/List.schtml.
/ OF
Les concepteurs de MVC sont passés par beaucoup de mal pour nous empêcher d'utiliser le code autotractées, mais en créant un fichier nommé
Je dirais que le meilleur endroit pour mettre l'inclure serait dans le gestionnaire Page_Load dans le code-behind (en utilisant Page.ClientScript.RegisterClientScriptInclude).
