The Razor Syntax

We begin the explanations about Razor, one of the syntaxes with which we can create web applications with the Microsoft WebMatrix tool.

After having talked about it in previous installments of the , we are going to start to get hands-on and see how web applications would be created with this tool. But first we want to start by explaining a syntax that we will use in our day to day, called Razor, which the reader may not know yet.

This is the first of three articles that will try to introduce one of the syntaxes used to create web applications in WebMatrix. Its name is Razor and it was originally born as an option for programming web applications in ASP.NET MVC 3.

View Engine

Razor is not actually a programming language, but simply a view engine. What does this mean? Basically, you have to analyze what the MVC acronyms mean: they correspond to the term Model-View-Controller, the name in which one of the most popular architecture patterns is called. In MVC, the aim is to completely separate the information that our application manages (the Model) from the way it is presented (the View), decoupling both layers through an intermediate layer (the Controller) that will contain all the logic to transfer the data to the visual presentation that we want to make.

ASP.NET MVC 3 firmly respects these principles, to the point that there are several syntaxes with which to express how we want to create our view, both the controllers and the models that we have below being 100% reusable. In this way, different view engines have been born, such as Razor, which allow us to create these views in the way that we feel most comfortable.

Razor Goals

There are several objectives that Microsoft has set itself in the creation of this view engine, among which we would highlight:

• Compact, expressive and fluid: they seek to reduce the amount of code we need to create the views, avoiding that we have to denote each line of procedural code in a special way. The compiler will be smart enough to infer, on many occasions, what type of code we are writing.
• Easy to learn: although this is always relative, since it depends on the previous background of the developer and his abilities, with only this article and the next two we will leave concepts broad enough to address 80% of the functionality that we may need of Razor.
• It works in any text editor, so we won’t have to be anchored to Visual Studio, WebMatrix or any other tool to create our Razor files. Obviously, language support is superior in a tool like Visual Studio, where we will have all the power of IntelliSense at our fingertips, than if we simply edit with Notepad, but the final decision will be ours.
• Testable: we can create unit tests of the views.

Hello World with Razor

We are going to make our first and classic “Hello World” with Razor. For this, we are going to rely on WebMatrix. In a previous article we saw . To add a file to this project we have to go to the “Files” workspace and then press the “New” button on the top button bar. Pressing “New” will display two options under it: “New File…” and “New Folder”. We choose the first one since we only want to add a file. We will then see a screen like the following appear:

In this screen we simply have to give the new file a name (something like “HelloWorld.cshtml” and after accepting, in the file that will appear ready to edit, replace the HTML that it creates for us by default with something similar to this:

@{ var name = “Peter”; }

Hello @name, it’s @DateTime.Now

This example is a little more complex than the classic “Hello World”, but it will allow us to analyze a few fundamental details of Razor.

First of all, as you can see, it is possible to mix procedural code and HTML code easily and without having to resort to lots of “<%” sequences like in classic ASP.NET, or whatever the “escape” character is. ” that is used in the language to which one is accustomed.

Here, with a simple @, the Razor compiler will be able to interpret that we are describing procedural code, executable on the server at the time the page is sent to the browser upon request, instead of pure HTML treatable as plain text. In this example we see two occurrences of this @ with which we will become more and more familiar:

• In the first call, “@name”, we are referencing a variable. This variable is defined at the top of the code. This definition is C# code. This detail is important: in Razor all non-HTML code (ie procedural code) can be programmed in C# and VB.NET today.
• In this first call, in the procedural code, we have given a value to the name variable, a text string that contains the proper name “Peter”.
• In the second call, “@DateTime.Now”, we are making use of an object’s property to get the current date. We will see later what this means.

The result of this block of information would be a “dynamic” page, since with each new reload of it we will obtain a greeting with the date at this moment. The following image shows us the result.

conclusions

We have learned that Razor is a view engine, we have described its objectives and we have made a first example, the classic “Hello World” but with a little more functionality. In the next two articles we will analyze in more depth those, such as the definition of classes, objects, variables, data types, loops, etc.