Scripts Section in ASP.Net Core Partial View

In a recent MVC project I wanted to create a set of widgets to be reused across different pages. I wanted them to be created as a partial view, and be self contained with links to associated JavaScript files. The JavaScipt should be contained in the script section in the partial view, so it is rendered at the bottom of the page. The problem is that MVC does not support the script section in a partial view, for example you can do the following in standard view but not a partial view:

@section scripts {
//Your script here
}

I found a solution for ASP MVC  on John Burnham’ blog, but it needed some tweaking to work in ASP.Net Core

First up is to create a couple of HTML helper functions. In summary the first one will add the scripts to the HttpContext.Items, and the second one will render the scripts from the HtppContext.Items:

public static class HtmlHelperExtensions
{
	///
<summary>
	/// Adds a partial view script to the Http context to be rendered in the parent view
	/// </summary>

	public static IHtmlHelper Script(this IHtmlHelper htmlHelper, Func template)
	{
		htmlHelper.ViewContext.HttpContext.Items["_script_" + Guid.NewGuid()] = template;
		return null;
	}
	///
<summary>
	/// Renders any scripts used within the partial views
	/// </summary>

	/// 
	public static IHtmlHelper RenderPartialViewScripts(this IHtmlHelper htmlHelper)
	{
		foreach (object key in htmlHelper.ViewContext.HttpContext.Items.Keys)
		{
			if (key.ToString().StartsWith("_script_"))
			{
				var template = htmlHelper.ViewContext.HttpContext.Items[key] as Func;
				if (template != null)
				{
					htmlHelper.ViewContext.Writer.Write(template(null));
				}
			}
		}
		return null;
	}
}

In your partial view add the scripts by wrapping them in the following section:

@Html.Script(
//Your script here
)
And then in you layout view, you render the script with the following:
@Html.RenderPartialViewScripts()

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s