Inline styles and scripts

There may be times where you need to render the styles or scripts directly on the page rather than referencing them in separate files.

This post shows you how you can combine bundling and minification with inline styles and scripts in MVC.

Show me the code

using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Text;
namespace CodeShare.Web.Helpers {     public static class HtmlBundleExtensions     {
        /// <summary>         /// Returns the content of a style bundle in one style block         /// </summary>         /// <param name="htmlHelper">Extension for HtmlHelper</param>         /// <param name="paths">String array of bundle paths</param>         /// <returns>HtmlString with all css bundle contents in one style block</returns>         public static IHtmlString InlineStyles(this HtmlHelper htmlHelper, params string[] bundlePaths)         {             StringBuilder bundleContent = new StringBuilder();             foreach (string path in bundlePaths)             {                 bundleContent.Append(GetBundleContent(htmlHelper.ViewContext.HttpContext, path));             }             return new HtmlString(string.Format("<style>{0}</style>", bundleContent.ToString()));         }
        /// <summary>         /// Returns the contents of script bundles as individual script blocks         /// </summary>         /// <param name="htmlHelper">Extension for HtmlHelper</param>         /// <param name="paths">String array of bundle paths</param>         /// <returns>HtmlString with a script block for each script bundle path passed in.</returns>         public static IHtmlString InlineScripts(this HtmlHelper htmlHelper, params string[] bundlePaths)         {             StringBuilder bundleContent = new StringBuilder();             foreach (string path in bundlePaths)             {                 bundleContent.Append(string.Format("<script>{0}</script>", GetBundleContent(htmlHelper.ViewContext.HttpContext, path)));             }             return new HtmlString(bundleContent.ToString());         }
        /// <summary>         /// Gets the content of a bundle         /// </summary>         /// <param name="httpContext">The HttpContext</param>         /// <param name="bundleVirtualPath">Path of the bundle</param>         /// <returns>String containing the contents of the bundle</returns>         private static string GetBundleContent(HttpContextBase httpContext, string bundleVirtualPath)         {             return BundleTable.Bundles                 .Single(b => b.Path == bundleVirtualPath)                 .GenerateBundleResponse(new BundleContext(httpContext, BundleTable.Bundles, bundleVirtualPath))                 .Content;         }     } }

Using the code

Styles

@Html.InlineStyles("~/bundles/style","~/bundles/font-awesome-css")

Scripts

@Html.InlineScripts("~/bundles/sitescripts","~/bundles/forms","~/bundles/common")

What it looks like in the page

Styles

<style>/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{margin:.67em 0;font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{height:0;-moz-box-sizing:content-box;box-sizing:content-box}mark{color:#000;background:#ff0}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid #c0c0c0}legend{padding:0;border:0}button,input,select,textarea{margin:0;font-family:inherit;font-size:100%}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{padding:0;box-sizing:border-box}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@media print{*{color:#000!important;text-shadow:none!important;background:transparent!important;box-shadow:none!important}a,a:visited{text-decoration:underline}</style>

Scripts

<script>blahblahblah1;if(function(n,t){function gt(n){var t=n.length,r=i.type(n);return i.isWindow(n)?!1:1===n.nodeType&&t?!0:"array"===r||"function"!==r&&(0===t||"number"==typeof t&&t>0&&t-1 in n)}function te(n){var t=ni[n]={};return i.each(n.match(s)||[],function(n,i){t[i]=!0}),t}function ur(n,r,u,f){if(i.acceptData(n)){var h,o,c=i.expando,l=n.nodeType,s=l?i.cache:n,e=l?n[c]:n[c]&&c;if(e&&s[e]&&(f||s[e].data)||u!==t||"string"!=typeof r)return e||(e=l?n[c]=b.pop()||i.guid++:c),s[e]||(s[e]=l?{}:{toJSON:i.noop}),("object"==typeof r||"function"==typeof r)&&(f?s[e]=i.extend(s[e],r):s[e].data=i.extend(s[e].data,r)),o=s[e],f||(o.data||(o.data={}),o=o.data),u!==t&&(o[i.camelCase(r)]=u),"string"==typeof r?(h=o[r],null==h&&(h=o[i.camelCase(r)])):h=o,h}}</script>
<script>blahblahblah2if(function(n,t){function gt(n){var t=n.length,r=i.type(n);return i.isWindow(n)?!1:1===n.nodeType&&t?!0:"array"===r||"function"!==r&&(0===t||"number"==typeof t&&t>0&&t-1 in n)}function te(n){var t=ni[n]={};return i.each(n.match(s)||[],function(n,i){t[i]=!0}),t}function ur(n,r,u,f){if(i.acceptData(n)){var h,o,c=i.expando,l=n.nodeType,s=l?i.cache:n,e=l?n[c]:n[c]&&c;if(e&&s[e]&&(f||s[e].data)||u!==t||"string"!=typeof r)return e||(e=l?n[c]=b.pop()||i.guid++:c),s[e]||(s[e]=l?{}:{toJSON:i.noop}),("object"==typeof r||"function"==typeof r)&&(f?s[e]=i.extend(s[e],r):s[e].data=i.extend(s[e].data,r)),o=s[e],f||(o.data||(o.data={}),o=o.data),u!==t&&(o[i.camelCase(r)]=u),"string"==typeof r?(h=o[r],null==h&&(h=o[i.camelCase(r)])):h=o,h}}</script>
<script>blahblahblah3;if(function(n,t){function gt(n){var t=n.length,r=i.type(n);return i.isWindow(n)?!1:1===n.nodeType&&t?!0:"array"===r||"function"!==r&&(0===t||"number"==typeof t&&t>0&&t-1 in n)}function te(n){var t=ni[n]={};return i.each(n.match(s)||[],function(n,i){t[i]=!0}),t}function ur(n,r,u,f){if(i.acceptData(n)){var h,o,c=i.expando,l=n.nodeType,s=l?i.cache:n,e=l?n[c]:n[c]&&c;if(e&&s[e]&&(f||s[e].data)||u!==t||"string"!=typeof r)return e||(e=l?n[c]=b.pop()||i.guid++:c),s[e]||(s[e]=l?{}:{toJSON:i.noop}),("object"==typeof r||"function"==typeof r)&&(f?s[e]=i.extend(s[e],r):s[e].data=i.extend(s[e].data,r)),o=s[e],f||(o.data||(o.data={}),o=o.data),u!==t&&(o[i.camelCase(r)]=u),"string"==typeof r?(h=o[r],null==h&&(h=o[i.camelCase(r)])):h=o,h}}</script>

That's it

If you need help with setting up bundling and minification, see my other post.

Thanks to Marius for inspiration for this code by reading his post here.

Want to thank me?

If I've helped you out and you want to thank me, why not buy me a coffee?

Paul Seal

A .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Web: codeshare.co.uk

Comments

Share Top