Lets face it – I am a big gadget fan. 

I am also a fan of Microsoft Technology.  This is probably because of my deep involvement in Microsoft Development. 

I currently have a Samsung Blackjack Windows Mobile phone running Windows Mobile 6.0 and for a while I have been drooling over the new iPhones and Android Smartphones.  But my contract with Rogers is not up for renewal until March 2011.

However, my wife’s contract is overdue for renewal – and so we approached Rogers about what they would be willing to do if we both upgraded our phones now – threatening to move to Telus or Bell if we didn’t get the deal we wanted. 

Rogers gave us a great offer and so we decided to go ahead and upgrade from them.

Since the new Windows Phone 7 platform was announced at MIX I have been interested in trying to develop for the platform – after all its Silverlight, a technology that should be relatively easy for me to work with as an ASP.NET developer. 

Most people say that you need to use a platform to develop for it, and its been getting great reviews anyway, so we decided to “order” two new Samsung Focus phones. 

The Samsung Focus appears to be the best of the first batch of Windows phones, with its Super AMOLED screen, so the fact that this was the phone being offered “exclusively” by Rogers was great.

That was nearly 3 weeks ago – the Windows Phone 7 launch in North America was Nov 8th.  And still no phone.  My son Andrew who works for Microsoft and was not allowed to get his “free” phone until Nov 18th received his Focus from AT&T last week – but still no Samsung Focus phones in Canada.

Rogers said if we found the phone in a store before they were able to ship us one – we could buy the phone through a Rogers “store”, and we have been phoning all the local stores almost daily – they must be getting fed up with us by now – but still no phone.

What’s up? Who is at fault here?  Is it Samsung for shipping all their phones to the US for the product launch?  Or is it Rogers fault for not getting their order in early enough to get all the branding, that all carriers add, done? 

My feeling is that the culprit is Rogers – as there does not appear to be a shortage of Focus phones in the US.  I am beginning to lose my patience and I am seriously considering switching to Bell – who have their Windows Phone 7 phone in stock in our local store.

Regardless – at some point in the near future I will have a new Windows Phone 7 phone, and I have already started work on a development project, so you’ll be hearing more about this new toy.

What are WebPages and Razor – how do we (ASP.NET developers) use them to build Web Applications.  This is the subject of this series of articles.  In part 1 I described how you can use WebMatrix to build a simple site using the new CSHTML file type, and in part 2 I introduced the new Razor syntax and how it compares with the syntax used in ASP.NET WebForms.  In this article I will dive deeper into the new Syntax.

The @ Operator

In the previous article I focused on the @ operator and how it used by the Razor parser to switch from markup (HTML) to code (C# or VB.NET).

Razor understands C# (and VB.NET) syntax so it is able to support the various language constructs.  Figures 1-3 show 3 simple C# constructs and how they would work in Razor.

Figure 1 – Inline Expressions

Figure 2 – Single Statement Blocks

Figure 3 – Multiple Statement Blocks

Note that when using single or multiple statement blocks that the C# “{}” braces are used to surround the code.

Once you are inside a block of C# code then anything that is valid C# is allowed to be used such as for loops, while statements and if else statements.

As mentioned in the previous article the Razor parser is smart and as long as the intention is clear can detect when switching back to markup, so the code in Figure 4 is valid.  As the code in line 25 ends with a “;” and the code which starts line 26 is not valid C# the parser automatically switches back to markup and recognizes the <p> tag.

Figure 4 – Automatic detection of markup

The @: Operator and <text></text> Tag

If it cannot be made clear that the intention is to switch back to markup then there are two ways you can indicate that the following text should be considered markup, – the @: Operator and the <text> tag.

The @: Operator can be used in code to indicate that the rest of the line is text or markup. (see Figure 5)

Figure 5 – Using the @: Operator

In this example, the @: operator forces Razor to switch back to markup mode.  Without the @: operator the Razor parser assumes this is C# (although not valid), because it knows it is not a valid markup tag.

The <text></text> tag is a pseudo markup tag that identifies everything between the opening and closing elements as text.  It is most useful when the content stretches over more than one line. (see Figure 6)

Figure 6 – Using the <text></text> Tag

Note that once inside the pseudo-markup the @ operator still switches into code – the <text> element is treated the same as any markup tag – it is just ignored as real markup.

Comments - The @* and *@ Operators

Although Razor has a limited syntax, just like any other syntax it may be necessary to place comments in Razor code.  If we are in markup then the standard <!-- --> syntax is used to add comments to markup which are not rendered in the browser.  If we are in code then the standard //  or /* */ syntax is used to add comments to the C# code, which is ignored by the C# compiler. 

In addition Razor provides its own comments which are ignored by the Razor parser.

Figure 7 – Razor comments

That’s it – that’s all you need to know to write your own Razor code.  of course you need to understand HTML markup and a programming language supported by Razor (currently C# and VB.NET), but that is beyond the scope of this article.

What are WebPages and Razor – how do we (ASP.NET developers) use them to build Web Applications.  This is the subject of this new series of articles.  In part 1 I described how you can use WebMatrix to build a simple site using the new CSHTML file type.

Why Razor?

So why do we need a new syntax and parser for ASP.NET?  We already have the ability to combine markup and code in ASP.NET Web Forms (ASPX and ASCX pages). 

Lets look at some traditional ASP.NET code, where we are rendering a table of squares, using a mixture of HTML markup and C# code (Figure 1).

Figure 1 – Traditional ASP.NET

The problem with the traditional ASP.NET parser used in WebForms is that it is not very smart as it requires explicit delimiters – the pair of “bumble-bees” <% %>, so called because of their default syntax highlighting in Visual Studio - to switch back and forth from HTML markup to C# code.

We compare this with the same code using the new Razor syntax (Figure 2).

Figure 2 – Razor code

Notice that in Figure 1 there are 8 delimiters in the traditional ASP.NET syntax – 4 to start code and 4 to return to HTML, while the same code in the Razor syntax (Figure 2) only requires 3 delimiters (the @ symbol). 

The Razor parser is much smarter.  It knows and understands the language (C# or VB), and makes smart decisions about what is markup and what is code.  Also the delimiter used is a single character, which makes the combined markup and code cleaner and more readable, and more readable code is easier to understand.

How does it work?

So what makes the Razor parser smarter?  We will use the example in Figure 2 to highlight how it works.

In line 8 of the example code the first “@” symbol is used to indicate the beginning of C# code. At that point the parser now knows that the following code is C# and as it understands the C# language it knows that at the beginning of the next line the <tr> is not valid C# so it switches back to HTML.

In lines 10 and 11 again the parser detects the “@” symbol and switches to C#.  It understands the concept of C# statements so when it encounters the closing </td> element it knows that – 1) the < is not valid C# and – 2) the preceding C# statement is valid so it switches back to HTML.

Finally, there is the closing “}” in line 11.  At first glance, it appears that we omitted the “@” symbol so the parser knows that the “}” symbol represents C#, but the Razor parser is expecting a “}” at some point, as it detected the opening “{“ on line 8, so as soon as it encounters the “}” it knows to automatically switch back to "C# and close the for statement block.

Razor is a new combination of code (C# or VB.NET) and markup (HTML) that provides cleaner, more readable code.  In the next article in this series we will look in more depth at the Razor syntax.