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”]
Handling Exceptions using jQuery and ASP.NET MVC
[tweetmeme style=”compact”] Using AJAX has become one of the de facto practices in many web based RIAs. The use of jQuery is on the rise in many web applications, especially the ones built using ASP.NET MVC. Making AJAX calls using jQuery is quick and easy. A typical web request can have an expected response or an exception. It is therefore important to catch exceptions when we make any AJAX calls so that we can show some message which makes sense to the user.
Lets begin with our Controller. Create the following method to throw JSON version of the exception.
private JsonResult ThrowJSONError(Exception e)
{
Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
//Log your exception
return Json(new { Message = e.Message});
}
Specifying the StatusCode as HttpStatusCode.BadRequest or HttpStatusCode.InternalServerError or simply 500 will let the javascript know that there is something wrong in the response.
Lets create an ActionMethod to throw an exception which we will catch using jQuery.
public ActionResult DivideByZero()
{
try
{
throw new DivideByZeroException();
}
catch (DivideByZeroException e)
{
return ThrowJSONError(e);
}
}
The above method will throw a DivideByZeroException which will be converted to a JSON string in the catch block and returned to the caller. Lets write the jQuery code to call the ActionMethod.
$(document).ready(function() {
$.ajax({
type: "GET",
url: "AJAX/DivideByZero",
dataType: "json",
success: function(data) {
if (data) {
alert("Success!!!");
}
}, error: function(xhr, status, error) {
DisplayError(xhr);
}
});
});
function DisplayError(xhr) {
var msg = JSON.parse(xhr.responseText);
alert(msg.Message);
}
Here we are making a call to the DivideByZero ActionMethod. Obviously the exception will be thrown,which will be caught in the error block. The responseText is a string of serialized data, which will not be useful unless we parse it to JSON. We can use the native JSON parser available in the latest browser. But, this as I found out is not helpful in IE 7 or lower. Fortunately, there is a useful library at JSON.org that can parse the responseText to JSON.
Let me know if there are better ways of handling exceptions in jQuery.
Hope you found it useful!
Check availability of Username using ASP.NET MVC and jQuery
[tweetmeme style=”compact”]Here is a simple way to check if an Username is available using ASP.NET MVC and jQuery
Step 1: First lets create the XHTML markup for our View page(Index) as follows…
<!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>
<title>Check if an Username already exists</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//Your jQuery code will come here
</script>
</head>
<body>
Enter a Username: <br />
<input type="text" id="txtUsername" />
<input type="button" id="btnCheck" value="Check!" />
<div id="divStatus" />
</body>
</html>
So your view will look like this…
Step 2: Create a Controller class ‘UniqueNameController’ or WhateverController as follows…
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyMVCTrials.Controllers
{
[HandleError]
public class UniqueNameController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult CheckName(FormCollection form)
{
System.Threading.Thread.Sleep(3000);
string name = form["username"];
if (name.Equals("Sumit"))
return Json(false);
return Json(true);
}
}
}
The Action Method CheckName contains the logic to check if the Username provided already exists or not. The code provided here is only for demo. Thread.Sleep(3000) will simulate a delay as if to show that the application is working really hard to find out if the username exists or not. REMOVE that line when you are writing the actual code to check the username against a database or Web service.
NOTE: The return value need not be a JsonResult. You can change it to ActionResult and return some string value to indicate the success/failure of the call.
Step 3: Lets replace the comment Your jQuery code will come here from our view with the following jQuery code…
$(document).ready(function() {
$("#btnCheck").click(function() {
var name = $("#txtUsername").val(); //Value entered in the text box
var status = $("#divStatus"); //DIV object to display the status message
status.html("Checking....") //While our Thread works, we will show some message to indicate the progress
//jQuery AJAX Post request
$.post("/Home/CheckName", { username: name },
function(data) {
if (data == "true") {
status.html(name + " is available!");
} else {
status.html(name + " is not available!");
}
});
});
});
The code is very simple. The button click event makes an AJAX call to our ActionMethod CheckName and expects a response. The Thread.Sleep(3000) will delay the response for 3 seconds. The ActionMethod checks the value of the username and returns a JSON string for our AJAX call to handle.
We can fancy it up a bit by providing some color to our status messages using the jQuery addClass method. Putting it all together, our View will looks as follows…
<!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>
<title>Check If Name Already Exists</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
.green
{
color: Green;
}
.red
{
color: Red;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#btnCheck").click(function() {
var name = $("#txtUsername").val();
var status = $("#divStatus");
status.html("Checking....").removeClass();
$.post("/Home/CheckName", { username: name },
function(data) {
if (data == "true") {
status.html(name + " is available!").addClass("green");
} else {
status.html(name + " is not available!").addClass("red");
}
});
});
});
</script>
</head>
<body>
Enter a Username:
<br />
<input type="text" id="txtUsername" />
<input type="button" id="btnCheck" value="Check!" />
<div id="divStatus" />
</body>
</html>
Checking the username
Username already exists
Username is available
There are different ways in which you can make AJAX requests using jQuery. For the detailed documentation check http://docs.jquery.com/Ajax. Hope it was useful!
Changing the default View Location in ASP.NET MVC
[tweetmeme style=”compact”]After 8 hours of training in ASP.NET MVC by a guy from Microsoft I starting revisiting the ways in which I’ve implemented some of the functionality in my existing project done using MVC. The training was just a walkthrough of what I already know about ASP.NET MVC from the internet. One of the questions I put forth to the trainer, which he termed as interesting was, how to change the default view location in MVC. Apart from his I’ll get back to you on this answer, one of my colleagues in the room was vociferous in declaring that it is not possible at all as none of the MVC tutorials talk about it 😐
I googled and binged for answers and found few…
I found this post Organize your views in ASP.Net MVC very useful in scenarios where I have more than one Controller which needs to share the same View location.
I wanted to check if there are any other ways of doing the same and so I twittered Scott Hanselman, the guy himself to find if he can give me any pointers and he replied…
shanselmanR @2leggedspider Derive from WebFormsViewEngine, override just FindView(). Look at the NerdDinner code on Codeplex at the MobileViewEngine.
He was talking about this piece of code in NerdDinner.
public class MobileCapableWebFormViewEngine : WebFormViewEngine
{
public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
{
ViewEngineResult result = null;
var request = controllerContext.HttpContext.Request;
//This could be replaced with a switch statement as other advanced / device specific views are created
if (UserAgentIs(controllerContext, "iPhone")) {
result = base.FindView(controllerContext, "Mobile/iPhone/" + viewName, masterName, useCache);
}
// Avoid unnecessary checks if this device isn't suspected to be a mobile device
if (request.Browser.IsMobileDevice)
{
//TODO: We are not doing any thing WinMobile SPECIAL yet!
//if (UserAgentIs(controllerContext, "MSIEMobile 6")) {
// result = base.FindView(controllerContext, "Mobile/MobileIE6/" + viewName, masterName, useCache);
//}
//else if (UserAgentIs(controllerContext, "PocketIE") && request.Browser.MajorVersion >= 4)
//{
// result = base.FindView(controllerContext, "Mobile/PocketIE/" + viewName, masterName, useCache);
//}
//Fall back to default mobile view if no other mobile view has already been set
if ((result == null || result.View == null) &&
request.Browser.IsMobileDevice)
{
result = base.FindView(controllerContext, "Mobile/" + viewName, masterName, useCache);
}
}
//Fall back to desktop view if no other view has been selected
if (result == null || result.View == null)
{
result = base.FindView(controllerContext, viewName, masterName, useCache);
}
return result;
}
public bool UserAgentIs(ControllerContext controllerContext, string userAgentToTest)
{
return (controllerContext.HttpContext.Request.UserAgent.IndexOf(userAgentToTest,
StringComparison.OrdinalIgnoreCase) > 0);
}
}
Though the above code helps in detecting if the user is accessing the site from a mobile device and redirect the request to a particular view location, you can customize it for your needs.
Btw, if you have not checked NerdDinner yet, I suggest you should. It is one of the best ways to learn MVC.
Another approach I found useful is from Phil Haack Grouping Controllers with ASP.NET MVC.
Let me know if you came across any other approach or best practice relevant to this.
Scott Hanselman talks about MVC 1.0 and NerdDinner.com at Mix09
A really great presentation by Scott Hanselman demonstrating how he created NerdDinner.com using MVC 1.0. In this 70 minutes presentation, Scott demonstrates how we can build a real Web site with ASP.NET, ASP.NET AJAX, Authentication, Authorization, MVC, Microsoft SQL Server and jQuery. Long video, but really worth it.
CodePlex Project: http://nerddinner.codeplex.com
2LeggedSpider 
22 comments