在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()
您可能遇到的唯一问题是如果复杂化,脚本的呈现顺序。如果这成为一个问题,只需将脚本添加到视图/模板的底部,然后在呈现它们之前简单地颠倒扩展方法中的顺序。