The Razor View Engine is not a new thing. Having been released in 2011, it has been a core feature in many a developer's toolbox, as it is more flexible than using the .ASPX markup, as well as having that all important feature no developer can live without: Intellisense.
It allows for HTML to be more 'clean' as it lessons the transition between HTML and server-side code. Using the @ syntax means there are no lengthy server-side blocks making reading hard, rather just a single line (or perhaps even a couple of characters) to denote the variable that needs to be used.
For example, Take this HelloWorld! example.
<p> Hello @name!. It is currently @DateTime.Now</p>
<a href="/profiles/@id">Go To Your Profile</a>
The @ makes the code much more readable than using the <%= %> block that was used previously in .ASPX. Coming from someone who didn't have to learn .ASPX, i'm quite glad for this change.
But what has this got to do with Xamarin? It turns out that the Razor view engine plays quite nicely with the UIWebViews available. The reason for this is quite obvious; as Xamarin uses C# as its primary language, it allows for full use of all of its components. This means that we can create our view models like we would for a normal web application, showing data that is contained within the program with much more ease.
Wthout Razor, you would have to use the "EvaluateJavascript" function, which passes a string through to a webview. This means that the HTML will be free from inline code, however will create unsightly functions within your program, which no-one wants. Ever.
Let me show you an example of this. A project we're currently working on requires results to be shown from a set of questions. The code for the view model is this:
public class ProfileResultsViewModel
{
public List<ProfileBehaviour> Skills { get; set; }
public int OrderBy { get; set; }
public ProfileResultsViewModel ()
{
this.Skills = new List<ProfileSkills> ();
}
public string ToJSON ()
{
return JsonConvert.SerializeObject (this.Skills);
}
public class ProfileSkills
{
public int Id { get; set; }
public string Name { get; set; }
public string Summary { get; set; }
public int IndustryAverage { get; set; }
public int MyScore { get; set; }
}
}
Simple enough. You can see that for each skill, the summary of the skill, the industry average and the users score are all stored into a List. This is then passed into the view through the @model syntax, to display the different skills:
@model ProfileResultsViewModel
<html>
<head>
<script type="text/javascript" src="Razor/Js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Razor/Js/ProfilerResults.js"></script>
<link rel="stylesheet" type="text/css" href="Razor/Css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="Razor/Css/default.css">
</head>
<body>
<input id ="skills" type="hidden" value = "@Model.ToJSON()"/>
<input id ="orderBy" type="hidden" value = "@Model.OrderBy"/>
</body>
</html>
A piece of javascript then turns the JSON that's provided in the skills hidden input to create the HTML that is eventually shown. It is an effective and easy way to pass values to be shown to the user.
Plus, everyone has HTML skills (or they should at least). Razor makes it lot easier for people that aren't as confident with programming to still be able to understand what the HTML is saying.
I'll leave with this quote from Richard C. Martin in his book Clean Code: A Handbook of Agile Software Craftsmanship.
“The ratio of time spent reading (code) versus writing is well over 10 to 1 ... (therefore) making it easy to read makes it easier to write.”
