Walkthrough: Using MVC View Templates with Data Scaffolding

On the File menu, click New Project.

In the New Project dialog box under Project types, expand Visual Basic or Visual C#, and then click Web.

Under Visual Studio installed templates, select ASP.NET MVC 2 Web Application.

In the Name box, type MvcDataViews.

In the Location box, enter the name of the project folder.

Select Create directory for solution.

Click OK.

In the Create Test Project dialog box, select No, do not create a unit test project.

Note
If you are using Visual Studio 2008 Standard, the Create Unit Test Project dialog box is not displayed. Instead, the new MVC application project is created without a test project.

Click OK.

The new MVC application project is created.

In Solution Explorer, right-click the Models folder, click Add, and then click Class.

Change the name of the class to Person.vb or Person.cs.

Add the following code for the Person class:

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

namespace MvcDataViews.Models
{
    public class Person
    {
        [Required(ErrorMessage = "The ID is required.")]
        public int Id { get; set; }

        [Required(ErrorMessage = "The name is required.")]
        public string Name { get; set; }

        [Range(1, 200, ErrorMessage = "A number between 1 and 200.")]
        public int Age { get; set; }

        [RegularExpression(@"((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}", 
            ErrorMessage = "Invalid phone number.")]
        public string Phone { get; set; }

        [RegularExpression(@"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$", 
            ErrorMessage = "Invalid email address.")]
        public string Email { get; set; }
    }
}

In the Build menu, click Build MvcDataViews to build the project and to create an instance of the Person object.

Note
This step is necessary is because Visual Studio uses the model instance when it generates the controller code and view markup based on MVC templates.

Save and close the file.

In Solution Explorer, right-click the Controllers folder, click Add, and then click Controller.

Name the controller PersonController.

Select the Add action methods for Create, Update, and Details scenarios check box.

Click Add.

The new controller is added to the application. The controller contains the following action methods: Index, Details, Create (for HTTP GET), Create (for HTTP POST), Delete (for HTTP GET), and Delete (for HTTP POST), Edit (for HTTP GET) and Edit (for HTTP POST).

At the top of the PersonController class, add the following line of code:

static List<Person> people = new List<Person>();

This code creates a list of Person objects.

Save the file.

Open or switch to the PersonController class in the editor and locate the Index action method.

Right-click inside the Index action method, and then click Add View.

In the View name box, enter Index.

Select the Create a strongly-typed view check box.

In the View data class list, select MvcDataViews.Models.Person.

In the View content list, select List.

Note
Leave the Select master page check box selected.

Click Add.

A view named Index is created inside a new Person folder. The Index view will contain the MVC template for displaying a data list.

In the Index view, locate the Html.ActionLink controls and change them as shown in the following example:

<%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |
<%= Html.ActionLink("Details", "Details", item )%> |
<%= Html.ActionLink("Delete", "Delete", new { id=item.Id })%>

In PersonController, replace the Index action method with the following code:

public ActionResult Index()
{
    return View(people);
}

Save the files.

Open or switch to PersonController in the editor and locate the Create action method that handles HTTP GET.

Right-click inside the Create action method, and then click Add View.

In the View name box, enter Create.

Select the Create a strongly-typed view check box.

In the View data class list, select MvcDataViews.Models.Person.

In the View content list, select Create.

Note
Leave the Select master page check box selected.

Click Add.

A view named Create is added to the project.

In PersonController, replace the Create action method that handles HTTP POST with the following code:

[HttpPost]
public ActionResult Create(Person p)
{                      
    if (!ModelState.IsValid)
    {
        return View("Create", p);
    }

    people.Add(p);

    return RedirectToAction("Index");
}

Save the files.

Open or switch to PersonController in the editor and locate the Details action method.

Right-click inside the Details action method and then click Add View.

In the View name box, enter Details.

Select the Create a strongly-typed view check box.

In the View data class list, select MvcDataViews.Models.Person.

In the View content list, select Details.

Note
Leave the Select master page check box selected.

Click Add.

A view named Details is added to the project.

In the Details view, locate the Html.ActionLink control that links to the Edit view and change it as shown in the following example:

<%= Html.ActionLink("Edit", "Edit", new { id=Model.Id }) %> |
<%= Html.ActionLink("Back to List", "Index") %>

In PersonController, replace the Details action method with the following code:

public ActionResult Details(Person p)
{
    return View(p);
}

Save the files.

Open or switch to PersonController in the editor and locate the Details action method.

Right-click inside the Delete action method and then click Add View.

In the View name box, enter Delete.

Select the Create a strongly-typed view check box.

In the View data class list, select MvcDataViews.Models.Person.

In the View content list, select Details.

Note
Leave the Select master page check box selected.

Click Add.

A view named Delete is added to the project.

In PersonController, replace the Delete action method that handles HTTP GET with the following code:

public ActionResult Delete(int id)
{
    Person p = new Person();
    foreach (Person pn in people)
    {
        if (pn.Id == id)
        {
            p.Name = pn.Name;
            p.Age = pn.Age;
            p.Id = pn.Id;
            p.Phone = pn.Phone;
            p.Email = pn.Email;
        }
    }

    return View(p);
}

Replace the Delete action method that handles HTTP POST with the following code:

<HttpPost()> _
Function Delete(ByVal p As Person) As ActionResult
    For Each pn As Person In people
        If (pn.Id = p.Id) Then
            people.Remove(pn)
            Exit For
        End If
    Next

    Return RedirectToAction("Index")
End Function

Save the files.

Open or switch to PersonController in the editor and locate the Edit action method that handles HTTP GET.

Replace the Edit action method with the following code:

public ActionResult Edit(int id)
{
    Person p = new Person();
    foreach (Person pn in people)
    {
        if (pn.Id == id)
        {
            p.Name = pn.Name;
            p.Age = pn.Age;
            p.Id = pn.Id;
            p.Phone = pn.Phone;
            p.Email = pn.Email;
        }
    }

    return View(p);
}

Right-click inside the Edit action method, click Add View.

In the View name box, enter Edit.

Select the Create a strongly-typed view check box.

In the View data class list, select MvcDataViews.Models.Person.

In the View content list, select Edit.

Leave the Select master page check box selected.

Click Add.

A view named Edit is added to the project.

In PersonController, replace the Edit action method that handles HTTP POST with the following code:

[HttpPost]
public ActionResult Edit(Person p)
{
    if (!ModelState.IsValid)
    {
        return View("Edit", p);
    }

    foreach (Person pn in people)
    {
        if (pn.Id == p.Id)
        {
            pn.Name = p.Name;
            pn.Age = p.Age;
            pn.Id = p.Id;
            pn.Phone = p.Phone;
            pn.Email = p.Email;
        }
    }

    return RedirectToAction("Index");
}

Save and close the files.

In the Home folder, open the Index view.

Add the following markup on the line after the </h2> tag:

<p>
  <%=Html.ActionLink("Open Person List", "Index", "Person") %>
</p>

Save and close the file.

Type CTRL+F5 to start the application.

On the home page, click Open Person List.

Click Create New.

Enter values in the Name, Age, Phone, Email, and Id boxes, and then click Create.

The Index view is displayed and includes the person that you added to the list.

Repeat the previous step several times to enter more people.

In the Index view, click one of the Details links.

The Details view is displayed.

Click Back to List.

Click one of the Edit links.

The Edit view is displayed.

Change the name or age of a person and then click Update.

The Index view is displayed again with the data fields updated.

Click one of the Delete links.

The Delete view is displayed.

Click the Delete button.

The Index view is displayed once more with the selected entry removed.