Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.net MVC 4 Razor Tutorial with Example for Beginners

Dec 16, 2014
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

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 RSS subscribe by email Subscribe by Email

16 comments :

Anonymous said...

yesss its gud

Hetal said...

gud

Unknown said...

yes ,it is very good site. any one can understand easily.

Anonymous said...

Sir plz show Insert update,delete using MVC4 application

javed shaikh said...

It Is Very GoodSite

Anonymous said...

Good.

Unknown said...

Very Nice ..But How to download it sir??

Anonymous said...

nice

Anonymous said...

if i have two methods(index() and sum()) in controller only index is is executing but not sum my requirement is to execute all ActionrResult() methods in controller can u please help me

Anonymous said...

please show more examples(CRUD) using mvc

Unknown said...
This comment has been removed by the author.
Unknown said...

Thanks you so much.

May i know more article same as like this.

Unknown said...

Better Understand

Unknown said...

actually I is good but i need clear details

Anil Kumar Verma said...

please show more examples(CRUD) using mvc

Anonymous said...

very a nice

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.