How To Creating a Page to Play with Razor

Notice: A non well formed numeric value encountered in C:\ClientSites\bestaspnethostingreview.com\httpdocs\wp-content\plugins\crayon-syntax-highlighter\crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in C:\ClientSites\bestaspnethostingreview.com\httpdocs\wp-content\plugins\crayon-syntax-highlighter\crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in C:\ClientSites\bestaspnethostingreview.com\httpdocs\wp-content\plugins\crayon-syntax-highlighter\crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in C:\ClientSites\bestaspnethostingreview.com\httpdocs\wp-content\plugins\crayon-syntax-highlighter\crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in C:\ClientSites\bestaspnethostingreview.com\httpdocs\wp-content\plugins\crayon-syntax-highlighter\crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in C:\ClientSites\bestaspnethostingreview.com\httpdocs\wp-content\plugins\crayon-syntax-highlighter\crayon_formatter.class.php on line 119

BestASPNETHostingReview.com | In this section you’ll play a bit with Razor so you can get a sense of the basic syntax. Start WebMatrix if it’s not already running.

Select the Files workspace.

In the ribbon, click New to create a page. Select CSHTML and name the new page TestRazor.cshtml.

Click OK.

Copy the following into the file, completely replacing what’s there already.

[su_note note_color=”#e8f4f4″ text_color=”#084234″]

Note:

When you copy code or markup from the examples into a page, the indentation and alignment might not be the same as in the tutorial. Indentation and alignment don’t affect how the code runs, though.

[/su_note]

Examining the Example Page

Most of what you see is ordinary HTML. However, at the top there’s this code block:

Notice the following things about this code block:

• The @ character tells ASP.NET that what follows is Razor code, not HTML. ASP.NET will treat everything after the @ character as code until it runs into some HTML again. (In this case, that’s the <!DOCTYPE> element.
• The braces ( { and } ) enclose a block of Razor code if the code has more than one line. The braces tell ASP.NET where the code for that block starts and ends.
• The // characters mark a comment — that is, a part of the code that won’t execute.
• Each statement has to end with a semicolon (;). (Not comments, though.)
• You can store values in variables, which you create (declare) with the keyword var. When you create a variable, you give it a name, which can include letters, numbers, and underscore (_). Variable names can’t start with a number and can’t use the name of a programming keyword (like var).
• You enclose character strings (like “ASP.NET” and “Web Pages”) in quotation marks. (They must be double quotation marks.) Numbers are not in quotation marks.
• Whitespace outside of quotation marks doesn’t matter. Line breaks mostly don’t matter; the exception is that you can’t split a string in quotation marks across lines. Indentation and alignment don’t matter.

Something that’s not obvious from this example is that all code is case sensitive. This means that the variable TheSum is a different variable than variables that might be named theSum or thesum. Similarly, var is a keyword, but Var is not.

Objects and properties and methods

Then there’s the expression DateTime.Now. In simple terms, DateTime is an object. An object is 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, etc. Objects have one or more properties that describe their characteristics. A text box object has a Text property (among others), a request object has a Url property (and others), an email message has a From property and a To property, and so on. Objects also have methods that are the “verbs” they can perform. You’ll be working with objects a lot.

As you can see from the example, DateTime is an object that lets you program dates and times. It has a property named Now that returns the current date and time.

Using code to render markup in the page

In the body of the page, notice the following:

Again, the @ character tells ASP.NET that what follows is code, not HTML. In the markup you can add @ followed by a code expression, and ASP.NET will render the value of that expression right at that point. In the example, @a will render whatever the value is of the variable named a, @product renders whatever is in the variable named product, and so on.

You’re not limited to variables, though. In a few instances here, the @ character precedes an expression:

• @(a*b) renders the product of whatever is in the variables a and b. (The * operator means multiplication.)
• @(technology + ” ” + product) renders the values in the variables technology and product after concatenating them and adding a space in between. The operator (+) for concatenating strings is the same as the operator for adding numbers. ASP.NET can usually tell whether you’re working with numbers or with strings and does the right thing with the + operator.
• @Request.Url renders the Url property of the Request object. The Request object contains information about the current request from the browser, and of course the Url property contains the URL of that current request.

The example is also designed to show you that you can do work in different ways. You can do calculations in the code block at the top, put the results into a variable, and then render the variable in markup. Or you can do calculations in an expression right in the markup. The approach you use depends on what you’re doing and, to some extent, on your own preference.

Seeing the code in action

Right-click the name of the file and then choose Launch in browser. You see the page in the browser with all the values and expressions resolved in the page.