#Content Injector support for Web Optimization Framework
Extends Content Injector for ASP.NET MVC with support for the bundling features of Microsoft's Web Optimization Framework.
Content Injector improves the Web Optimization Framework in several ways:
- Allows script and style sheet files to be injected anywhere in the page. You just add @Injector.InjectionPoint("ScriptFiles") and @Injector.InjectionPoint("StyleFiles") where you want all of these files to appear. (Usually they appear in the <head> tag, although its also common to place script files at the end of the HTML.)
- A View or HTML Helper can inject its own script and style sheet files and know they will appear with all other script or style sheet files.
- Duplicate requests for a file will be omitted. This is especially useful for HTML Helpers which will register the files they need with each usage.
- Since the file list is not processed until all requests have been registered, ContentInjector can order them to ensure dependencies appear earlier.
- Content Injector for ASP.NET MVC, available through NuGet or here.
- Web Optimization Framework 1.0, available through NuGet or here.
This library extends the Injection Points for "ScriptFiles" and "StyleFiles" within ContentInjector. Normally when working with Web Optimization Framework, you add @Scripts.Render("bundle name") and @Styles.Render("bundle name") into your View to have those bundles converted into HTML.
When using Content Injector, add Injector.ScriptBundle("bundle name") and Injector.StyleBundle("bundle name") into your View like this:
@{
Injector.ScriptBundle("~/Scripts/jquery");
Injector.StyleBundle("~/Content/css");
}
You can also add a string array containing multiple bundle names like this:
@{
Injector.ScriptBundle(new string[] {"~/Scripts/jquery", "~/Scripts/Modernizer"});
}
A typical master page looks like this:
@{
Injector.ScriptBundle("~/Scripts/jquery");
Injector.ScriptBundle("~/Scripts/modernizr");
Injector.StyleBundle("~/Content/css";
}
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
@Injector.InjectionPoint("MetaTag")
@Injector.InjectionPoint("StyleFiles")
@Injector.InjectionPoint("ScriptFiles")
</head>
<body>
@Injector.InjectionPoint("ScriptBlocks", "Upper")
@RenderBody()
@Injector.InjectionPoint("ScriptBlocks", "Lower")
</body>
</html>
Only the ScriptFiles and StyleFiles Injection Points are impacted by this extension. The remaining Injection Points are managed by the default features of Content Injector for ASP.NET MVC.
- Install this library using NuGet or add its assembly from here.
- If you did not install using NuGet, also add Content Injector and Web Optimization Framework.
- Configure the Bundles features of Web Optimization Framework. Please refer to the documentation for that product. This work is done in code that is run during application start and is typically found in a file called BundleConfig.cs.
- When you a View or Html Helper needs a script bundle, it should use
@ { Injector.ScriptBundle("bundle name"); } - When you a View or Html Helper needs a style bundle, it should use
@ { Injector.StyleBundle("bundle name"); }