The ScriptKeeper


You can install the ScriptKeeper with NuGet.


You can download the ScriptKeeper from Google Code.

I needed a way to register JavaScript files multiple times in an MVC action but have those files linked only once in the final page. I looked for a while and found an implementation by Telerik, but it was a little overkill for my needs (plus, they're open-source license doesn't allow proprietary use). So, I rolled my own.

Below is a description of the project in its early stage. The code is licensed under the MIT License and is hosted at Google Code.

ScriptKeeper keeps track of scripts.

It's an HtmlHelper extension method designed to allow a script to be registered multiple times during an MVC action. That script will be rendered only once in the final page.

It's most useful in partial views that require a JavaScript file that hasn't been linked in the parent view.

Imagine a partial view that declares a <div> for a model. That view requires some JavaScript file to add content to the <div>. But, the parent of that partial view doesn't know that the JavaScript file needs to be included. With ScriptKeeper, the solution is simple:

<% Html.ScriptKeeper().Local.Register("~/script/required/by/partialview.js"); %>
<div id="<%= Model.Id %>"></div>

And, in the parent view:

<% foreach (var item in Model) { %>
<% Html.RenderPartial("PartialView", item); %>
<% } %>
<%= Html.ScriptKeeper().Render() %>

Regardless of how many item are in Model, the partialview.js script will only appear once on the page:

<script type="text/javascript" src="/script/required/by/partialview.js"></script>

And there's more...

ScriptKeeper can also consolidate inline scripts in partial views. Imagine the previous <div> needs a JavaScript function call to get its content loaded. Something like this:

<script type="text/javascript">
loadContent('<%= Model.Id %>');
</script>

Each call to loadContent can be registered in the partial view:

<% Html.ScriptKeeper().Local.Register("~/script/required/by/partialview.js"); %>
<% Html.ScriptKeeper().Inline.Register("loadContent('" + Model.Id + "');"); %>
<div id="<%= Model.Id %>"></div>

and rendered at the bottom of the page:

<%= Html.ScriptKeeper().Render() %>

which produces:

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<!-- etc. -->
<script type="text/javascript" src="/script/required/by/partialview.js"></script>
<script type="text/javascript">
// <![CDATA[
loadContent('1');
loadContent('2');
loadContent('3');
// etc.
// ]]>
</script>

To use ScriptKeeper, include the namespace Keeper.OfScripts.Html in Web.config:

<namespaces>
<!-- Other included namespaces will appear here. -->
<!-- Include the Keeper.OfScripts.Html namespace to use ScriptKeeper. -->
<add namespace="Keeper.OfScripts.Html" />
</namespaces>

No comments for 'The ScriptKeeper'

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.

More information about formatting options

CAPTCHA
Please verify your species.