在部分视图中包含JavaScript文件

我想知道什么是在部分视图中包含JavaScript文件的最佳做法。 一旦呈现这将最终作为一个JS包括在我的网页的HTML中间标记。 从我的观点来看,这不是一个很好的做法。 他们属于头标,因此不应该阻止浏览器一次呈现HTML。

一个例子:我在'PictureGallery'部分视图内使用jquery picturegallery插件,因为这个部分视图将在几个页面上使用。 这个插件只需要在使用这个视图的时候加载,而且我不想知道每个部分视图正在使用哪个插件。

感谢您的回答。

看起来与这个问题非常相似: 在用户控件中链接JavaScript库

我会在这里重新发布我的答案。

我肯定会build议不要因为你提到的原因而将它们放在partials中。 一个视图可能牵扯到两个都引用同一个js文件的部分的可能性很高。 在加载其余的html之前,您还有加载js的性能问题。

我不知道最佳做法,但我select在主页面中包含任何常见的js文件,然后为一些特定或less量视图特定的其他js文件定义单独的ContentPlaceHolder。

这里有一个示例母版页 – 这是很自我解释。

<%@ 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显然是我自己的扩展,但是它们在做什么时又是自我解释的。

然后说一个SignUp.aspx视图,我会

 <asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server"> <%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %> </asp:Content> 

查尔斯HTHs

PS。 这里是我问及关于缩小和连接js文件的后续问题: 在构build时连续&缩小JS或在构build时 – ASP.NET MVC

编辑:根据我的其他答案的要求,我按照要求实施.JSBlock(a,b)

 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); } 

然后魔术发生在哪里

  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); } 

您将脚本放在页面底部的原因是为了确保在尝试任何操作之前已经加载了dom。 这也可以通过$(document).ready(callback)来实现。 jQuery方法。

我分享了不把embedded式JavaScript放入html中的观点。 相反,我使用一个Html帮助器来创build一个空div来用作服务器指令。 helper sig是Html.ServerData(String name,Object data);

我使用此ServerData方法从服务器到客户端的指示。 div标签保持干净,“data-”属性是有效的html5。

对于loadScript指令,我可以在ascx或aspx中做这样的事情:

 <%= Html.ServerData(“loadScript”,new {url:“pathTo.js”})%>

或者添加另一个助手来做这看起来更清洁:

  <%= Html.LoadScript(“〜/ path / to.js”)%> 

html的输出是:

  <div name =“loadScript”data-server =“encoded json string”> 

然后我有一个可以find任何服务器数据标签的jQuery方法:$(containsElement).serverData(“loadScript”); //返回解码的json对象的数组。

客户可能看起来像这样:

 var script = $(containsingelement“)。serverData(”loadScript“);
 $ .getScript(script.url,function(){
     / /脚本已经加载 - 现在可以做的东西
 });

这种技术非常适合用户控件或需要在加载Ajax的内容中加载的脚本。 我写的版本更加涉及处理caching脚本,因此每个整页加载只加载一次,并包含callback函数和jQuery触发器,以便您可以在准备就绪时进行调用。

如果有人对这个完整版本感兴趣(从MVC到jQuery扩展),我会很高兴地展示这个技术的更多细节。 否则 – 希望它给人一种接近这个棘手问题的新方法。

今天,我已经创build了自己的解决scheme,完全符合法案。 不pipe是不是好的devise,都是为了你们所有的决定,但是我认为我应该分享!

下面是我的HtmlExtensions类,它允许你在你的主页面上做到这一点:

 <%=Html.RenderJScripts() %> 

我的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 } 

到底是怎么回事?
上面的类将扩展HtmlHelper的方法来添加JavaScript链接到由HtmlHelper.ViewContext.TempData集合存储的集合。 在<%=Html.RenderJScripts() %>的末尾,我放置了<%=Html.RenderJScripts() %> ,它将HtmlHelper.ViewContext.TempData的jscripts集合循环并将其呈现给输出。

然而,有一个缺点,你必须确保在添加脚本之前不要渲染脚本。 如果你想这样做的CSS链接例如,它不会工作,因为你必须把这些放在你的网页的<head>标记和htmlhelper将呈现输出之前,你甚至添加了一个链接。

这似乎是一个类似的(虽然不是完全)的问题。 返回包含javascript的部分视图是不好的做法?

我的首选是创build一个从您的主Site.masterinheritance的plugin.master页面。 这个想法是,你把这些插件插入到plugin.master,并使8个左右的页面,将使用这个部分视图从plugin.masterinheritance。

首选的方法是把脚本放在底部 ,但是,如果你不能避免,那么把它放在中间是合理的。

浏览器通常并行地加载各种页面元素,但是,当浏览器正在下载Javascript文件时,它不会并行地下载任何其他页面元素,直到Javascript完成下载。 这意味着你的图片以及不需要等待的东西,所以通常认为在底部移动脚本会更好,但是如果脚本很小,我不会担心。

hejdig。

玩Aspnetmvc3我决定,现在,只包括我的JavaScript文件的部分

<script src =“@ Url.Content(”〜/ Scripts / User / List.js“)”type =“text / javascript”> </ script>

这个js文件是特定于我的/user/List.schtml文件。

/的

MVC的devise者经历了很多麻烦,以防止我们使用代码隐藏,但是通过创build一个名为<viewname> .aspx.cs的文件并相应地修改aspx页面的inherits属性,仍然有可能获得它们。

我想说,放置include的最佳位置是在代码隐藏的Page_Load处理程序中(使用Page.ClientScript.RegisterClientScriptInclude)。