Introduction
After speaking with Ben Scheirman and Javier Lozano on DotNetRadio.com I have to admit that I was more than a little curious about the Spark View Engine. I have heard quite a bit about it. But when people of that caliber make statements such as "the Spark View Engine should be the default view engine out of the box" one has to sit up and take notice. So I immediately went looking for a single source of information on how to integrate the Spark View Engine into a standard ASP.NET MVC 2 application. I searched and searched and found all sorts of different examples. One that said here is how it works and I found out that it left out a lot of the details so much so that the example didn't work. I found another article that demonstrated what a fully converted ASP.NET MVC 2 Spark application would look like but no details were provided as to how to get there. For that reason I figured I would write a quick article on the process of plugging in the Spark View Engine and then take it for a whirl to see how the basic concepts are implemented in that view engine.
Why the Spark View Engine?
One of the major pushes to have ASP.NET MVC over ASP.NET Web Forms is to get control over your HTML again. We all know that the ASP.NET WebForms can generate some pretty ugly code. There are of course a lot of other things that it just doesn't get right...but we will stick to the getting control over your HTML argument for now! The idea behind the Spark View Engine is to get even more control over your HTML, even more so than the view engine that comes out of the box with ASP.NET MVC. With the Spark View Engine the goal is for the HTML to be the majority in your view and for the code to integrate into that HTML seamlessly.
To achieve this goal you will often see very normal html with some very abnormal attributes mixed in. Take this example of an unordered list on the first page of the Spark Documentation.
Here you can see that the list item has an each attribute. And inside that each attribute you will find a lambda expression that says for each p in product...render some output. Not too bad when you compare the same code in the ASP.NET MVC view engine which ultimately will be littered with <% this and %> that. All the <% reminds me of ASP Classic days!
What is needed to install and configured the Spark View Engine?
The first most important thing to do is to download the SparkViewEngine binaries. This can be done by visiting sparkviewengine.codeplex.com and navigating to the downloads section.
I am downloading that and putting into a trunk/dependencies. I then extract the files into trunk/dependencies/SparkViewEngine.
Next I am going to create a new ASP.NET MVC project (I am using MVC 2 Preview 2, but the steps should be the same across versions of MVC). I place the new project into the trunk/source/ directory and named the project SparkViewWeb (which will create a trunk/source/SparkViewWeb folder for you). I chose not to add a test project for this demo.
Then I immediately add a reference to the spark view engine. Do this by right clicking on the project and selecting add reference. Then browse over to your dependencies directory. And then locate the SparkViewEngine/Bin/Spark.dll and Spark.Web.Mvc.dll.
Then open up your Global.asax file. Add these lines just inside your Application_Start() method to create an instance of the SparkViewFactory.
Then we will need to add the PrecompileViews() method. This method does just as it is named and precompiles the views prior to the application doing anything else.
As you add additional view directories you will need to come in here to add additional batch statements. There are several other ways to handle precompilation of the Spark views which you can read more about here: http://sparkviewengine.com/documentation/precompiling
Also make sure you add a reference to Spark.Web.Mvc at the top of the Global.asax file. (If you have resharper installed this is done for you so I may forget to mention this along the way).
At this point the SparkViewEngine is installed. You should be able to run your web application and see the standard ASP.NET MVC application template that is installed by default.
Converting the ASP.NET MVC template to the Spark View Engine
Now that we have the SparkViewEngine installed we need to start converting sections of the site to use Spark. One problem to discuss and therefore tackle up front is the use of Master Pages. The MVC template uses the Master Page concept which means that in order for us to be able to take advantage of a Master Page concept we will first need to create a so-called Master Page in Spark. Know that the Master Page concept does not exist in other MVC style frameworks. This concept is an ASP.NET idea only. No worries, Spark handles it quite well.
Given that the Master Page is used by all views in the default ASP.NET MVC site we will need to get this concept converted to work in the Spark paradigm. However, in the same way that views are dependent on the Master Page, the Master Page is dependent on some user controls. Namely it is dependent on the LogOnUserControl.ascx. So in order to conver the Master Page to Spark, we will first need to convert its dependencies. We will start with the LogOnUserControl.ascx for this reason. But first let's see what our current LogOnUserControl.ascx looks like.
To create a user control in the Spark world we simply need to create a new .Spark file. We will create a duplicate of all of our files in the same place side by side with all of the current web sites files so that we can easily see how to do an in-place conversion. For that rason create a new .Spark file in the Views/Shared directory and name it _LogOnUserControl.spark. Then enter this code into that file.
As you can see the concepts are very much the same here from a logical point of view. All that has really changed is its presentation which I think you will agree is considerably cleaner than the previous code. Also notice that the Html.ActionLink code continues to work as you are used too.
Now we are able to take a look at how to create a Master Page. A Master Page can take a few forms in Spark. You can create an all mighty Master Page by creating a file called Application.spark. This will be the default layout for all views. However, if you want you can have other Master Pages as well. We will deal with the default layout page by creating an Application.spark file next to our Site.Master file. This file will largely look and feel just like the Site.Master file with the exception that it will be lighter and less code oriented. Let's have a look at our current Site.Master file and then we can take a look at the contents of the Application.spark file.
There really isn't too much code mixed in there...but enough that it sort starts to hurt the eyes looking at it. Let's take a look at the Application.spark which will do exactly the same thing as our Site.Master. Then I will explain all the bits and pieces.
The first thing to notice is the <use content="title">Default title</use> node. This is the same as a ContentPlaceHolder for .NET. However, it doesn't need the all the noise attributes around it and it specifies a default title for all pages that don't specify one themselves. If you continue to scan through this you will next see a <LogOnUserControl /> Again, this is more consise and to the point and technically gets the exact same job completed. Scan some more and you will see in the unordered list entitled "menu" a set of .NET looking Html.ActionLink calls. Instead of <%= you use !{. This is a bit shorter but also not as in your face (in my opinion that is). Otherwise the call to Html.ActionLink is exactly the same. The last thing you will see is another <use tag that specifies the where the MainContent goes.
Now that we have the Application.spark defined and we have our user control for logging in we need to create a view that actually takes advantage of this. We need a Spark view. Let's take a look at converting the About.aspx view into an About.spark view (not going to look at the original as you should see the differences by now!). To do this go ahead and delete the About.aspx file and create an empty text file in its place called About.spark. Then enter this text into the About.spark file.
There is just one other step that we need to take to finish wiring everything up. We need to create a _global.spark file which will delcare the usage of several key namespaces that are used across the Spark View Engine and our application. This _global.spark file is automatically included into every view. Creating a _global.spark is pretty easy. It is simply another .spark file like any other. Go ahead and create it in the Views/Shared folder and name it _global.spark Then inside that file add these lines to ensure that these namespaces are always included.
Summary
There is quite a bit out there on using the Spark View Engine. However I didn't quickly find an article that detailed taking an existing ASP.NET MVC 2 application as it is out of the wizards box and plugging in the Spark View Engine. That is exactly what this article covered. We started with an out of the box ASP.NET MVC 2 web application and walk through step by step what is involved in plugging in all the Spark View Engine bits and getting it working. Most importantly we demonstrated running the webforms view engine right next to the Spark View Engine.
About Andrew Siemer
 |
I am a 33 year old, ex-Army Ranger, father of 6, geeky software engineer that loves to code, teach, and write. In my spare time (ha!) I like playing with my 6 kids, horses, and various other animals.
This author has published 24 articles on DotNetSlackers. View other articles or the complete profile here.
|
You might also be interested in the following related blog posts
ASP.NET MVC: DevExpress Mail Demo
read more
Bind InfoPath form to XML, Tables, SharePoint Lists & Web Services
read more
Export Word documents to XPS - Open XML Paper Specification format
read more
Create or Manage XPDL 1.0 & 2.1 packages using Aspose.Workflow
read more
Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 25: ViewModel
read more
Application Identifiers (AI) for EAN-128 barcode generation
read more
Adding Syntactic Sugar to the Spark View Engine
read more
MvcContrib working on Portable Areas
read more
Create charts & add ad hoc capabilities to .NET Web & WinForm apps
read more
Canvas gets a Spark
read more
|
|
Please login to rate or to leave a comment.