Advance Web Application

Development
Instructor: Dr. Syed Ali Raza
Department of Computer Science
GC University Lahore
 Lecture 7
Introduction to Razor Pages
Give someone a program, you frustrate them for a day;
teach them how to program, you frustrate them for a
lifetime.

— David Leinweber
View Engine

• A view engine is responsible for rendering the view into html form to
the browser.
• ASP.NET MVC includes two different view engines
• Web Forms View Engine (MVC1 and MVC2)
• Razor View Engine (MVC 3 and forward)
• Razor View Engine
• Simplified syntax but not a new language.
• A code focused templating syntax optimized around HTML generation
• Works with any text editor
• IntelliSense with Visual Studio 2010 and higher
Razor View Engine

• Razor provides a streamlined syntax for expressing views that

minimizes the amount of syntax and extra characters.
• It effectively gets out of your way and puts as little syntax as possible
between you and your view markup.
• Razor accomplishes this by understanding the structure of markup so
that it can make the transitions between code and markup as smooth
as possible.
• If the view engine uses C# syntax, the file will have to bear the .cshtml file
extension.
• Similarly, Razor views, which use the Visual Basic syntax, must have the
.vbhtml file extension.
• These file extensions are important, as they signal the code language syntax
to the Razor parser.
@ character

• The key transition character in Razor is the “at” sign (@).

• This character is used to switch from markup to code and sometimes
again back to markup.
@{ • var is used to declare implicitly
var name = “Ali Raza”; typed local variable
var title = “Teacher”; • It tells the compiler to figure out
<div> the type of the variable at
Name: @name compilation time.
Title: @title • A var variable must be initialized
</div> at the time of declaration.
}
explicit declaration sets the type of a variable or
object to a specific type. implicit declaration sets the
type of a variable or object to a reasonable default or
easily inferred type, according to some pre-built rules.
@ character

• There are two basic types of transitions

• code expressions
• code blocks.
• Code expressions
• <h1>Listing @items.Length items.
• In the above line the moment the Razor view sees the tag it is intelligent enough to recognize
it as an html tag.
• After that we need to print the length of the items. For this we need to switch from html to
C# mode.
• To do that we are preceding it with @ symbol.
• After that we are closing the tag i.e. we are again switching from C# to html.
• Note: We have to notice that we don’t need to demarcate the end of code
expression
• Razor is smart enough to know that the space character after the expression is not
a valid identifier, so it transitions smoothly back into markup.
• This ability for Razor to automatically transition back from code to markup is one of
its big appeals and is the secret in keeping the syntax compact and clean.
@ character

• Code Blocks
• In addition to code expressions, Razor also supports code blocks within a view.
• Inside a code block, each complete code statement must end with a semicolon.
• Inline expressions don't end with a semicolon.
• Consider the lines
@{ var items = new string[] { “Model", “View", “Controller" }; }
@foreach (var item in items)
{
<li>The item name is @item.</li>
}
• This block of code iterates over an array and displays a list item element for each
item in the array.
• The foreach statement automatically transitions to markup with the open tag.
• Razor understands the structure of HTML markup, it also transitions automatically
back to code when the tag is closed.
• Blocks of code require curly braces to delimit the block of code in addition to an @
sign. It is commonly used for variable declarations, to perform calculations etc.
More fun with @ character

• Single statement blocks

@{var myMessage = “Hello World”;}
• Starts inline expressions
<p> The Value of myMessage is: @myMessage </p>
• Multi-statement blocks
@{
var greeting = “welcome to RazorPages”;
Var weekday = DateTime.Now.DayOfWeek;
Var greetingMessage = greeting + “Today is: “ + weekday;
}