Saturday, February 11, 2012

How to create a MVC 3 web site

To create a MVC application, you need to understand three things:
1) The M in MVC stands for Model which is nothing more than a class within the Models namespace.
2) The V in MVC stands for View which is the web page but it uses a different syntax call Razor
which just means that you'll use a @ symbol at the front of the interesting parts.
3) The C in MVC stands for Controller which is in the Controllers namespace and this replaces the code behind file in ASP.Net.

Step 1: Open Visual Studio 2010 (which is the only version that supports MVC 3).
You'll need to install some Essential Software:
WebPI available at http://microsoft.com/web/downloads and click the download link. Download and run the installer. The name is a little confusing: this is the installer for the WebPI. The download is a regular Windows installer, which installs the WebPI tool. You'll use this tool to download and istall web application components.

The WebPI will start automatically, and you will see the selection window.

There are thrre categories aross the top of the screen. The components we are interested in are:

Visual Studio 2010 SP1,
ASP.NET MVC 3 Tools Update,
SQL Server Express 2008 R2 (this one is optional since our application doesn't need a database).

You will need at a minimum Windows XP Professional because IIS ships with only that version of Windows-XP. IIS ships with Windows-Vista and Windows-7 as well.
                                                                                                                                                                                                                                      
Step 2: Create a new ASP.NET MVC 3 Web Appliction and call it HelloWorld_MVC
Step 3: Select a Empty project template and select the Razor View Engine.
Step 4: Create some special folders under your project: Content, Controllers, and Models
Step 5: Right click on the Models folder and add a new Class called HelloWorldData.

This is what your HelloWorldData class should look like:

using System;
namespace HelloWorld_MVC.Models
{
  public class HelloWorldData
  {
    public Name { get; set; }
    public Greeting { get; set; }
  }
}

Step 6: Compile your project. This is very important because without compiling your project we won't be able to complete a future step.
Step 7: Right click on the Controllers folder and add a new Controller class called
HelloWorldController.

This is what your HelloWorldController class should look like:

using System;
using System.Web;
using System.Web.Mvc;
using HellowWorld_MVC.Models;
namespace HelloWorld_MVC.Controllers
{
  public class HelloWorldController
  {
    public HelloWorldController()
    {
    }
    public ActionResult HelloWorld_MVC()
    {
       HelloWorldData data = new HelloWorldData();
       return View( data );
    }
  }
}

Step 8: Right-Click on View and select Add View from the pop-up menu.
Step 9: The name is your method name by default, so we'll acept that.
Step 10: Check the box for Create a strongly typed view and select the HelloWorldData from the
dropdown list.
Step 11: Uncheck the Use a layout or master page checkbox.

Your web page should look something like:

@model HelloWorld_MVC.Models.HelloWorldData
@{
   ViewBag.Title = "Hello World MVC";
}
<h2>Hello World MVC</h2>
<div class="body">
@using( Html.BeginForm())
{
@Html.EditorForModel()
@Html.ActionLink( "Get Greeting", "HelloWorld_MVC", "HelloWorld" )
}
</div>

Step 11: This step is optional, but for instruction reasons, strongly recommended. Try running your site now and try clicking on the Get Greeting link. What happens? Don't worry right now, we're not done with our controller.
Step 12: Modify your controller as follows:

using System;
using System.Text;
using System.Web;
using System.Web.Mvc;
using HellowWorld_MVC.Models;
namespace HelloWorld_MVC.Controllers
{
  public class HelloWorldController
  {
    public HelloWorldController()
    {
    }
    [HttpGet]
    public ActionResult HelloWorld_MVC()
    {
       HelloWorldData data = new HelloWorldData();
       return View( data );
    }
    [HttpPost]
    public ActionResult HelloWorld_MVC( HelloWorldData data )
    {
      StringBuilder sb = new StringBuilder();
      sb.Append( "Hello " );
      if( data.Name.Length != 0 )
        sb.Append( data.Name );
      else
        sb.Append( "World" );
      data.Greeting = sb.ToString();
      return View( data );
    }
  }
}
Things to take note of:
1) We added an using statement: using System.Text;
2) We added a descriptor to our existing HelloWorld_MVC() function: [HttpGet]
3) We added a new HelloWorld_MVC function that takes a HelloWorldData parameter and gave it the [HttpPost] descriptor.

Step 13: Right-click on the View in the new method in your controller and select Go To View from the pop-up menu. if your previous View comes up, then that's great. If not, modify that View parameter list to include as the first parameter: "HelloWorld_MVC" as in View( "HelloWorld_MVC", data );

Run your project again, and now the Get Greeting link will work as expected.

Congradulations, you've sucessfully created your first ASP.Net MVC 3 site!

No comments:

Post a Comment