.Less Together with Razor

.LESS together with Razor

You should consider using Justin Etheredge's SquishIt library. Not only does it include the dotlesscss library, it will combine and minify your CSS and Javascript with ease!

• Blog post regarding SquishIt
• Source code on GitHub

Here's an example of how I use SquishIt in Razor.

The following code will combine, minify and LESSify all the CSS files referenced into one CSS file. It will do the same with the Javascript files.

@MvcHtmlString.Create(
  SquishIt.Framework.Bundle.Css()
    .Add("~/media/css/reset.css")
    .Add("~/media/css/style.less")
    .Add("~/media/css/handheld.css")
    .Render("~/media/css/combined_#.css"))

@MvcHtmlString.Create(
  SquishIt.Framework.Bundle.JavaScript()
    .Add("~/media/js/geo.js")
    .Add("~/media/js/jquery-1.4.4.js")
    .Add("~/media/js/jquery.unobtrusive-ajax.js")
    .Add("~/media/js/jquery.validate.js")
    .Add("~/media/js/jquery.validate.unobtrusive.js")
    .Render("~/media/js/combined_#.js"))

Output looks like this:

<link rel="stylesheet" type="text/css" href="/media/css/combined_312454.css" />
<script type="text/javascript" href="/media/js/combined_312454.js"></script>

UPDATE (Over 1 year later)...

Another project you might want to look at is Cassette which pretty much does everything SquishIt does (and more).

How to use css/less styles in RazorEngine template

Well, since no one could answer it, I used Premailer to move my .less files (or the .css generated out of it) inline. Works for me, even it's not exactly what I wanted.

string viewString = System.IO.File.ReadAllText(viewPath); // view to string
string cssSiteString = System.IO.File.ReadAllText(cssSitePath); // css-file to string

Engine.Razor.AddTemplate(nameoftemplate, viewString);
Engine.Razor.Compile(viewPath);

var result = Engine.Razor.Run(viewPath, null, model, viewBag);

var pm = new PreMailer.Net.PreMailer(result); 
var completeMail = pm.MoveCssInline(css: cssSiteString); // this line moves the css inline

Is it possible to serve HTML pages with ServiceStack?

Using only ServiceStack for web and web services

ServiceStack's new Razor View Engine support

A significant improvement to ServiceStack's HTML story was added in v3.9.11 in the ServiceStack.Razor NuGet package. With this support ServiceStack now graduates to a full Website and Web Services framework that offers a much simpler replacement to WCF, MVC and WebApi.

Full documentation explaining ServiceStack's new HTML story with Razor Support is maintained in the Razor Rockstars demo website:

• http://razor.servicestack.net - ASP.NET Host developed on Win hosted on Linux
• http://razor-console.servicestack.net - Stand-alone Self Host developed on Win hosted on Linux

Full Documentation explaining Razor support and describing its Features is explained in the links above.

Just a REST Service framework with HTML Format

The HTML Content-Type has been added to ServiceStack just as you would expect from a true REST Service framework, i.e. you can simply add Razor Views to enhance your existing services which will only get used when the client requests for the text/html Content-Type (with no effect on the existing registered formats). E.g. this /rockstars REST service can still be accessed in all the other Content-Types:

• HTML
• JSON
• XML
• CSV
• JSV

In addition if your services has the [ClientCanSwapTemplates] attribute, the client can swap the Views and Templates of pages at runtime, e.g. here's the same above page with:

• A Single Page AngularJS App with Client-side rendering
• A different SimpleLayout template
• AngularJS with SimpleLayout template

ServiceStack's natural adoption of the HTML format in this way, makes it trivial to develop 1 set of services that can serve both HTML and rich native mobile and desktop clients.

Other ways to serve HTML

Before Razor support was added there are a couple of strategies of serving HTML pages with ServiceStack:

Use a static html page with ajax calls

If you make a web request for an existing file, it gets returned with the Static File Handler. You can then simply make ajax json calls back to your web services to dynamically generate a page.

The TODO Backbone application in the Windows Service AppHost Starter Template works this way. (as well as most other example projects in ServiceStack :-)

Return a string

Any string returned from your web services gets directly written to the response stream 'as-is', so you can simply return html using your own html templating solution.

Here's a list of other possible return types in ServiceStack and how they're treated.

Using Markdown Razor

The view-engine built into ServiceStack is Markdown Razor - Which was inspired by MVC's Razor but using Markdown syntax. It's quite extensible supporting custom base class and extension methods/utils.

A nice feature of using Markdown Razor is your same web service that returns json,xml, etc can also be a view model for a dynamically generated html page at the same url.

An example of this is the category web service which you can see the results of here:
http://www.servicestack.net/docs/category/Framework

and the same service again in JSON, XML, etc. You can also retrieve the partially generated html page (without the template) as well the dynamically generated markdown.

The page was created using the web services DTO/view model which was sent to this MarkdownRazor View
https://raw.github.com/ServiceStack/ServiceStack.Examples/master/src/Docs/Views/Category.md

If you have specified a Markdown Razor page for your web service, it is used over the default HTML5 JSON Report that you see now.

The resolution order ServiceStack's uses to resolve the appropriate Markdown template to use for rendering HTML output is:

• If the Web Service specifies a template (via a customized IHttpResult.TemplateName response) - then a View with that name.
• A view with the same name as the Response DTO, looking first in /Views then in /Views/Shared
• A view with the same name as the Request DTO, looking first in /Views then in /Views/Shared

Host ServiceStack at a /custompath

ServiceStack can be used together with or without an existing ASP.NET web application. If your application is HTML-heavy and REST-Services-light a common approach is to host ServiceStack at a /custompath (e.g. /api) so you can use ASP.NET for all HTML page generation.

If using ASP.NET MVC instead, you need to ignore the route in MVC's Global.asax RegisterRoutes():

routes.IgnoreRoute ("servicestack/{*pathInfo}");

Can you open a view in asp.net MVC that does not have the view engine's extension?

You can try writing you own extension method for the HtmlHelper which reads in the .js files and concatenates them. But doing this per-request can be a bit costly.

A second choice is to use a tool like Chripy (chirpy.codeplex.com). This is a Visual Studio add-on (not a plugin, so it should work with Express editions). It is primarily meant for compiling .less files, but it can do a lot more. You can for example make a .chirp.config file that looks something like this:

<?xml version="1.0"?> 
<root>        
    <FileGroup Name="main.scripts.js"> 
        <Folder Path="/" Type="*.min.js" Minify="false"/> 
        <File Path="MicrosoftAjax.js" /> 
    </FileGroup> 
</root>

If you now put this in Scripts folder it will find all .min.js files and MicrosoftAjax.js file and add them together into main.scripts.js file. You would probably have to make it a bit more complex to handle all of your .js files, but at least they would be precompiled.

---

Related Topics