Last week I had the honor of taking part in the community-driven, ASP.NET-related, virtual event – aspConf 2012. My session was named ASP.NET MVC Tips, Tricks and Hidden Gems and it was generally about things I found to be important from my ASP.NET MVC experience – some were more basic and some were more hidden, too hidden some would say :)

I had lots of fun doing the session, and hopefully the attendees has fun too :)

This is already very helpful and it’s getting even better – you can set the parameter to a type of your own, and ASP.NET MVC will create an instance and fill it up for you. For instance, if you have a class named Person like this one:

Use the Add Controller dialog box to create a database context and a controller. Call it UsersController. Set the dialog properties as follows:

We don’t want the users to change the IsAdmin boolean value. It will be set somehow by the logics of the application later on. Therefore, open the Create.cshtml and Edit.cshtml views (they’re located under the Views/Users folder), and remove the IsAdmin part from them. The part to remove should look something like that:

Go to the Edit page for this user. The URL will be something like /Users/Edit/1.

Change the URL to /Users/Edit/1?IsAdmin=true and click enter to browse to it.

Now click Save

IsAdmin is now saved as True to the database. Oops.

This example is very very simple, but think about real world scenarios… this might get ugly. Very ugly. The biggest site that suffered the consequences of this vulnerability(based on Rails, but it’s the same thing) is GitHub – you can read their announcement here.

How to Defend

ASP.NET MVC offers a very simple solution to that problem – the Bind(Exclude=””) Attribute. However, most people never use this feature. So… make a new habit from today – start using it. ALL THE TIME. And when I say ALL THE TIME, I mean that from now on you use it ALL THE F***ING TIME.

For my small sample, add [Bind(Exclude = "IsAdmin")] to the top of the model class (User.cs). After this change the model class should look like that:

Razor, the new ASP.NET MVC view engine is incredible. I like it. A LOT. Great work Microsoft!

In this series of posts I’m sharing some handy tips and tricks that can enhance your experience with this new view engine. Enjoy!

The Problem

Razor is the place where HTML and C# live together in harmony. This is, in my opinion, one of the things that make razor the great view engine that it is. However, there’s a fly in the ointment. Assume you want to output “Good Morning!” if the hour is between 6AM and 9AM:

But oh no! Razor thinks “Good Morning!” is code!

The Solution

Razor has a special solution for that problem. Three different solutions for the matter of fact:

Writing the text inside an HTML element – razor knows to differentiate between C# and HTML so if you wrap the text with an HTML element, everything will work as expected:

Adding the “@:” symbol at the beginning of the line – using this symbol will tell razor that this line is an output line and should not be treated as code:

Using the special <text></text> element – when you want to output several lines within code context, it becomes irritating to use the “@:” symbol… For that you’ve got the special <text></text> element which tell razor that its content is to be outputted as HTML. Notice that the <text> element will not be outputted to the final HTML output.

Razor, the new ASP.NET MVC view engine is incredible. I like it. A LOT. Great work Microsoft!

In this series of posts I’m going to share some handy tips and tricks that can enhance your experience with this new view engine. Enjoy!

The Problem

You have to output a variable value and add some markup content immediately after it. For example, assume you have a variable holding a value representing a font size and you want to output it inside a style attribute, as follows:

But oh no! Razor can’t tell the difference between our fontSize variable and the “px” text that follows it so it will go look for a variable named “fontSizepx”!

The Solution

To solve the issue, we need to explicitly tell Razor where the variable name ends, or in more general terms – where the statement starts and ends. We do that by putting the variable name between parentheses:

You can also use the parentheses trick to output small code statements like these:

Today I had the honor to talk before the Scandinavian crowd in Gothenburg at SDC2011. My session was “The Big Comparison of ASP.NET MVC View Engines” where I compared ASPX, Razor, Spark, NHaml and the StringTemplate view engines.

About a month ago I gave a session at the virtual mvcConf 2 event. My session was “The Big Comparison of ASP.NET MVC View Engines” where I talked about the differences between ASPX, NHaml, Spark and the Razor view engines.

During the session I held a few polls about the preferences of the audience… the results were kinda interesting. These are screenshots of the results of the individual votes:

And summing all of them together, Razor got 70% of the votes, ASPX got 13%, Spark 12% and NHaml ended up with 6%:

So in conclusion, my prediction is that razor gonna conquer this asp.net mvc view engine market… However, the others will stay relevant and I recommend you to check them out. If they make you happier and more productive then go with them! do NOT hesitate.

Anyway, during the session I promised to post a detailed list of resources about the different view engines – so here it is:

One of the cool things about ASP.NET MVC (and other MVC web frameworks) is its capability to change the default view engine with a Microsoft or a 3rd-party one. ASP.NET MVC currently has a few options for view engine alternatives:

The web forms view engine – this view engine, with the ASP-like syntax, is the default one for ASP.NET MVC 1 and 2 applications.

Razor – the new view engine which will be the default one for ASP.NET MVC 3 applications.

NHaml – a port of the Ruby on Rails successful view engine named Haml. This open-source view engine aims to replace HTML tags with an easier to read and better organized syntax.

Note: Spark and NHaml are currently available for ASP.NET MVC 2. NHaml also doesn’t support .NET 4 at the moment. I believe that they will become available for version 3 as soon as it is out (moreover, they are open-source so you can help getting there!). Razor, on the other end, is not available on ASP.NET MVC 2 and below.

In this post I’ll go through the basic operations we do with our views and show you how to get them done with the different view engines mentioned above.

Displaying Variable Content

Here I’m comparing the way to present the content of ViewData["Message"] as an html-encoded string.

The Web Forms View Engine

<%: ViewData["Message"] %>

Razor

@ViewData["Message"]

Spark

${ViewData["Message"]}

NHaml

&= ViewData["Message"]

Conditions

Here I’m comparing the way of writing an if condition to display “<p>Party</p>” between 6AM and 9PM and “<p>It’s bed time</p>” between 9PM and 6AM.

NHaml

Displaying a Form

Here I’m comparing the way to write a login form. I’m using the login form from the default ASP.NET MVC 2 template (located at Views/Account/LogOn.aspx). Notice that it is based on a model of type Demo.Models.LogOnModel (located inside Models/AccountModels.cs).

If you’ve been following me, you probably noticed that I became quite excited with the new view engine of ASP.NET MVC 3 – the razor view engine. If you’re familiar with it then you might agree or disagree with me, but if you don’t then this is a great time for you to make up your mind!

In this post I assume you are familiar with the concept of view engines. If not, please watch this before.

Let’s start.

At Sign (@) Galore

The razor view engine is all about the at sign (@). Unlike the inelegant <% %> signs of the common web forms view engine, here all you need is the at sign. Basically, starting an expression with the at sign will lead to this expression being evaluated and output the result to the page. For example:

@DateTime.Now

This expression will end up printing the current date and time to the response stream. It is the equivalent of the following web forms view engine code:

<%: DateTime.Now %>

Note
At sign expressions are html encoded!
If you’re sure your output is OK and you don’t want it to be html encoded, you need to provide an IHtmlString object, or simply do:
@MvcHtmlString.Create("<b>BOLD!</b>")

By now some of you might be scratching your heads, moving anxiously in your sits or eating Ben & Jerry's uncontrollably… all of this because something is disturbing you with that line of code… something is missing…

It’s Magic! Magic!!!!!!11

Well, you were right! something is, indeed, missing… we only started the expression with the at sign, but we never told the framework where the expression ended!!! God help us all!!!

Do not worry. This is part of the charm of Razor – if your expression is a single call, there is no need to enclose it in some sort of way, you just write the expression after the at sign (and make sure it’s immediately after the at sign! for example, @ DateTime.Now will raise an exception).

Wait! But what about the times I wanna use blocks of code? or when I want to write out the result of 1 + 1? No problem, I have the solution for you! (how many times have you heard that before, right?)

A Moment of Truth
What will happen if you write:
@"Shay" + " " + "Friedman"
?
... think for a moment ...
Answer: a "Parser Error" exception. Yes, get used to it.

Now, sometime you need actual code blocks like loops or conditions… and these brackets won’t help you there, son. And look carefully, because this is where it gets a bit… surprising.

Code Blocks and Razor Sitting in a Tree, K-I-S-S-I-N-G

Let’s start with the simplest use case – you want to set a variable within your view. How would you do that? @int a = 1; ? no no no. To do that, you enclose the code block within curly brackets, with an at sign at the beginning of course. For example, the next sample will output 1 to the page:

@{
int a = 1;
}
@a

This was a very simple sample though… what about conditions for example? I’m glad you asked!

One way to write conditions (or any block of code), is by using the curly brackets solution:

Pay attention - it’s code and then html, and then code again, and then html again! Has your brain exploded yet?

So what happened here? in razor, everything blends together elegantly. The idea here is that razor understands when you write code and when you write html and can operate accordingly. This means that the next sample is valid as well:

Though one might think it would be a valid razor syntax, it isn’t. This is because razor is smart, but it’s no genius… razor can’t tell if “Man, you’re so 80’s!” is code or html. Think of a sentence like “if pigs could fly” – is this a C# syntax error or plain text? because of this limitation, you have two options to do that – start the html part with html tags (like the previous sample that includes <p> tags) or use a <text> tag as follows:

It’s already been 6 months since ASP.NET MVC 2 was released and version 3 is already taking shape. I, personally, am thrilled about that because this version seems to put ASP.NET MVC, in terms of maturity and functionality, on the first line along with other MVC frameworks out there like RoR.

I’ve put together 5 main reasons why I’m excited about this upcoming version. What about you?

1. The Razor View Engine

I said it before and I’ll say it again – the razor view engine is so cool!!! I really like the clean code I get when using it. In short, the razor view engine uses at signs (@) to indicate code blocks. For example, these are legit lines of code in razor:

@foreach (var item in Model) {
<b>@item.FullName</b>
}

2. New Helpers

Helpers is an area ASP.NET MVC has been lacking at, compared to other MVC frameworks. MVC 3 will have new helpers that tend to close that gap:

Chart – helps creating charts. Very nice!

WebGrid – renders a collection of objects as a grid including paging and sorting. Should output a plain HTML table. Hopefully that’s all there is to it…

The next helpers have been referred to as “task-based helpers”. They should have been a part of the beta version but they’re not there… I hope they’ll make it to the release version because they are just pure awesomeness:

Twitter – contains basic twitter operations like rendering the twitter stream for a specified user or the results of a given search.

ReCapcha – helps using the reCAPTCHA service.

Gravatar – helps consuming a user’s avatar from the Gravatar service.

Analytics – provides different methods like GetGoogleHtml, GetStatCounterHtml or GetYahooHtml that render the required javascript code for the different analytics services.

3. Support for Unobtrusive jQuery-Based Ajax

In ASP.NET MVC 3, Ajax.ActionLink, Ajax.RouteLink, Ajax.BeginForm and Ajax.BeginRouteForm will use JQuery to connect to the server. In addition, they will not use inline javascript, and instead they will call functions placed within javascript files.

Same thing applies to client-side validation.

4. Better Extensibility with new Dependency Injection Support

ASP.NET MVC 3 will contain numerous extensibility possibilities. Almost anything can be extended using DI, which opens so much opportunities. Just what extensibility means!

P.S. I’m not an ASP.NET MVP nor ASP Insider. Everything in this post was taken from various official blog posts and public web sites. Although the sources are as official as they can get (Scott Gu, Phill Haack…) this is only the beta version and as you know, in software – it ain’t over until the very last commit. Therefore, I recommend you check the release notes of every new version to see that no breaking changes were included.

I am a passionate web-head, AngularJS fanboy, Microsoft C# MVP and the author of "IronRuby Unleashed". To make a living I consult, train and code at CodeValue. I also speak at conferences around the world.

Apart from technology, I'm a wannabe guitarist and a sports junkie - both doing and watching. Especially basketball. And I also snowboard once in a while.