Asp.net MVC 4 Razor Tutorial with Example for Beginners

Introduction:

Here I will explain asp.net mvc 4 razor tutorial with example for beginners. In this I will show you how to create a MVC 4 project using razor as a view engine before that we will learn what is mvc in asp.net.

Description:

In Previous posts I explained create rdlc report in asp.net mvc, how to make form and insert into database in asp.net mvc, show data from database table in asp.net mvc and many articles related to asp.net mvc, asp.net, c#, vb.net. Now I will explain asp.net mvc 4 razor tutorial with example for beginners. 

Before we start first we will see what MVC?

MVC stands for Model view controller. MVC is a framework which we used to build applications in client side using Model, view and controller design. Here we will see what is Model, view and controller?

Model

-      Responsible for storing and retrieving data

-      Maintenance of states. 

-      Notification of observers of change in state.

-      Classes or references including .cs and .dll files

View

-      Responsible for rendering UI model.

-      User interaction (Text Box, List Box, Button, Label)

-      Normally hold .cshtml, .aspx pages to show output.

Controller

-      Responsible for responding to user input.

-      Instructing model to process the user input.

-      Make a bridge between view and model.

Every controller holds one or more than one action method(s). These action methods are calling during the execution through URL like let’s say the URL is localhost/Home/Index.

Here Home is the controller name and Index is the ActionMethod name. Now every Action method has its own View by its name. So here a view will be stored within the View à Home folder named Index.cshtml.

Whenever you will request for Home/Index the index.cshtml file will be shown within that View à Home folder

Now let’s see how to start this. Open your Visual Studio 2012 it has inbuilt MVC 4.0 and MVC 3.0. If you are using Visual studio 2010 then download the MVC 4.0 set up here

Choose 4.0 project and set your name like as shown below

The next thing you have to do to choose Razor as a View engine and don't forget to choose an Empty template like as shown below

Now open your solution explorer in that we have three folders named Model, Controller and View and it will contain two web.config in solution one in the root folder and another one in the View folder. The root one is the normal one to deal and the second file in View folder blocks the direct access of the View folder.

Normally Home is the default Controller and Index is the default action method. If you open the RouteConfig.cs file in the App_Start folder you will come to see in the method RegisterRoutes that is default controller and ActionMethod is Home and Index respectively. If you want to change it you can do easily.

OK now let’s start with a simple program. Right click on the Controller folder and choose Create new Controller. Name it HomeController. 

Open the HomeController, there will be one Index ActionMethod. Now right click on the Action Method name (Index) and you will see there are two options Add View and Go to View. As you didn't create any View previously click on the Add View option. A new window will be opened. Keep the name as it is, Set the View engine as Razor. Right now we don't have any Master page so keep the Use a layout or master page blank.

Now click on the Add button and check in the View folder in Solutions Explorer. Within a view folder there will be a folder named as your controller name Home. And within that Home controller there is index.cshtml

Open index.cshtml page and place any html code under <h2>Index</h2> Or you can delete it and put your code. Now hit the run button and your project will run with the all html code in your index.cshtml.

As the default ones are running we would not see anything in the URL. It is showing something like http://localhost:59244/.Put http://localhost:59244/Home/Index instead of the URL right now. You will see the same result as Home controller is running and Action Method Index is calling. And you are viewing the content of index.cshtml.

Now it’s clear if you create another Action Method in the Home Controller. So let’s create another one.

Now add a view for the new controller arka

Now run your project and run with localhost/Home/Arka and see whats the output. It will show the data of arka.cshtml within Home folder.

I hope the fundamental concept of the MVC architecture and how to start with this is clear to all of you. If you have any type of query just comment with your query.

Arkadeep De

asp-arka.blogspot.in

Facebook | LinkedIn | Twitter

If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS Subscribe by Email