Iteration #1 – Create the Application (C#)
by Microsoft
In the first iteration, we create the Contact Manager in the simplest way possible. We add support for basic database operations: Create, Read, Update, and Delete (CRUD).
Building a Contact Management ASP.NET MVC Application (VB)
In this series of tutorials, we build an entire Contact Management application from start to finish. The Contact Manager application enables you to store contact information - names, phone numbers and email addresses - for a list of people.
We build the application over multiple iterations. With each iteration, we gradually improve the application. The goal of this multiple iteration approach is to enable you to understand the reason for each change.
Iteration #1 - Create the application. In the first iteration, we create the Contact Manager in the simplest way possible. We add support for basic database operations: Create, Read, Update, and Delete (CRUD).
Iteration #2 - Make the application look nice. In this iteration, we improve the appearance of the application by modifying the default ASP.NET MVC view master page and cascading style sheet.
Iteration #3 - Add form validation. In the third iteration, we add basic form validation. We prevent people from submitting a form without completing required form fields. We also validate email addresses and phone numbers.
Iteration #4 - Make the application loosely coupled. In this third iteration, we take advantage of several software design patterns to make it easier to maintain and modify the Contact Manager application. For example, we refactor our application to use the Repository pattern and the Dependency Injection pattern.
Iteration #5 - Create unit tests. In the fifth iteration, we make our application easier to maintain and modify by adding unit tests. We mock our data model classes and build unit tests for our controllers and validation logic.
Iteration #6 - Use test-driven development. In this sixth iteration, we add new functionality to our application by writing unit tests first and writing code against the unit tests. In this iteration, we add contact groups.
Iteration #7 - Add Ajax functionality. In the seventh iteration, we improve the responsiveness and performance of our application by adding support for Ajax.
This Iteration
In this first iteration, we build the basic application. The goal is to build the Contact Manager in the fastest and simplest way possible. In later iterations, we improve the design of the application.
The Contact Manager application is a basic database-driven application. You can use the application to create new contacts, edit existing contacts, and delete contacts.
In this iteration, we complete the following steps:
- ASP.NET MVC application
- Create a database to store our contacts
- Generate a model class for our database with the Microsoft Entity Framework
- Create a controller action and view that enables us to list all of the contacts in the database
- Create controller actions and a view that enables us to create a new contact in the database
- Create controller actions and a view that enables us to edit an existing contact in the database
- Create controller actions and a view that enables us to delete an existing contact in the database
Software Prerequisites
In ASP.NET MVC applications, you must have either Visual Studio 2008 or Visual Web Developer 2008 installed on your computer (Visual Web Developer is a free version of Visual Studio that does not include all of the advanced features of Visual Studio). You can download either the trial version of Visual Studio 2008 or Visual Web Developer from the following address:
https://www.asp.net/downloads/essential/
[!NOTE]
For ASP.NET MVC applications with Visual Web Developer, you must have Visual Web Developer Service Pack 1 installed. Without Service Pack 1, you cannot create Web Application Projects.
ASP.NET MVC framework. You can download the ASP.NET MVC framework from the following address:
In this tutorial, we use the Microsoft Entity Framework to access a database. The Entity Framework is included with .NET Framework 3.5 Service Pack 1. You can download this service pack from the following location:
As an alternative to performing each of these downloads one by one, you can take advantage of the Web Platform Installer (Web PI). You can download the Web PI from the following address:
https://www.asp.net/downloads/essential/
ASP.NET MVC Project
ASP.NET MVC Web Application Project. Launch Visual Studio and select the menu option File, New Project. The New Project dialog appears (see Figure 1). Select the Web project type and the ASP.NET MVC Web Application template. Name your new project ContactManager and click the OK button.
Make sure that you have .NET Framework 3.5 selected from the dropdown list at the top right of the New Project dialog. Otherwise, the ASP.NET MVC Web Application template won t appear.
Figure 01: The New Project dialog(Click to view full-size image)
ASP.NET MVC application, the Create Unit Test Project dialog appears. You can use this dialog to indicate that you want to create and add a unit test project to your solution when you create your ASP.NET MVC application. Although we won t be building unit tests in this iteration, you should select the option Yes, create a unit test project because we plan to add unit tests in a later iteration. Adding a Test project when you first create a new ASP.NET MVC project is much easier than adding a Test project after the ASP.NET MVC project has been created.
[!NOTE]
Because Visual Web Developer does not support Test projects, you do not get the Create Unit Test Project dialog when using Visual Web Developer.
Figure 02: The Create Unit Test Project dialog (Click to view full-size image)
ASP.NET MVC application appears in the Visual Studio Solution Explorer window (see Figure 3). If you don t see the Solution Explorer window then you can open this window by selecting the menu option View, Solution Explorer. Notice that the solution contains two projects: the ASP.NET MVC project and the Test project. The ASP.NET MVC project is named ContactManager and the Test project is named ContactManager.Tests.
Figure 03: The Solution Explorer window (Click to view full-size image)
Deleting the Project Sample Files
The ASP.NET MVC project template includes sample files for controllers and views. Before creating a new ASP.NET MVC application, you should delete these files. You can delete files and folders in the Solution Explorer window by right-clicking a file or folder and selecting the menu option Delete.
You need to delete the following files from the ASP.NET MVC project:
.cs
.aspx
.aspx
And, you need to delete the following file from the Test project:
.cs
Creating the Database
The Contact Manager application is a database-driven web application. We use a database to store the contact information.
The ASP.NET MVC framework with any modern database including Microsoft SQL Server, Oracle, MySQL, and IBM DB2 databases. In this tutorial, we use a Microsoft SQL Server database. When you install Visual Studio, you are provided with the option of installing Microsoft SQL Server Express which is a free version of the Microsoft SQL Server database.
Create a new database by right-clicking the App_Data folder in the Solution Explorer window and selecting the menu option Add, New Item. In the Add New Item dialog, select the Data category and the SQL Server Database template (see Figure 4). Name the new database ContactManagerDB.mdf and click the OK button.
Figure 04: Creating a new Microsoft SQL Server Express database (Click to view full-size image)
After you create the new database, the database appears in the App_Data folder in the Solution Explorer window. Double-click the ContactManager.mdf file to open the Server Explorer window and connect to the database.
[!NOTE]
The Server Explorer window is called the Database Explorer window in the case of Microsoft Visual Web Developer.
You can use the Server Explorer window to create new database objects such as database tables, views, triggers, and stored procedures. Right-click the Tables folder and select the menu option Add New Table. The Database Table Designer appears (see Figure 5).
Figure 05: The Database Table Designer (Click to view full-size image)
We need to create a table that contains the following columns:
| Column Name | Data Type | Allow Nulls |
|---|---|---|
| Id | int | false |
| FirstName | nvarchar(50) | false |
| LastName | nvarchar(50) | false |
| Phone | nvarchar(50) | false |
| nvarchar(255) | false |
The first column, the Id column, is special. You need to mark the Id column as an Identity column and a Primary Key column. You indicate that a column is an Identity column by expanding Column Properites (look at the bottom of Figure 6) and scrolling down to the Identity Specification property. Set the (Is Identity) property to the value Yes.
You mark a column as a Primary Key column by selecting the column and clicking the button with the icon of a key. After a column is marked as a Primary Key column, an icon of a key appears next to the column (see Figure 6).
After you finish creating the table, click the Save button (the button with an icon of a floppy) to save the new table. Give your new table the name Contacts.
After finish creating the Contacts database table, you should add some records to the table. Right-click the Contacts table in the Server Explorer window and select the menu option Show Table Data. Enter one or more contacts in the grid that appears.
Creating the Data Model
The ASP.NET MVC application consists of Models, Views, and Controllers. We start by creating a Model class that represents the Contacts table that we created in the previous section.
In this tutorial, we use the Microsoft Entity Framework to generate a model class from the database automatically.
[!NOTE]
The ASP.NET MVC framework is not tied to the Microsoft Entity Framework in any way. You can use ASP.NET MVC with alternative database access technologies including NHibernate, LINQ to SQL, or ADO.NET.
Follow these steps to create the data model classes:
- Right-click the Models folder in the Solution Explorer window and select Add, New Item. The Add New Item dialog appears (see Figure 6).
- Select the Data category and the ADO.NET Entity Data Model template. Name your data model ContactManagerModel.edmx and click the Add button. The Entity Data Model wizard appears (see Figure 7).
- In the Choose Model Contents step, select Generate from database (see Figure 7).
- In the Choose Your Data Connection step, select the ContactManagerDB.mdf database and enter the name ContactManagerDBEntities for the Entity Connection Settings (see Figure 8).
- In the Choose Your Database Objects step, select the checkbox labeled Tables (see Figure 9). The data model will include all tables contained in your database (there is just one, the Contacts table). Enter the namespace Models. Click the Finish button to complete the wizard.
Figure 06: The Add New Item dialog (Click to view full-size image)
Figure 07: Choose Model Contents (Click to view full-size image)
Figure 08: Choose Your Data Connection (Click to view full-size image)
Figure 09: Choose Your Database Objects (Click to view full-size image)
After you complete the Entity Data Model Wizard, the Entity Data Model Designer appears. The designer displays a class that corresponds to each table being modeled. You should see one class named Contacts.
The Entity Data Model wizard generates class names based on database table names. You almost always need to change the name of the class generated by the wizard. Right-click the Contacts class in the designer and select the menu option Rename. Change the name of the class from Contacts (plural) to Contact (singular). After you change the class name, the class should appear like Figure 10.
Figure 10: The Contact class (Click to view full-size image)
At this point, we have created our database model. We can use the Contact class to represent a particular contact record in our database.
Creating the Home Controller
The next step is to create our Home controller. The Home controller is the default controller invoked in an ASP.NET MVC application.
Create the Home controller class by right-clicking the Controllers folder in the Solution Explorer window and selecting the menu option Add, Controller (see Figure 11). Notice the checkbox labeled Add action methods for Create, Update, and Details scenarios. Make sure that this checkbox is checked before clicking the Add button.
Figure 11: Adding the Home controller (Click to view full-size image)
When you create the Home controller, you get the class in Listing 1.
Listing 1 - Controllers.cs
[!code-csharpMain]
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Web;
5: using System.Web.Mvc;
6: using System.Web.Mvc.Ajax;
7:
8: namespace ContactManager.Controllers
9: {
10: public class HomeController : Controller
11: {
12: //
13: // GET: /Home/
14:
15: public ActionResult Index()
16: {
17: return View();
18: }
19:
20: //
21: // GET: /Home/Details/5
22:
23: public ActionResult Details(int id)
24: {
25: return View();
26: }
27:
28: //
29: // GET: /Home/Create
30:
31: public ActionResult Create()
32: {
33: return View();
34: }
35:
36: //
37: // POST: /Home/Create
38:
39: [AcceptVerbs(HttpVerbs.Post)]
40: public ActionResult Create(FormCollection collection)
41: {
42: try
43: {
44: // TODO: Add insert logic here
45:
46: return RedirectToAction("Index");
47: }
48: catch
49: {
50: return View();
51: }
52: }
53:
54: //
55: // GET: /Home/Edit/5
56:
57: public ActionResult Edit(int id)
58: {
59: return View();
60: }
61:
62: //
63: // POST: /Home/Edit/5
64:
65: [AcceptVerbs(HttpVerbs.Post)]
66: public ActionResult Edit(int id, FormCollection collection)
67: {
68: try
69: {
70: // TODO: Add update logic here
71:
72: return RedirectToAction("Index");
73: }
74: catch
75: {
76: return View();
77: }
78: }
79: }
80: }
Listing the Contacts
In order to display the records in the Contacts database table, we need to create an Index() action and an Index view.
The Home controller already contains an Index() action. We need to modify this method so that it looks like Listing 2.
Listing 2 - Controllers.cs
[!code-csharpMain]
1: public class HomeController : Controller
2: {
3:
4: private ContactManagerDBEntities _entities = new ContactManagerDBEntities();
5:
6: //
7: // GET: /Home/
8:
9: public ActionResult Index()
10: {
11: return View(_entities.ContactSet.ToList());
12: }
13: …
Notice that the Home controller class in Listing 2 contains a private field named _entities. The _entities field represents the entities from the data model. We use the _entities field to communicate with the database.
The Index() method returns a view that represents all of the contacts from the Contacts database table. The expression _entities.ContactSet.ToList() returns the list of contacts as a generic list.
Now that we ve created the Index controller, we next need to create the Index view. Before creating the Index view, compile your application by selecting the menu option Build, Build Solution. You should always compile your project before adding a view in order for the list of model classes to be displayed in the Add View dialog.
You create the Index view by right-clicking the Index() method and selecting the menu option Add View (see Figure 12). Selecting this menu option opens the Add View dialog (see Figure 13).
Figure 12: Adding the Index view (Click to view full-size image)
In the Add View dialog, check the checkbox labeled Create a strongly-typed view. Select the View data class ContactManager.Models.Contact and the View content List. Selecting these options generates a view that displays a list of Contact records.
Figure 13: The Add View dialog (Click to view full-size image)
When you click the Add button, the Index view in Listing 3 is generated. Notice the <%@ Page %> directive that appears at the top of the file. The Index view inherits from the ViewPage<IEnumerable<ContactManager.Models.Contact>> class. In other words, the Model class in the view represents a list of Contact entities.
The body of the Index view contains a foreach loop that iterates through each of the contacts represented by the Model class. The value of each property of the Contact class is displayed within an HTML table.
Listing 3 - Views.aspx (unmodified)
[!code-aspxMain]
1: <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<ContactManager.Models.Contact>>" %>
2:
3: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
4: <title>Index</title>
5: </asp:Content>
6:
7: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
8:
9: <h2>Index</h2>
10:
11: <table>
12: <tr>
13: <th></th>
14: <th>
15: Id
16: </th>
17: <th>
18: FirstName
19: </th>
20: <th>
21: LastName
22: </th>
23: <th>
24: Phone
25: </th>
26: <th>
27: Email
28: </th>
29: </tr>
30:
31: <% foreach (var item in Model) { %>
32:
33: <tr>
34: <td>
35: <%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |
36: <%= Html.ActionLink("Details", "Details", new { id=item.Id })%>
37: </td>
38: <td>
39: <%= Html.Encode(item.Id) %>
40: </td>
41: <td>
42: <%= Html.Encode(item.FirstName) %>
43: </td>
44: <td>
45: <%= Html.Encode(item.LastName) %>
46: </td>
47: <td>
48: <%= Html.Encode(item.Phone) %>
49: </td>
50: <td>
51: <%= Html.Encode(item.Email) %>
52: </td>
53: </tr>
54:
55: <% } %>
56:
57: </table>
58:
59: <p>
60: <%= Html.ActionLink("Create New", "Create") %>
61: </p>
62:
63: </asp:Content>
We need to make one modification to the Index view. Because we are not creating a Details view, we can remove the Details link. Find and remove the following code from the Index view:
{ id=item.Id })%>
After you modify the Index view, you can run the Contact Manager application. Select the menu option Debug, Start Debugging or simply press F5. The first time you run the application, you get the dialog in Figure 14. Select the option Modify the Web.config file to enable debugging and click the OK button.
Figure 14: Enabling debugging (Click to view full-size image)
The Index view is returned by default. This view lists all of the data from the Contacts database table (see Figure 15).
Figure 15: The Index view (Click to view full-size image)
Notice that the Index view includes a link labeled Create New at the bottom of the view. In the next section, you learn how to create new contacts.
Creating New Contacts
To enable users to create new contacts, we need to add two Create() actions to the Home controller. We need to create one Create() action that returns an HTML form for creating a new contact. We need to create a second Create() action that performs the actual database insert of the new contact.
The new Create() methods that we need to add to the Home controller are contained in Listing 4.
Listing 4 - Controllers.cs (with Create methods)
[!code-csharpMain]
1: //
2: // GET: /Home/Create
3:
4: public ActionResult Create()
5: {
6: return View();
7: }
8:
9: //
10: // POST: /Home/Create
11:
12: [AcceptVerbs(HttpVerbs.Post)]
13: public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate)
14: {
15: if (!ModelState.IsValid)
16: return View();
17:
18: try
19: {
20: _entities.AddToContactSet(contactToCreate);
21: _entities.SaveChanges();
22: return RedirectToAction("Index");
23: }
24: catch
25: {
26: return View();
27: }
28: }
The first Create() method can be invoked with an HTTP GET while the second Create() method can be invoked only by an HTTP POST. In other words, the second Create() method can be invoked only when posting an HTML form. The first Create() method simply returns a view that contains the HTML form for creating a new contact. The second Create() method is much more interesting: it adds the new contact to the database.
Notice that the second Create() method has been modified to accept an instance of the Contact class. The form values posted from the HTML form are bound to this Contact class by the ASP.NET MVC framework automatically. Each form field from the HTML Create form is assigned to a property of the Contact parameter.
Notice that the Contact parameter is decorated with a [Bind] attribute. The [Bind] attribute is used to exclude the Contact Id property from binding. Because the Id property represents an Identity property, we don t want to set the Id property.
In the body of the Create() method, the Entity Framework is used to insert the new Contact into the database. The new Contact is added to the existing set of Contacts and the SaveChanges() method is called to push these changes back to the underlying database.
You can generate an HTML form for creating new Contacts by right-clicking either of the two Create() methods and selecting the menu option Add View (see Figure 16).
Figure 16: Adding the Create view (Click to view full-size image)
In the Add View dialog, select the ContactManager.Models.Contact class and the Create option for view content (see Figure 17). When you click the Add button, a Create view is generated automatically.
Figure 17: Seeing a page explode (Click to view full-size image)
The Create view contains form fields for each of the properties of the Contact class. The code for the Create view is included in Listing 5.
Listing 5 - Views.aspx
[!code-aspxMain]
1: <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>
2:
3: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
4: <title>Create</title>
5: </asp:Content>
6:
7: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
8:
9: <h2>Create</h2>
10:
11: <%= Html.ValidationSummary() %>
12:
13: <% using (Html.BeginForm()) {%>
14:
15: <fieldset>
16: <legend>Fields</legend>
17: <p>
18: <label for="FirstName">FirstName:</label>
19: <%= Html.TextBox("FirstName") %>
20: <%= Html.ValidationMessage("FirstName", "*") %>
21: </p>
22: <p>
23: <label for="LastName">LastName:</label>
24: <%= Html.TextBox("LastName") %>
25: <%= Html.ValidationMessage("LastName", "*") %>
26: </p>
27: <p>
28: <label for="Phone">Phone:</label>
29: <%= Html.TextBox("Phone") %>
30: <%= Html.ValidationMessage("Phone", "*") %>
31: </p>
32: <p>
33: <label for="Email">Email:</label>
34: <%= Html.TextBox("Email") %>
35: <%= Html.ValidationMessage("Email", "*") %>
36: </p>
37: <p>
38: <input type="submit" value="Create" />
39: </p>
40: </fieldset>
41:
42: <% } %>
43:
44: <div>
45: <%=Html.ActionLink("Back to List", "Index") %>
46: </div>
47:
48: </asp:Content>
After you modify the Create() methods and add the Create view, you can run the Contact Manger application and create new contacts. Click the Create New link that appears in the Index view to navigate to the Create view. You should see the view in Figure 18.
Figure 18: The Create View (Click to view full-size image)
Editing Contacts
Adding the functionality for editing a contact record is very similar to adding the functionality for creating new contact records. First, we need to add two new Edit methods to the Home controller class. These new Edit() methods are contained in Listing 6.
Listing 6 - Controllers.cs (with Edit methods)
[!code-csharpMain]
1: //
2: // GET: /Home/Edit/5
3:
4: public ActionResult Edit(int id)
5: {
6: var contactToEdit = (from c in _entities.ContactSet
7: where c.Id == id
8: select c).FirstOrDefault();
9:
10: return View(contactToEdit);
11: }
12:
13: //
14: // POST: /Home/Edit/5
15:
16: [AcceptVerbs(HttpVerbs.Post)]
17: public ActionResult Edit(Contact contactToEdit)
18: {
19: if (!ModelState.IsValid)
20: return View();
21:
22: try
23: {
24: var originalContact = (from c in _entities.ContactSet
25: where c.Id == contactToEdit.Id
26: select c).FirstOrDefault();
27: _entities.ApplyPropertyChanges(originalContact.EntityKey.EntitySetName, contactToEdit);
28: _entities.SaveChanges();
29: return RedirectToAction("Index");
30: }
31: catch
32: {
33: return View();
34: }
35: }
36: }
The first Edit() method is invoked by an HTTP GET operation. An Id parameter is passed to this method which represents the Id of the contact record being edited. The Entity Framework is used to retrieve a contact that matches the Id. A view that contains an HTML form for editing a record is returned.
The second Edit() method performs the actual update to the database. This method accepts an instance of the Contact class as a parameter. The ASP.NET MVC framework binds the form fields from the Edit form to this class automatically. Notice that you don t include the[Bind] attribute when editing a Contact (we need the value of the Id property).
The Entity Framework is used to save the modified Contact to the database. The original Contact must be retrieved from the database first. Next, the Entity Framework ApplyPropertyChanges() method is called to record the changes to the Contact. Finally, the Entity Framework SaveChanges() method is called to persist the changes to the underlying database.
You can generate the view that contains the Edit form by right-clicking the Edit() method and selecting the menu option Add View. In the Add View dialog, select the ContactManager.Models.Contact class and the Edit view content (see Figure 19).
Figure 19: Adding an Edit View (Click to view full-size image)
When you click the Add button, a new Edit view is generated automatically. The HTML form that is generated contains fields that correspond to each of the properties of the Contact class (see Listing 7).
Listing 7 - Views.aspx
[!code-aspxMain]
1: <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>
2:
3: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
4: <title>Edit</title>
5: </asp:Content>
6:
7: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
8:
9: <h2>Edit</h2>
10:
11: <%= Html.ValidationSummary() %>
12:
13: <% using (Html.BeginForm()) {%>
14:
15: <fieldset>
16: <legend>Fields</legend>
17: <p>
18: <label for="FirstName">FirstName:</label>
19: <%= Html.TextBox("FirstName") %>
20: <%= Html.ValidationMessage("FirstName", "*") %>
21: </p>
22: <p>
23: <label for="LastName">LastName:</label>
24: <%= Html.TextBox("LastName") %>
25: <%= Html.ValidationMessage("LastName", "*") %>
26: </p>
27: <p>
28: <label for="Phone">Phone:</label>
29: <%= Html.TextBox("Phone") %>
30: <%= Html.ValidationMessage("Phone", "*") %>
31: </p>
32: <p>
33: <label for="Email">Email:</label>
34: <%= Html.TextBox("Email") %>
35: <%= Html.ValidationMessage("Email", "*") %>
36: </p>
37: <p>
38: <input type="submit" value="Save" />
39: </p>
40: </fieldset>
41:
42: <% } %>
43:
44: <div>
45: <%=Html.ActionLink("Back to List", "Index") %>
46: </div>
47:
48: </asp:Content>
Deleting Contacts
If you want to delete contacts then you need to add two Delete() actions to the Home controller class. The first Delete() action displays a delete confirmation form. The second Delete() action performs the actual delete.
[!NOTE]
Later, in Iteration #7, we modify the Contact Manager so that it supports a one step Ajax delete.
The two new Delete() methods are contained in Listing 8.
Listing 8 - Controllers.cs (Delete methods)
[!code-csharpMain]
1: //
2: // GET: /Home/Delete/5
3:
4: public ActionResult Delete(int id)
5: {
6: var contactToDelete = (from c in _entities.ContactSet
7: where c.Id == id
8: select c).FirstOrDefault();
9:
10: return View(contactToDelete);
11: }
12:
13: //
14: // POST: /Home/Delete/5
15:
16: [AcceptVerbs(HttpVerbs.Post)]
17: public ActionResult Delete(Contact contactToDelete)
18: {
19: try
20: {
21: var originalContact = (from c in _entities.ContactSet
22: where c.Id == contactToDelete.Id
23: select c).FirstOrDefault();
24:
25: _entities.DeleteObject(originalContact);
26: _entities.SaveChanges();
27: return RedirectToAction("Index");
28: }
29: catch
30: {
31: return View();
32: }
33: }
The first Delete() method returns a confirmation form for deleting a contact record from the database (see Figure20). The second Delete() method performs the actual delete operation against the database. After the original contact has been retrieved from the database, the Entity Framework DeleteObject() and SaveChanges() methods are called to perform the database delete.
Figure 20: The delete confirmation view (Click to view full-size image)
We need to modify the Index view so that it contains a link for deleting contact records (see Figure 21). You need to add the following code to the same table cell that contains the Edit link:
Html.ActionLink( { id=item.Id }) %>
Figure 21: Index view with Edit link (Click to view full-size image)
Next, we need to create the delete confirmation view. Right-click the Delete() method in the Home controller class and select the menu option Add View. The Add View dialog appears (see Figure 22).
Unlike in the case of the List, Create, and Edit views, the Add View dialog does not contain an option to create a Delete view. Instead, select the ContactManager.Models.Contact data class and the Empty view content. Selecting the Empty view content option will require us to create the view ourselves.
Figure 22: Adding the delete confirmation view (Click to view full-size image)
The content of the Delete view is contained in Listing 9. This view contains a form that confirms whether or not a particular contact should be deleted (see Figure 21).
Listing 9 - Views.aspx
[!code-aspxMain]
1: <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>
2:
3: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
4: <title>Delete</title>
5: </asp:Content>
6:
7: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
8:
9: <h2>Delete</h2>
10:
11: <p>
12: Are you sure that you want to delete the entry for
13: <%= Model.FirstName %> <%= Model.LastName %>?
14: </p>
15:
16: <% using (Html.BeginForm(new { Id = Model.Id }))
17: { %>
18: <p>
19: <input type="submit" value="Delete" />
20: </p>
21: <% } %>
22:
23: <div>
24: <%=Html.ActionLink("Back to List", "Index") %>
25: </div>
26:
27: </asp:Content>
Changing the Name of the Default Controller
It might bother you that the name of our controller class for working with contacts is named the HomeController class. Shouldn t the controller be named ContactController?
This issue is easy enough to fix. First, we need to refactor the name of the Home controller. Open the HomeController class in the Visual Studio Code Editor, right click the name of the class and select the menu option Refactor, Rename. Selecting this menu option opens the Rename dialog.
Figure 23: Refactoring a controller name (Click to view full-size image)
Figure 24: Using the Rename dialog (Click to view full-size image)
If you rename your controller class, Visual Studio will update the name of the folder in the Views folder as well. Visual Studio will rename the folder to the folder.
After you make this change, your application will no longer have a Home controller. When you run your application, you’ll get the error page in Figure 25.
Figure 25: No default controller (Click to view full-size image)
We need to update the default route in the Global.asax file to use the Contact controller instead of the Home controller. Open the Global.asax file and modify the default controller used by the default route (see Listing 10).
Listing 10 - Global.asax.cs
[!code-csharpMain]
1: using System.Web.Mvc;
2: using System.Web.Routing;
3:
4: namespace ContactManager
5: {
6: public class MvcApplication : System.Web.HttpApplication
7: {
8: public static void RegisterRoutes(RouteCollection routes)
9: {
10: routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
11:
12: routes.MapRoute(
13: "Default", // Route name
14: "{controller}/{action}/{id}", // URL with parameters
15: new { controller = "Contact", action = "Index", id = "" } // Parameter defaults
16: );
17:
18: }
19:
20: protected void Application_Start()
21: {
22: RegisterRoutes(RouteTable.Routes);
23: }
24: }
25: }
After you make these changes, the Contact Manager will run correctly. Now, it will use the Contact controller class as the default controller.
Summary
In this first iteration, we created a basic Contact Manager application in the fastest way possible. We took advantage of Visual Studio to generate the initial code for our controllers and views automatically. We also took advantage of the Entity Framework to generate our database model classes automatically.
Currently, we can list, create, edit, and delete contact records with the Contact Manager application. In other words, we can perform all of the basic database operations required by a database-driven web application.
Unfortunately, our application has some problems. First and I hesitate to admit this, the Contact Manager application is not the most attractive application. It needs some design work. In the next iteration, we’ll look at how we can change the default view master page and cascading style sheet to improve the appearance of the application.
Second, we have not implemented any form validation. For example, there is nothing to prevent you from submitting the Create contact form without entering values for any of the form fields. Furthermore, you can enter invalid phone numbers and email addresses. We start to tackle the problem of form validation in iteration #3.
Finally, and most importantly, the current iteration of the Contact Manager application cannot be easily modified or maintained. For example, the database access logic is baked right into the controller actions. This means that we cannot modify our data access code without modifying our controllers. In later iterations, we explore software design patterns that we can implement to make the Contact Manager more resilient to change.
)
|
|