Microsoft recently released the ASP.Net Model View Controller framework (MVC). It is currently available as Preview 3 and can be downloaded at http://www.microsoft.com/downloads/details.aspx?FamilyId=92F2A8F0-9243-4697-8F9A-FCF6BC9F66AB&displaylang=en
A new MVC project contains a couple sample views and controllers so you can get an idea of the proper syntax to use.
In this article, we will add a new model, view and controller to an existing MVC project.
1. Open Visual Studio 2008 and create a new MVC project. For information on how to create a new MVC project, see http://www.davidgiard.com/2008/08/18/TheASPNetMVCSampleAppDemystified.aspx
2. Open the Solution Explorer (View | Solution Explorer) and select the Models folder.
3. Add a Model to the project
a. Right-click the Models folder and select Add | Class. The Add New Item dialog displays.
Figure 1
i. At the Name textbox, enter “Customer”.
ii. Click the OK button to create a Customer class.
b. The Customer class opens in the class editor. This class will contain a few public properties that help describe a customer object. Add the following code to the Customer class.
public class Customer
{
public int CustID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string StreetAddress { get; set; }
public string City { get; set; }
public string State { get; set; }
public string PostalCode { get; set; }
} |
4. Add a Controller to the project
a. In the Solution Explorer, right-click the Controllers folder and select Add | New Item. The Add New Item dialog displays.
Figure 2
i. Under Categories, select Visual C#\Web\MVC.
ii. Under Templates, select MVC Controller Class.
iii. In the Name textbox, enter “CustomerController”.
iv. Click the Add button to create the CustomerController class and open it in the class editor.
b. In the CustomerController class, we will create some actions. Each action will instantiate one or more Model objects and display them in a view object.
i. Add the following statement at the top of the CustomerController class.
ii. Add the following private methods to the CustomerController class. For now, we will create customers out of thin air (as if it were that easy). In a real application, we would probably call a web server or query a database to get customers.
#region private methods
private Customer GetCustomer1()
{
var cust1 = new Customer
{
CustID = 1,
FirstName = "David",
LastName = "Giard",
StreetAddress = "123 Main",
City = "Boringville",
State = "MI",
PostalCode = "48108"
};
return cust1;
}
private Customer GetCustomer2()
{
var cust2 = new Customer
{
CustID = 2,
FirstName = "John",
LastName = "Smith",
StreetAddress = "321 Elm",
City = "Nowhere",
State = "OH",
PostalCode = "41001"
};
return cust2;
}
private List<Customer> GetAllCustomers()
{
Customer cust1 = GetCustomer1();
Customer cust2 = GetCustomer2();
List<Customer> allCusts = new List<Customer> {cust1, cust2};
return allCusts;
}
#endregion |
iii. Add some Action method to the CustomerController class. We’ll start with a List action. Paste the following code into CustomerController.cs.
public ActionResult List()
{
var allCustomers = GetAllCustomers();
return View("List", allCustomers);
} |
iv. In the List, we get a list of customers (all 2 of them) and return a view. Unlike the generated code, we explicitly specify which view to return (“List”) and we pass in some extra data (allCustomers) that the view will consume.
5. Add a view to the project.
a. In the Solution Explorer, right-click the Views folder and select Add | New Folder. A new folder appears in the Solution Explorer. Rename this folder to “Customer”.
b. In the Solution Explorer, right-click the Customer folder and select Add | New Item. The Add New Item dialog displays.
i. Under Categories, select Visual C#\Web\MVC.
ii. Under Templates, select MVC View Content Page.
iii. In the Name textbox, enter “List”.
iv. The Select a Master Page dialog displays.
Figure 4
1. Navigate to the Views\Shared folder and select Site.Master.
2. Click the OK button to add this view content page to the project.
c. Add visual elements to the View
i. If it is not already open, open the List view by double-clicking List.aspx in the Solution Explorer. Click the Source tab at the bottom of the editor.
ii. Replace the code in List.aspx with the following
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="TestMVC.Views.Customers.List" %>
<%@ Import Namespace="TestMVC.Views.Customers"%>
<%@ Import Namespace="TestMVC.Models"%>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<table>
<tr>
<td>ID</td>
<td>First</td>
<td>Last</td>
<td>Addr</td>
<td>City</td>
<td>State</td>
<td>ZIP</td>
<td> </td>
</tr>
<% foreach (Customer cust in (List<Customer>)ViewData.Model)
{ %>
<tr>
<td><%=cust.CustID %></td>
<td><%=cust.FirstName%></td>
<td><%=cust.LastName%></td>
<td><%=cust.StreetAddress%></td>
<td><%=cust.City%></td>
<td><%=cust.State%></td>
<td><%=cust.PostalCode%></td>
<td> </td>
</tr>
<% } %>
</table>
</asp:Content> |
The above code displays a list of Customer model objects. In a real-world example, we may choose to have the Customer model derive from a base class and only refer to the base class in the view. This would increase the separation between our view and our model.
6. Test the application
a. Save and compile the solution (Build | Build Solution). Correct any errors you find.
b. Run the solution (Debug | Start Debugging). Depending on the port number used by Casini, it should display in your browser with a URL such as
http://localhost:4152/Home
c. Navigate to the List page by changing the URL to
http://localhost:4152/Customers/List
(Replace the port number if necessary)
d. You should see a list of 2 customers in your browser
Figure 4
e. Set a breakpoint in the List method of CustomerController.cs and refresh the page to step through the code as it executes.
In this article, we created a model, view and controller from scratch and displayed them. You can download the code for this project here.
In the next article, we will use the ID of the URL to specify a single customer.