In this article I will explain with a simple example, how to use the
ASP.Net MVC 5 Razor View Application and also how to use Razor syntax in web pages.
Razor is server side markup language used for embedding server side code in web pages.
Note: You can also develop
MVC project in the
Visual Studio versions 2012, 2013, 2015, 2017, 2019 and 2022, they all support target framework 4.5.
Creating a new ASP.Net MVC 5 Project
Let’s get started with creating your first
ASP.Net MVC 5 Project.
Steps
1. Open Visual Studio and from Start section click on Create a new Project.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
2. From the New Project Dialog window, select ASP.NET Web Application option.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
3. Then you need to set a suitable Name for your project and also you can set its Location where you want to create the Project.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
4. From the new
ASP.NET Project Dialog, select
Empty template and make sure the
MVC CheckBox is checked as shown below.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
5. Your first
ASP.NET Web Application in
MVC is now ready and you should see the following folders and files in your
Solution Explorer window.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
Adding Controller to the ASP.Net MVC 5 Project
1. Inside the Solution Explorer window, Right Click on the Controllers folder and then click on Add and then Controller option of the Context Menu.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
2. From the Add Scaffold Dialog window, select the MVC 5 Controller – Empty option and click Add button.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
3. You will now be asked to provide a suitable Name to the new Controller.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
Once you click add, the following Controller is created. The default Action method is Index in the Controller class.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
Adding View associated with the Controller to the ASP.Net MVC 5 Project
1. Now you will need to Right Click inside the Action method and click on the Add View option in order to create a View for the Controller.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
2. After that you have to click on Add.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
3. You will need to provide a suitable
Name to the View. This article does not use
Layout Page and hence the
Use a layout page CheckBox needs to be kept unchecked.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
Once you click Add, the following View is created.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
Configuring the Routes
The last important part is to configure the Routes in the RouteConfig.cs file.
1. Open the RouteConfig.cs class from the Solution Explorer window.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
2. Inside the RouteConfig.cs file, there is a RegisterRoutes method.
RegisterRoutes
Inside this method, you will need to make sure that the Controller property is set to Home i.e. the Name of the Controller while the Action property is set to Index i.e. the Name of the Action method.
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
The final RouteConfig.cs file will look as shown below.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
Now press F5 to run the Application and you should see a blank page in browser.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
Displaying a Message from Controller to View in ASP.Net MVC 5 Project
1. Inside the HomeController’s Index method, a ViewBag property named Message is set.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
ViewBag.Message = "This is my first MVC 5 App.";
return View();
}
}
2. The ViewBag property is displayed in the View named Index as shown below.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@ViewBag.Message
</div>
</body>
</html>
3. Now press F5 to run the application and you should see a message displayed on page in browser.
![Simple ASP.Net MVC 5 Razor View Tutorial with Sample Program example]()
Downloads
