Using MVC optimization framework with ServiceStack.Razor

I have a small project running on ServiceStack (if you don't know
what ServiceStack is, I recommend you go and read up on
it!) which uses ServiceStack from top
to bottom (ServiceStack.Razor right the way down to
ServiceStack.OrmLite).

I ran into an issue where I wanted to use bundling and minification
support from Microsoft.AspNet.Web.Optimizations. I realise that
there is a
ServiceStack.Bundler project, but I am familiar with the MVC bundling and minification
framework and wanted to use that. I ran into a few problems with this so
thought I would share with people how they can achieve the same thing.

Download Microsoft.AspNet.Web.Optimizations from NuGet into
your project. This has two dependencies which will be brought along for the ride:
1. Microsoft.Web.Infrastructure
2. WebGrease

If you do not already have a BundleConfig class in your App_Start
folder then create one. The class should look something like this:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/css/core").Include(
            "~/Content/css/app/bootstrap/bootstrap.css", 
            "~/Content/css/app/site.css"));
    }
}

Make sure that the RegisterBundles method we just created is
called from you Global.asax

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        AppHost.Start();
    }
}

You will need to ensure that your pages know about
System.Web.Optimization, before you can reference the Styles and Scripts static classes to access your bundles.

<system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="ServiceStack.Razor.ViewPage">
        <namespaces>
            <add namespace="ServiceStack.Html" />
            <add namespace="ServiceStack.Razor" />
            <add namespace="ServiceStack.Text" />
            <add namespace="ServiceStack.OrmLite" />
            <add namespace="System.Web.Optimization"/>
        </namespaces>
    </pages>
</system.web.webPages.razor>

With all this in place, you should be able to start referencing the
bundles from your ServiceStack.Razor pages, like this:

<!doctype html>
<html>
    <head>
        <title>iSAMS Error Reporting</title>
        @Styles.Render("~/bundles/css/core")
    </head>
....

This however did not work and ended up rendering the style tag out
html encoded. This meant that the styles were not applied to the markup and the link tag was actually rendered to screen. I resolved this issue, by using the ServiceStack.Text static method AsRaw() to make sure the output was not HTML encoded.
```
<!doctype html>
<html>
    <head>
        <title>iSAMS Error Reporting</title>
        @Styles.Render("~/bundles/css/core").AsRaw()
    </head>
....
```

This now works as expected.

If someone else knows a better way of doing this, please do let me know.

Menu