Thursday, May 3, 2012

How to create Simple MVC Application

Pre-requisite for MVC

• Visual Studio 2010 or the free Visual Web Developer 2010 Express. These include ASP.NET MVC 2 template by default.
• Visual Studio 2008 SP1 (any edition) or the free Visual Web Developer 2008 Express with SP1. These do not include ASP.NET MVC 2 by default; you must also download and install ASP.NET MVC 2 from http://www.asp.net/mvc/  .


Goal: - Create a simple ASPX page with Hello world controller.

In this lab we will create a simple hello world program using MVC template. So we will create a simple controller, attach the controller to simple index.aspx page and view the display on the browser.

Video demonstration

In case you are fed up to read the complete article watch the below 5 minutes video to understand the same.

Step1:- Create project

Create a new project by selecting the MVC 2 empty web application template as shown in the below figure.



Once you click ok, you have a readymade structure with appropriate folders where you can add controllers, models and views.


Step 2:- Add controller

So let’s go and add a new controller as shown in the below figure.



Once you add the new controller you should see some kind of code snippet as shown in the below snippet.
public class Default1Controller : Controller
{
//
// GET: /Default1/
public ActionResult Index()
{
return View();
}
}

Step 3:- Add View


Now that we have the controller we need to go and add the view. So click on the Index function which is present in the control and click on add view menu as shown in the below figure.



The add view pops up a modal box to enter view name which will be invoked when this controller is called as shown in the figure below. For now keep the view name same as the controller name and also uncheck the master page check box.
Once you click on the ok button of the view, you should see a simple ASPX page with the below HTML code snippet. In the below HTML code snippet I have added “This is my first MVC application”.

Step 4:- Run the application


If you do a CNTRL + F5 you should see an error as shown in the below figure. This error is obvious because we have not invoked the appropriate controller / action.


If you append the proper controller on the URL you should be able to see the proper view.



So have a toast of beer for your first ASP.NET MVC application.


So what’s in the next tutorial?

Now that we have created a simple MVC hello world, it’s time to see how we can pass data from controllers to views. The first hit comes to the controller which will load your business objects or model and you would like to transfer these objects to the view to display them. Click here to view the 2nd part of ASP.NET MVC in article.

No comments:

Post a Comment