在MVC3项目中,我有一个带有此代码的“_Layout.vbhtml”文件
- <!DOCTYPE html>
- <html>
- <head>
- </head>
- <body>
- ...
- <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>
- @RenderSection("Scripts",false)
- </body>
- </html>
然后,我在共享文件夹中有一个部分视图“ValidationScripts.vbhtml”
- @Section Scripts
- <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
- <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
- <script src="@Url.Content("~/Scripts/jquery.validate.fix.js")"></script>
- <script src="@Url.Content("~/Scripts/localization/messages_de.js")"></script>
- End Section
如果我从这样的视图中调用部分视图…
- @ModelType MvcExample.MyModel
- @Code
- ViewData("Title") = "Test"
- End Code
- @Html.Partial("ValidationScripts")
- <h2>Just a Test</h2>
- ...
- <!DOCTYPE html>
- <html>
- <head>
- </head>
- <body>
- ...
- <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>
- </body>
- </html>
如何在局部视图中渲染剖面?
解决方法
我在重复的脚本之上有同样的问题,所以我创建了几个Extension方法:
- public static class HtmlHelperExtensions
- {
- private const string _jSViewDataname = "RenderJavaScript";
- private const string _styleViewDataname = "RenderStyle";
- public static void AddJavaScript(this HtmlHelper htmlHelper,string scriptURL)
- {
- List<string> scriptList = htmlHelper.ViewContext.HttpContext
- .Items[HtmlHelperExtensions._jSViewDataname] as List<string>;
- if (scriptList != null)
- {
- if (!scriptList.Contains(scriptURL))
- {
- scriptList.Add(scriptURL);
- }
- }
- else
- {
- scriptList = new List<string>();
- scriptList.Add(scriptURL);
- htmlHelper.ViewContext.HttpContext
- .Items.Add(HtmlHelperExtensions._jSViewDataname,scriptList);
- }
- }
- public static MvcHtmlString RenderJavaScripts(this HtmlHelper HtmlHelper)
- {
- StringBuilder result = new StringBuilder();
- List<string> scriptList = HtmlHelper.ViewContext.HttpContext
- .Items[HtmlHelperExtensions._jSViewDataname] as List<string>;
- if (scriptList != null)
- {
- foreach (string script in scriptList)
- {
- result.AppendLine(string.Format(
- "<script type=\"text/javascript\" src=\"{0}\"></script>",script));
- }
- }
- return MvcHtmlString.Create(result.ToString());
- }
- public static void AddStyle(this HtmlHelper htmlHelper,string styleURL)
- {
- List<string> styleList = htmlHelper.ViewContext.HttpContext
- .Items[HtmlHelperExtensions._styleViewDataname] as List<string>;
- if (styleList != null)
- {
- if (!styleList.Contains(styleURL))
- {
- styleList.Add(styleURL);
- }
- }
- else
- {
- styleList = new List<string>();
- styleList.Add(styleURL);
- htmlHelper.ViewContext.HttpContext
- .Items.Add(HtmlHelperExtensions._styleViewDataname,styleList);
- }
- }
- public static MvcHtmlString RenderStyles(this HtmlHelper htmlHelper)
- {
- StringBuilder result = new StringBuilder();
- List<string> styleList = htmlHelper.ViewContext.HttpContext
- .Items[HtmlHelperExtensions._styleViewDataname] as List<string>;
- if (styleList != null)
- {
- foreach (string script in styleList)
- {
- result.AppendLine(string.Format(
- "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />",script));
- }
- }
- return MvcHtmlString.Create(result.ToString());
- }
- }
在任何视图或部分视图或显示/编辑模板上,您只需添加所需内容:
- @{
- Html.AddJavaScript("http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js");
- }
在您的布局中,您可以将其渲染到您想要的位置:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- @Html.RenderStyles()
- @Html.RenderJavascripts()
您可能遇到的唯一问题是如果复杂化,脚本的呈现顺序。如果这成为一个问题,只需将脚本添加到视图/模板的底部,然后在呈现它们之前简单地颠倒扩展方法中的顺序。