Web Forms in ASP.NET MVC3 and Razor

Introduction to ASP.NET MVC3

ASP.NET MVC3 builds the capabilities of Web forms found in the previous versions and adds exciting new capabilities. When combined with the new Razor view engine, MVC3 allows you to create sophisticated Web forms faster than ever before with even cleaner separation between your model and your views.

MVC3 data entry forms are designed to allow you to leverage built in HTML generation methods or to design your own custom HTML that will still map to and validate against your model. This means that even if you custom build one HTML field, it will still map correctly to your server side object in the controller.

This example creates a simple ASP.NET MVC3/Razor application that allows the user to edit a boat in a web form and save it. To get started, create a new “ASP.NET MVC 3 Web Application” in Microsoft Visual Studio.NET 2010. If this option doesn’t show up for you in the new project dialog, go to http://www.microsoft.com/downloads/en/details.aspx?FamilyID=a920ccee-1397-4feb-824a-2dfefee47d54 and download ASP.NET MVC3.

ASP.NET MVC3 – The Model

Our boat includes a BoatID as the key column, a captain’s name, the name of the boat and the date it was christened. The purpose of the model is to define the data of your object and how it relates to other objects.

In ASP.NET MVC3 web forms you have 3 primary choices when it comes to your model.

• Entity Framework -You can use the entity framework to generate a model that you can then customize by changing the properties or adding partial classes that add additional attributes.
• No model – You can access the Request object in your controller and handle the form data manually.
• Plain Old CLR Objects (POCO) – You can define your own objects with public properties to be used by your web form’s model.

If you use the entity framework or plain old CLR objects, you can add validation attributes to your objects that define validation in a declarative way that can be easily validated on the client and the server.

Add the following code to the Models directory as Boat.cs:

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.ComponentModel.DataAnnotations;

  namespace MVC3WebForms.Models
  {
      public class Boat
      {
          public int BoatID { get; set; }
          public string CaptainName { get; set; }
          public string BoatName { get; set; }
          public DateTime DateChristened { get; set; }
      }
  }

ASP.NET MVC3 Controller

The design of the controller is to allow a single group of methods to add a new boat or to edit an existing boat. If the user loads the edit page with a valid BoatID in the URL, then you know they want to edit an existing boat. If the user follows a link that doesn’t pass in a BoatID then the controller will create a new boat instead of editing an existing one.

The controller in the code example below defines 3 methods. The Index method is the default method for this controller and is mapped to the /Home path which is the default URL. The other two methods EditBoat(int BoatID) and EditBoat(Boat b) are used to display the boat create/edit page and to save the changes to the boat respectively.

EditBoat(int BoatID) is meant to load a boat from the database and present it to the user for editing if a BoatID is supplied and to create a new blank boat if the BoatID isn’t supplied. MVC3 will parse URL get parameters and map them to your controller’s defined arguments by name.

EditBoat(Boat b) has the HttpPost markup on it letting ASP.NET MVC know that this method should handle EditBoat actions when a post is done from a web form. This will help it differentiate between when a form is initially loaded versus when the user clicks submit on the form.

The code example below is defined in Controllers/HomeController.cs:

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using MVC3WebForms.Models;
  
  namespace MVC3WebForms.Controllers
  {
      public class HomeController : Controller
      {
          public ActionResult Index()
          {
              return View();
          }
          //GET: /Home/EditBoat
          public ActionResult EditBoat(int BoatID)
          {
              Boat b = new Boat();
              if (BoatID != 0)
              {
                  //Real world: Load the boat from the database
                  //Example World: We're just setting properties.
                  b.BoatID = BoatID;
                  b.BoatName = "Boat 555";
                  b.CaptainName = "Leo Decaf";
                  b.DateChristened = new DateTime(1920, 5, 5);
              }
              else { b.BoatID = -1; }
              return View(b);
          }
  
          //POST: /Home/EditBoat
          [HttpPost]
          public ActionResult EditBoat(Boat b)
          {
              //Real World: Save the boat then return Redirect("~/Home");
              //Example World: We're going to show that we have
              //    the user's input inside of our boat object.
  Response.Write("<h1>Boat Saved!</h1>");
  Response.Write("<p>BoatID:" + b.BoatID + "</p>");
  Response.Write("<p>BoatName:" + b.BoatName + "</p>");
  Response.Write("<p>CaptainName:" + b.CaptainName + "</p>");
              return View(b);
          }
      }
  }