How To Build ASP.NET Web Pages Using Razor Syntax?
Published on 11 May 17
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.
Step 1 - Open Visual Studio and go to File/New menu. Now click on Project. A window similar to the following should open.
Step 2 - In this view select within the Visual C# options, ASP.NET MVC 3 Web Application.
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.
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.
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.
Step 7 - Now that we have added all three – Model, View and Controller, it is time to add some code into the controller.
Step 8 - After adding some code to the view, it should look like this:
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
Related Posts:
Post a Comment
You may also be interested in
Share your perspective
Share your achievement or new finding or bring a new tech idea to life. Your IT community is waiting!