ASP.NET Web Programming Using the Razor Syntax (C#)

--Article by By Microsoft ASP.NET

Programming Tips

1. You add code to a page using the @ character

The @ character starts inline expressions, single statement blocks, and multi-statement blocks:

<!-- Single statement blocks  -->
@{ var total = 7; }
@{ var myMessage = "Hello World"; }
<!-- Inline expressions -->
<p>The value of your account is: @total </p>
<p>The value of myMessage is: @myMessage</p>
<!-- Multi-statement block -->
@{
    var greeting = "Welcome to our site!";
    var weekDay = DateTime.Now.DayOfWeek;
    var greetingMessage = greeting + " Today is: " + weekDay;
}<p>The greeting is: @greetingMessage</p>

This is what these statements look like when the page runs in a browser:

2. You enclose code blocks in braces

A code block includes one or more code statements and is enclosed in braces.

<!-- Single statement block.  -->
@{ var theMonth = DateTime.Now.Month; }<p>The numeric value of the current month: @theMonth</p>
<!-- Multi-statement block. -->
@{
    var outsideTemp = 79;
    var weatherMessage = "Hello, it is " + outsideTemp + " degrees.";
}<p>Today's weather: @weatherMessage</p>

The result displayed in a browser:

3. Inside a block, you end each code statement with a semicolon

Inside a code block, each complete code statement must end with a semicolon. Inline expressions don't end with a semicolon.

<!-- Single-statement block -->
@{ var theMonth = DateTime.Now.Month; }
<!-- Multi-statement block -->
@{
    var outsideTemp = 79;
    var weatherMessage = "Hello, it is " + outsideTemp + " degrees.";
}
<!-- Inline expression, so no semicolon -->
<p>Today's weather: @weatherMessage</p>

4. You use variables to store values

You can store values in a variable, including strings, numbers, and dates, etc. You create a new variable using thevar keyword. You can insert variable values directly in a page using @.

<!-- Storing a string -->
@{ var welcomeMessage = "Welcome, new members!"; }<p>@welcomeMessage</p>
<!-- Storing a date -->
@{ var year = DateTime.Now.Year; }
<!-- Displaying a variable -->
<p>Welcome to our new members who joined in @year!</p>

The result displayed in a browser:

5. You enclose literal string values in double quotation marks

A string is a sequence of characters that are treated as text. To specify a string, you enclose it in double quotation marks:

@{ var myString = "This is a string literal"; }

If the string that you want to display contains a backslash character (\) or double quotation marks ( " ), use averbatim string literal that's prefixed with the @ operator. (In C#, the \ character has special meaning unless you use a verbatim string literal.)

<!-- Embedding a backslash in a string -->
@{ var myFilePath = @"C:\MyFolder\"; }<p>The path is: @myFilePath</p>

To embed double quotation marks, use a verbatim string literal and repeat the quotation marks:

<!-- Embedding double quotation marks in a string -->
@{ var myQuote = @"The person said: ""Hello, today is Monday."""; }<p>@myQuote</p>

Here's the result of using both of these examples in a page:

Note   Notice that the @ character is used both to mark verbatim string literals in C# and to mark code in ASP.NET pages. 

6. Code is case sensitive

In C#, keywords (like var, true, and if) and variable names are case sensitive. The following lines of code create two different variables, lastName and LastName.

@{
    var lastName = "Smith";
    var LastName = "Jones";
}

If you declare a variable as var lastName = "Smith"; and if you try to reference that variable in your page as@LastName, an error results because LastName won't be recognized.

Note   In Visual Basic, keywords and variables are not case sensitive.

7. Much of your coding involves objects

An object represents a thing that you can program with — a page, a text box, a file, an image, a web request, an email message, a customer record (database row), etc. Objects have properties that describe their characteristics and that you can read or change — a text box object has a Text property (among others), a request object has aUrl property, an email message has a From property, and a customer object has a FirstName property. Objects also have methods that are the "verbs" they can perform. Examples include a file object's Save method, an image object's Rotate method, and an email object's Send method.

You'll often work with the Request object, which gives you information like the values of text boxes (form fields) on the page, what type of browser made the request, the URL of the page, the user identity, etc. The following example shows how to access properties of the Request object and how to call the MapPath method of theRequest object, which gives you the absolute path of the page on the server:

<table border="1">
<tr>
    <td>Requested URL</td>
    <td>Relative Path</td>
    <td>Full Path</td>
    <td>HTTP Request Type</td>
</tr>
<tr>
    <td>@Request.Url</td>
    <td>@Request.FilePath</td>
    <td>@Request.MapPath(Request.FilePath)</td>
    <td>@Request.RequestType</td>
</tr>
</table>

The result displayed in a browser:

8. You can write code that makes decisions

A key feature of dynamic web pages is that you can determine what to do based on conditions. The most common way to do this is with the if statement (and optional else statement).

@{
   var result = "";
   if(IsPost)
   {
      result = "This page was posted using the Submit button.";
   }
   else
   {
      result = "This was the first request for this page.";
   }
}
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
<body>
<form method="POST" action="" >
  <input type="Submit" name="Submit" value="Submit"/>
  <p>@result</p>
</form>
</body>
</html>
    </body>
</html>

The statement if(IsPost) is a shorthand way of writing if(IsPost == true). Along with if statements, there are a variety of ways to test conditions, repeat blocks of code, and so on, which are described later in this article.

The result displayed in a browser (after clicking Submit):

Razor syntax:

Quick reference about the Razor syntax.

Syntax/Sample	Razor	Web Forms Equivalent (or remarks)
Code Block	@{ int x = 123; string y = "because."; }	<% int x = 123; string y = "because."; %>
Expression (Html Encoded)	<span>@model.Message</span>	<span><%: model.Message %></span>
Expression (Unencoded)	<span> @Html.Raw(model.Message) </span>	<span><%= model.Message %></span>
Combining Text and markup	@foreach(var item in items) { <span>@item.Prop</span> }	<% foreach(var item in items) { %> <span><%: item.Prop %></span> <% } %>
Mixing code and Plain text	@if (foo) { <text>Plain Text</text> }	<% if (foo) { %> Plain Text <% } %>
Mixing code and plain text (alternate)	@if (foo) { @:Plain Text is @bar }	Same as above
Email Addresses	Hi philha@example.com	Razor recognizes basic email format and is smart enough not to treat the @ as a code delimiter
Explicit Expression	<span>ISBN@(isbnNumber)</span>	In this case, we need to be explicit about the expression by using parentheses.
Escaping the @ sign	<span>In Razor, you use the @@foo to display the value of foo</span>	@@ renders a single @ in the response.
Server side Comment	@* This is a server side multiline comment *@	<%-- This is a server side multiline comment --%>
Calling generic method	@(MyClass.MyMethod<AType>())	Use parentheses to be explicit about what the expression is.
Creating a Razor Delegate	@{ Func<dynamic, object> b = @<strong>@item</strong>; } @b("Bold this")	Generates a Func<T, HelperResult> that you can call from within Razor. See this blog post for more details.
Mixing expressions and text	Hello @title. @name.	Hello <%: title %>. <%: name %>.
NEW IN RAZOR v2.0/ASP.NET MVC 4
Conditional attributes	<div class="@className"></div>	When className = null <div></div> When className = "" <div class=""></div> When className = "my-class" <div class="my-class"></div>
Conditional attributes with other literal values	<div class="@className foo bar"> </div>	When className = null <div class="foo bar"></div> Notice the leading space in front of foois removed. When className = "my-class" <div class="my-class foo bar"> </div>
Conditional data-* attributes. data-* attributes are always rendered.	<div data-x="@xpos"></div>	When xpos = null or "" <div data-x=""></div> When xpos = "42" <div data-x="42"></div>
Boolean attributes	<input type="checkbox" checked="@isChecked" />	When isChecked = true <input type="checkbox" checked="checked" /> When isChecked = false <input type="checkbox" />
URL Resolution with tilde	<script src="~/myscript.js"> </script>	When the app is at / <script src="/myscript.js"> </script> When running in a virtual application named MyApp <script src="/MyApp/myscript.js"> </script>

Notice in the “mixing expressions and text” example that Razor is smart enough to know that the ending period is a literal text punctuation and not meant to indicate that it’s trying to call a method or property of the expression.