MVC 4 Web Application Projects in VS11 - Part 1

This month I have written few posts on some upcoming new features of ASP.Net 4.5 which are going to be released with VS2011. In this post I am going to start a series on MVC 4 which is part of VS11 Beta release. MVC4 is still in beta phase but it is part of VS11 at the moment. In this post I will focus on very basic steps on how to create a simple MVC4 project using VS11. In subsequent posts I will discuss more details about MVC4 and what is new in MVC4 as compared to previous versions of MVC framework.

How to create MVC 4 project

Start VS11 and select File > New > Project menu option. It will bring up following dialog box. Select language that you would like to use and then select ASP.Net MVC 4 Web Application.

mvc4 project

After you pick project type as MVC 4 Web Application, you will be prompted to pick a template for your web application. There are some per-defined templates available in VS11 that will create lot of required infrastructure for your application. I am going to focus the discussion around the fact that we are learning MVC 4 from scratch and would like to know how the technology works. So I will pick Empty as my project template. You will notice that VS11 has created minimal files in the project. Since Razor is rendering engine of choice, I will keep that selected when you pick your project template.

add mvc 4 project

Add controller in MVC 4 application

As I mentioned above that I have picked Empty project template. So if you will run the application, you will end up with some web server related error saying resources not found etc. This means that we do not have any page in the application to display to the user. In MVC it is all done through use of controllers. When a request comes into the web application, it is routed based on the controllers that are mapped to parse incoming URLs and translate them into appropriate views. So first thing we will do is to add a new controller. You will notice that you have an empty folder named Controller in your project. MVC looks for controller definitions in that folder bt default. And the default controller it looks for is HomeController. Right click on Controller folder and choose Add > Controller menu option. Name the controller as HomeController and leave the template drop down selection to Empty controller. We will build up on this as we go along.

add mvc controller

You will notice that now you have your first controller added to your project as shown below.

public class HomeController : Controller
{
  public ActionResult Index()
  {
    return View();
  }
}
    

As you can see very plain and simple code that just returns an instance of View

Add view in MVC 4 application

mvc new view

If you will run the application, you will again get errors saying that there is no view associated. If you look at the code above, you can see an instance of View is being returned but we have no view associated with our controller. Right click on Index method or anywhere inside Index method and notice a menu option Add view. Click on it and you will notice the name of the view is set to Index. For now just leave all the default options selected and click OK and you will notice that you have a new entry under Views folder in your project. This correspnds to Index view that you just added. Open Index.cshtml file and you will find starter Razor mark up added to it. I modified it to look as below.

@{
    ViewBag.Title = "ByteBlocks.com";
}

<h2>Welcome to ByteBlocks.com Mvc4 Tutorials</h2>
    

I will discuss all this Razor syntax and what all this means in next post. For now you can see that how quick it is to create a simple MVC 4 project in VS11 and get it up and running.

comments powered by Disqus

Blog Tags