ASP.NET MVC Framework made a big impact on how web applications should be developed using the .NET platform. By default ASP.NET MVC uses the built-in WebForms view engine. Although WebForms view engine will serve all of your needs it does not blend nicely with the HTML. In this article we are going to introduce a new view engine called "Spark" developed by Louis Dejardin.

Downloading Spark:

The first step is to download and install Spark View Engine. This can be performed using the following link:

Spark View Engine

After you have downloaded the Spark view engine add a reference to the following assemblies:



In the next section we are going to learn how to configure Spark so it can used by our MVC application.

Configuring Spark View Engine:

Spark view engine must be added to the ViewEngines collections. This should be performed inside the Application_Start event as shown in the code below:



The above code registers the Spark view engine with the MVC framework. Now, we need to make some configuration settings in the web.config file.



This is it! Now, you are ready to use Spark view engine to create ASP.NET MVC application.

Implementing Spark Views:

Spark views are ".spark" extension files and NOT ".aspx" files. Create a simple text file in Notepad and save it as "Index.spark" file. Add the file in the Home folder inside the Views folder. The "Index" file will simply contain the welcome message which will be displayed on the page. The "Index.spark" implementation is shown below:



The <use> tag adds the namespaces to the view so that we do not have to write those long names. The ${"Hello World"} is executed as the server side code which in this case is in C#. The ${DateTime.Now} simply displays the current date time on the view.

The action "Index" of the HomeController is shown below:



You might be wondering what if you insert the current date time inside ViewData dictionary. Spark provides an easy way to access items inside the ViewData dictionary. The following code shows how to access ViewData["CurrentDateTime"]:



The viewdata tag allows us to access items from the ViewData dictionary. If you run the code above you will see that the ${CurrentDateTime} renders the current date time on the view.

Displaying List of Records:

Spark view engine makes it easy for developers to display a list of records on the page. The list can be any IEnumerable object which can be stored in either ViewData dictionary or the Model. In this article we will use a List<Customer> where Customer is a simple entity object having properties "FirstName" and "LastName". The HomeController's List action is responsible for sending the custom list to the Spark view. The List action is implemented below:




In the above code we are creating three different customers and then sending them to the View as Model. Next, we will see how to iterate through the collection and print the names of the customers on the page. The List view is implemented below:



The viewdata tag contains the special attribute "model" which specifies the type of the Model class. Since, we are sending a List<Customer> the model type is List<Customer>. Spark uses "[[" and "]]" to define the "<" and ">" tags respectively. A new variable "customers" is declared which is assigned the "ViewData.Model" property. The variable name improves the code readibility and has nothing to do with the actual working of the application. Finally, we iterated through the customers collection and prints the customer name on the page.

One important thing to note about the code above is the scope of the customers variable. Since, the defination of the customers variable is a self closing tag it can be accessed throughout the view. We can limit the scope of the variables in Spark view engine by specifying the closing tags as shown below:

   

Spark Update:

Microsoft announced that it will be releasing a new view engine for .NET called "Razor". Razor was inspired from Spark view engine and brings the same concepts to the table. At the point of this writing Razor was not available to download but you can read Scott Guthrie's blog post about the Razor view engine.

Conclusion:

ASP.NET MVC Framework is becoming the ultimate choice for .NET web developers. Most of the developers are quite happy with the default WebForms view engine. But for some of you who want more readible code and better server side code integration with HTML Spark lights the way. 

[Download Sample]