MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

How To Build ASP.NET Web Pages Using Razor Syntax?

Published on 11 May 17
1416
0
2
Razor is a simple markup syntax for embedding server code into web pages. It is based on the ASP.NET framework syntax comprising Razor markup, C# and HTML. Razor was released for Microsoft Visual Studio in 2011.

The concept of Razor is to provide an optimized syntax for HTML creation using a code-focused template approach – with the least amount of transition between HTML and code. It has a server-based code which is used to create dynamic web content on the fly. When the web page is called, the server executes the server-based code inside the web page before returning to the browser. And because it is run on the server, the code can achieve complicated tasks such as accessing databases. The Razor design as the name indicates is sharp – it reduces the number or characters and keystrokes. It combines the power of conventional ASP.NET markup with ease of use and learning.

Razor is often chosen because it allows a more fluid coding workflow in ASP.NET software development by precluding explicitly denoted server blocks in HTML. Some other benefits of Razor are:
  • Supports IntelliSense – statement completion support
  • Supports layouts - an alternative to the master page
  • Unit testable
About MVC
MVC is a software architecture pattern. It separates the development into three different components that is Model, View and Controller.
  • Model: It manages the behavior, data access, responds to requests for information about its state (usually from the view), and responds to instructions to change state.
  • View: The view manages the display of information.
  • Controller: The controller interprets the mouse and keyboard inputs from the user, informing the model and/or the view to change as appropriate.
Visual Studio
Visual Studio is the IDE (Integrated Development Environment) for creating windows form applications, websites, web apps and services. It supports many languages including C#, C++, Python, and Ruby.

Now let’s take a look at building a simple application using these technologies.
How To Build ASP.NET Web Pages Using Razor Syntax? - Image 1
Step 1 - Open Visual Studio and go to File/New menu. Now click on Project. A window similar to the following should open.
How To Build ASP.NET Web Pages Using Razor Syntax? - Image 2
Step 2 - In this view select within the Visual C# options, ASP.NET MVC 3 Web Application.

Step 3 - Then in the following window, select the template Empty and Razor as View engine and then click on OK.
How To Build ASP.NET Web Pages Using Razor Syntax? - Image 3
You should be able to see the web application project created with the required folders Models, Views and Controllers. You can also see the reference, app data, scripts and other information.
How To Build ASP.NET Web Pages Using Razor Syntax? - Image 4
Step 4 - Right-click the Controllers folder and Add/Controller. In the window enter the name of your controller and the template option – leave Empty Controller. Don’t remove the suffix Controller from the name.
How To Build ASP.NET Web Pages Using Razor Syntax? - Image 5
Step 5 - Now right click the Models folder and select Add/Class. Choose an appropriate name for this class as this will be the Entity that will show in the View. In the example shown here it is called IndexModel(note that the name doesn’t have to include the word index). Now add some properties to the class like ID, Description and Comments properties.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MyMvcApplication.Models
{
public class IndexModel
{
public int ID { get; set; }
public string Description { get; set; }
public string Comments { get; set; }
}
}
Step 6 - Right click the Views folder and create a new folder titled Index as the controller. Then right click the Index folder and select Add/View. Again name this view Index so that we have a new Index. Cshtml.
How To Build ASP.NET Web Pages Using Razor Syntax? - Image 6
Step 7 - Now that we have added all three – Model, View and Controller, it is time to add some code into the controller.
How To Build ASP.NET Web Pages Using Razor Syntax? - Image 7
Step 8 - After adding some code to the view, it should look like this:
How To Build ASP.NET Web Pages Using Razor Syntax? - Image 8
Step 9 - Your first MVC application using ASP.Net and Razor is ready. You can run this on any internet browser. This is a very basic and simple example to create a fundamental app using Razor syntax.

Conclusion:
Razor syntax is compact and fairly easy to learn as you can use existing C# or Visual Basic skills. Have you used Razor Syntax to build ASP.NET web pages? Do share your feedback in the comments section below.
Razor is a simple markup syntax for embedding server code into web pages. It is based on the ASP.NET framework syntax comprising Razor markup, C# and HTML. Razor was released for Microsoft Visual Studio in 2011.

The concept of Razor is to provide an optimized syntax for HTML creation using a code-focused template approach – with the least amount of transition between HTML and code. It has a server-based code which is used to create dynamic web content on the fly. When the web page is called, the server executes the server-based code inside the web page before returning to the browser. And because it is run on the server, the code can achieve complicated tasks such as accessing databases. The Razor design as the name indicates is sharp – it reduces the number or characters and keystrokes. It combines the power of conventional ASP.NET markup with ease of use and learning.

Razor is often chosen because it allows a more fluid coding workflow in ASP.NET software development by precluding explicitly denoted server blocks in HTML. Some other benefits of Razor are:

  • Supports IntelliSense – statement completion support
  • Supports layouts - an alternative to the master page
  • Unit testable
About MVC

MVC is a software architecture pattern. It separates the development into three different components that is Model, View and Controller.

  • Model: It manages the behavior, data access, responds to requests for information about its state (usually from the view), and responds to instructions to change state.
  • View: The view manages the display of information.
  • Controller: The controller interprets the mouse and keyboard inputs from the user, informing the model and/or the view to change as appropriate.
Visual Studio

Visual Studio is the IDE (Integrated Development Environment) for creating windows form applications, websites, web apps and services. It supports many languages including C#, C++, Python, and Ruby.

Now let’s take a look at building a simple application using these technologies.

How To Build ASP.NET Web Pages Using Razor Syntax? - Image 1

Step 1 - Open Visual Studio and go to File/New menu. Now click on Project. A window similar to the following should open.

How To Build ASP.NET Web Pages Using Razor Syntax? - Image 2

Step 2 - In this view select within the Visual C# options, ASP.NET MVC 3 Web Application.

Step 3 - Then in the following window, select the template Empty and Razor as View engine and then click on OK.

How To Build ASP.NET Web Pages Using Razor Syntax? - Image 3

You should be able to see the web application project created with the required folders Models, Views and Controllers. You can also see the reference, app data, scripts and other information.

How To Build ASP.NET Web Pages Using Razor Syntax? - Image 4

Step 4 - Right-click the Controllers folder and Add/Controller. In the window enter the name of your controller and the template option – leave Empty Controller. Don’t remove the suffix Controller from the name.

How To Build ASP.NET Web Pages Using Razor Syntax? - Image 5

Step 5 - Now right click the Models folder and select Add/Class. Choose an appropriate name for this class as this will be the Entity that will show in the View. In the example shown here it is called IndexModel(note that the name doesn’t have to include the word index). Now add some properties to the class like ID, Description and Comments properties.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace MyMvcApplication.Models

{

public class IndexModel

{

public int ID { get; set; }

public string Description { get; set; }

public string Comments { get; set; }

}

}

Step 6 - Right click the Views folder and create a new folder titled Index as the controller. Then right click the Index folder and select Add/View. Again name this view Index so that we have a new Index. Cshtml.

How To Build ASP.NET Web Pages Using Razor Syntax? - Image 6

Step 7 - Now that we have added all three – Model, View and Controller, it is time to add some code into the controller.

How To Build ASP.NET Web Pages Using Razor Syntax? - Image 7

Step 8 - After adding some code to the view, it should look like this:

How To Build ASP.NET Web Pages Using Razor Syntax? - Image 8

Step 9 - Your first MVC application using ASP.Net and Razor is ready. You can run this on any internet browser. This is a very basic and simple example to create a fundamental app using Razor syntax.

Conclusion:

Razor syntax is compact and fairly easy to learn as you can use existing C# or Visual Basic skills. Have you used Razor Syntax to build ASP.NET web pages? Do share your feedback in the comments section below.

This blog is listed under Development & Implementations Community

Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
 
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top