Let’s start with the following configuration to give an example: in a MVC project, you have a “_Layout.vbhtml” file with this code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- some code here -->
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"> </script>
@RenderSection("Scripts", false)
</body>
</html>Then, you have a Partial View “ValidationScripts.vbhtml” in the Shared folder with
@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 SectionIf you call the Partial View from a View like this…
@ModelType MvcExample.MyModel
@Code
ViewData("Title") = "Test"
End Code
@Html.Partial("ValidationScripts")
<h2>Just a Test</h2>However the Section “Scripts” is not rendered on the page, and the output HTML will be…
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>
</body>
</html>Solution
To render the Section in the Partial View, you need to create a couple of Extension methods like this:
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());
}
}So, on any View or Partial View or Display/Edit Template you simply add what you need:
@{
Html.AddJavaScript("http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js");
}Then, in your Layouts you render it where you want it! Like this markup…
<!DOCTYPE html> <html lang="en"> <head> @Html.RenderStyles() @Html.RenderJavascripts()
Leave a Reply