Coffee break
- Using MS WebAPI to add API Support to Your Existing ASP.NET MVC Web Applications : Sumit Maitra talks about how to use the newly launched WebAPI in an existing MVC 3 application by upgrading it to ASP.NET MVC 4 and extending it to provide http services using the WebAPI
- Compare Visual Studio 11 Beta editions : Here is a quick comparison of the new Visual Studio 11 beta editions
- Visual Studio 11 Beta and .NET 4.5 Beta – Available now! : Somasegar announces the availability of Visual Studio 11 Beta and .NET 4.5 Beta versions for download. Do check the links highlighting some of the innovations that have gone in to building Visual Studio 11 Developer Preview release
- Introduction to jQuery mobile : Brian Mains discusses the jQuery Mobile framework for developing user interfaces for mobile devices
- One ASP.NET – Making JSON Web APIs with ASP.NET MVC 4 Beta and ASP.NET Web API : Scott Hanselman talks about the improvements in MVC 4, about Web API and how it fits in to One ASP.NET
Spark View Engine for ASP.NET MVC
There’s been a lot of buzz around the new View Engine for ASP.NET called Spark. Spark is an open-source ASP.NET ViewEngine developed by Louis DeJardin (Listen to the conversation between Scott Hanselman and Louis DeJardin to get some insights on Spark). Spark works for both Monorail and ASP.NET MVC supporting C#, VB, IronPython and IronRuby.
There are other ViewEngines already available as an alternative to the default ASP.NET MVC ViewEngine. Honestly I have not tried anyone of them and I surely don’t have any clue as to whether they are better or worse compared to Spark. Well, I just like everyone else decided to follow the buzz and try out Spark.
I decided to develop a simple RSS Reader using ASP.NET MVC and with Spark as its ViewEngine. I am using the Spark documentation as reference for my experiment.
Lets look at how a Spark View differs from the regular ASP.NET MVC View. Consider the following View which we are familiar with…
<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" %> <% if (Model.Count() > 0) { %> <% foreach (var product in Model) { %> <li> <%= product.Name %> </li> <% } %> <%} else {%> <p> No products available</p> <%} %>
The equivalent Spark View would be…
<viewdata products="IEnumerable[[Product]]"/> <ul if="products.Any()"> <li each="var p in products">${p.Name}</li> </ul> <else> <p>No products available</p> </else>
As you can see it is much cleaner and readable than the regular View. Checkout the Spark syntax in detail. Spark makes is really simple to data bind HTML elements to objects from the Controller.
Configuring ASP.NET MVC Project to use Spark ViewEngine
With this background on Spark, lets jump straight in to the task of configuring a ASP.NET MVC Web application to use Spark as its default ViewEngine.
Step 1: Download the Spark binaries from here. Extract the zip file and locate the bin folder.
Step 2: Create a new ASP.NET MVC Web Application and add reference to the assemblies Spark.dll and Spark.Web.Mvc.dll
Step 3: Add Spark to the ViewEngine collection in the Application_Start section of Global.asax
protected void Application_Start() { ViewEngines.Engines.Add(new SparkViewFactory()); RegisterRoutes(RouteTable.Routes); }
Your application is now ready for Spark!
Step 4: You may also add the following configuration settings in your web.config
<configSections> <section name="spark" type="Spark.Configuration.SparkSectionHandler, Spark"/> </configSections> <spark> <compilation debug="true"/> <pages automaticEncoding="true"> <namespaces> <add namespace="System.Web.Mvc"/> <add namespace="System.Web.Mvc.Ajax"/> <add namespace="System.Web.Mvc.Html"/> <add namespace="System.Web.Routing"/> <add namespace="System.Linq"/> <add namespace="System.Collections.Generic"/> </namespaces> </pages> </spark>
Another way of providing the Spark Engine settings is by creating an instance of ISparkSettings and passing it to the constructor of SparkViewFactory…
protected void Application_Start(object sender, EventArgs e) { var settings = new SparkSettings() .SetDebug(true) .AddNamespace("System.Web.Mvc") .AddNamespace("System.Web.Mvc.Ajax") .AddNamespace("System.Web.Mvc.Html") .AddNamespace("System.Web.Routing") .AddNamespace("System.Linq") .AddNamespace("System.Collections.Generic"); ViewEngines.Engines.Add(new SparkViewFactory(settings)); }
Thats all you have to do in terms of setting up the MVC Web application to use Spark ViewEngine.
Spark View Layouts
So far we have only configured the application to use Spark ViewEngine. Spark Views have a different extension from the regular ASP.NET MVC Views and as we saw already, they have a different syntax as well. Spark Views have the extension .spark. The way Spark ViewEngine deals with Master pages is also different. Lets look at it…
Master Pages
Application.spark – This is the application wide Master page which will be used by the Spark Engine. It could be place in Views/Layouts folder or Views/Shared folder.
[ControllerName].spark – If you need to use a Master page for individual Controllers then you can create a spark file with the name of the Controller. For instance if you have a HomeController then Views/Layouts/Home.spark or Views/Shared/Home.spark would be Master page for that Controller.
Check the Selecting Layout section in Spark documentation for more details.
Partial Views or User Controls
Any partial view prefixed with an underscore can have its own tag in Spark. For instance if we have a Partial View _LogOnUserControl.spark then we can refer to it in the Spark View as <LogOnUserControl />. If you don’t like this convention then you can remove the underscore and refer to the Partial View as <use file=”LogOnUserControl” />
With these changes in place our Views layout will look like this…
Let’s look at the individual Spark Views as to how they differ from the regular Views that you get when you create a new ASP.NET MVC Web Application.
Application.spark (replaces Site.master)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title> <use content="title">Default title</use> </title> <link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="page"> <div id="header"> <div id="title"> <h1> My MVC Application</h1> </div> <div id="logindisplay"> <LogOnUserControl" /> // or <use file="_LogOnUserControl" /> </div> <div id="menucontainer"> <ul id="menu"> <li>!{Html.ActionLink("Home", "Index", "Home")}</li> <li>!{Html.ActionLink("About", "About", "Home")}</li> </ul> </div> </div> <div id="main"> <use content="view" /> <div id="footer"> </div> </div> </div> </body> </html>
We can create Home.spark as well in the same manner.
Index.spark(replaces Index.aspx)
<content name="title"> Home Page </content> <h2> ${ViewData["Message"]}</h2> <p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website"> http://asp.net/mvc</a>. </p>
_LogOnUserControl.spark(replaces LogOnUserControl.ascx)
<if condition="Request.IsAuthenticated"> Welcome <b>${Context.User.Identity.Name}</b>! [ !{Html.ActionLink("Log Off", "LogOff", "Account")} ] </if> <else> [ !{Html.ActionLink("Log On", "LogOn", "Account")} ] </else>
Run the application and you will see the usual ASP.NET MVC Web Application’s home page but rendered using Spark ViewEngine. From what I have seen so far Spark looks promising and would be a great alternative for those who feel the default ViewEngine forces them to go back to the classic ASP days. I haven’t completely gone through all the possibilities in Spark and would like do so in the next few days.
Share your thoughts on Spark or any other ViewEngines you may have used.
[tweetmeme style=”compact”]
leave a comment