blog

Home / DeveloperSection / Blogs / First ASP.Net MVC 4 Application

First ASP.Net MVC 4 Application

Sumit Kesarwani4572 29-Jan-2014

In this blog, I’m explaining how to create a simple asp.net mvc 4 application.

First you have to setup the development environment for asp.net mvc 4, for this you need Visual Studio 2012 or Visual Studio 2010 with Service Pack 1. Once you have installed the visual studio, then you are ready to start creating asp.net mvc 4 application

Step 1 

Start the Visual Studio 2012 and click on File -> New -> Project.

Select the ASP.net MVC 4 Application and give it the name “FirstMvcApp” and click on OK.


First ASP.Net MVC 4 Application

Step 2

The next dialog comes to select the project template:

First ASP.Net MVC 4 Application

Select the “Empty” project template and in View Engine – select the “Razor” and click on OK.

Step 3

Adding your first controller

In MVC architecture, incoming requests are handled by controllers. In ASP.NET MVC, controllers are just simple C# classes (usually inheriting from System.Web.Mvc.Controller, the framework’s built-in controller base class). Each public method in a controller is known as an action method, meaning you can invoke it from the Web via some URL to perform an action.

To add the controller to your project, right click the Controller folder in the Visual studio solution explorer like this:


First ASP.Net MVC 4 Application

When you click on controller a dialog appears:

First ASP.Net MVC 4 Application

Enter the controller name as “HomeController” and in Scaffolding options select Empty MVC Controller and click on OK.

 

Visual Studio will open the HomeController.cs for editing and the default contents will look like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace FirstMvcApp.Controllers
{
    publicclassHomeController : Controller
    {
        //
        // GET: /Home/
        publicActionResult Index()
        {
            return View();
        }
    }
}

 

If you run the application at this point, you can see an error is generated that is MVC Framework is not able to find the view like this:


First ASP.Net MVC 4 Application

Actually this error is quite helpful; it explains not only that MVC could not find a view for our action method, but it shows where it looked. This is another nice illustration of an MVC convention: views are associated with action methods by a naming convention. Our action method is called Index and our controller is called Home and you can see from Figure 2-8 that MVC is trying to find different files in the Views folder that have that name.

Step 4

To create a view, stop the debugger and right-click the action method in the HomeController.cs code file (either on the method name or inside the method body) and select Add View from the pop-up menu.



First ASP.Net MVC 4 Application

A dialog will appear like this:



First ASP.Net MVC 4 Application

Give view name as “Index” and View Engine as “Razor (CSHTML)” and click on “Add” button, Visual studio open the Index.cshtml for editing and the default content look like this:

@{
    Layout = null;
}
<!DOCTYPEhtml>
<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <div>
       
    </div>
</body>
</html>

Expression

@{
    Layout = null;
}

This is an expression that will be interpreted by the Razor view engine. This is a pretty simple example. It just tells Razor that we chose not to use a master page. We are going to ignore Razor for the moment.

Step 5

Add a simple line in the body section:-

@{
    Layout = null;
}
<!DOCTYPEhtml>
<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <div>
        <h3>This is first asp.net mvc 4 application</h3>
    </div>
</body>
</html>

And run the application:

First ASP.Net MVC 4 Application

Updated 18-Sep-2014

Leave Comment

Comments

Liked By