反覆項目 #1 – 建立應用程式 (C#)

由 Microsoft 提供

下載程式碼

在第一個反覆項目中，我們以最簡單的方式建立 Contact Manager。 我們新增對基本資料庫作業的支援：建立、讀取、更新和刪除 (CRUD)。

建置連絡人管理 ASP.NET MVC 應用程式 (VB)

在此系列教學課程中，我們會從頭到尾建置整個連絡人管理應用程式。 Contact Manager 應用程式可讓您儲存連絡人資訊 (姓名、電話號碼和電子郵件地址) 以取得人員名單。

我們會透過多個反覆項目建置應用程式。 每次反覆運算時，我們會逐步改善應用程式。 這種多次反覆運算方法的目標是，讓您能夠瞭解每次變更的原因。

• 反覆項目 #1 – 建立應用程式 在第一個反覆項目中，我們以最簡單的方式建立 Contact Manager。 我們新增對基本資料庫作業的支援：建立、讀取、更新和刪除 (CRUD)。

• 反覆項目 #2 – 美化應用程式外觀。 在這個反覆項目中，我們修改預設 ASP.NET MVC 檢視主版頁面和串聯樣式表，以改善應用程式的外觀。

• 反覆項目 #3 – 新增表單驗證。 在第三個反覆項目中，我們新增基本表單驗證。 我們要防止人員提交未完成表單必填欄位的表單。 我們也驗證電子郵件地址和電話號碼。

• 反覆項目 #4 – 讓應用程式鬆散耦合。 在這個第四個反覆項目中，我們利用好幾種軟體設計模式，更輕鬆地維護和修改 Contact Manager 應用程式。 例如，我們將應用程式重構為使用存放庫模式和相依性插入模式。

• 反覆項目 #5 – 建立單元測試。 在第五個反覆項目中，我們會藉由新增單元測試，更容易維護和修改應用程式。 我們會模擬資料模型類別，並為控制器和驗證邏輯建置單元測試。

• 反覆項目 #6 – 使用測試導向的開發。 在這第六個反覆項目中，我們會先撰寫單元測試，再針對單元測試撰寫程式碼，藉此將新功能新增至應用程式。 在此反覆項目中，我們會新增連絡人群組。

• 反覆項目 #7 – 新增 Ajax 功能性。 在第七個反覆項目中，我們會藉由新增對 Ajax 的支援來改善應用程式的回應性和效能。

此反覆項目

在第一個反覆項目中，我們會建置基本應用程式。 目標是盡可能以最快且最簡單的方式建置 Contact Manager。 在稍後的反覆項目中，我們會改善應用程式的設計。

Contact Manager 應用程式是基本的資料庫驅動應用程式。 您可以使用應用程式來建立新的連絡人、編輯現有的連絡人，以及刪除連絡人。

在此反覆項目中，我們完成以下步驟：

1. ASP.NET MVC 應用程式
2. 建立資料庫來儲存我們的連絡人
3. 使用 Microsoft Entity Framework 為資料庫產生模型類別
4. 建立控制器動作和檢視，以讓我們列出資料庫中的所有連絡人
5. 建立控制器動作和檢視，可讓我們在資料庫中建立新的連絡人
6. 建立控制器動作和檢視，可讓我們編輯資料庫中的現有連絡人
7. 建立控制器動作和檢視，可讓我們刪除資料庫中的現有連絡人

軟體必要條件

在 ASP.NET MVC 應用程式中，您必須在電腦上安裝 Visual Studio 2008 或 Visual Web Developer 2008 (Visual Web Developer 是免費版的 Visual Studio，不包含 Visual Studio 的所有進階功能)。 您可以從下列位址下載 Visual Studio 2008 試用版或 Visual Web Developer：

https://www.asp.net/downloads/essential/

注意

針對具有 Visual Web Developer 的 ASP.NET MVC 應用程式，您必須安裝 Visual Web Developer Service Pack 1。 如果沒有 Service Pack 1，您就無法建立 Web 應用程式專案。

ASP.NET MVC 架構。 您可從下列位址下載 ASP.NET MVC 架構：

https://www.asp.net/mvc

在本教學課程中，我們會使用 Microsoft Entity Framework 來存取資料庫。 Entity Framework 隨附於 .NET Framework 3.5 Service Pack 1。 您可以從以下位置下載此 Service Pack：

https://www.microsoft.com/download/details.aspx?id=22&desc=dotnet35

除了逐一執行每個下載，您還可以利用 Web 平台安裝程式 (Web PI)。 您可以從以下位址下載 Web PI：

https://www.asp.net/downloads/essential/

ASP.NET MVC 專案

ASP.NET MVC Web 應用程式專案。 啟動 Visual Studio 並選取功能表選項「檔案」、「新專案」。 此時將顯示 [新專案] 對話方塊 (參見圖 1)。 選取 Web 專案類型和 ASP.NET MVC Web 應用程式範本。 將新專案命名為 ContactManager，然後按一下 [確定] 按鈕。

請確定您已從 [新專案] 對話方塊右上方的下拉式清單中選取 .NET Framework 3.5。 否則，不會顯示 ASP.NET MVC Web 應用程式範本。

圖 01：新專案對話方塊 (按一下以檢視完整大小的圖片)

ASP.NET MVC 應用程式，[建立單元測試專案] 對話方塊隨即出現。 您可以使用此對話方塊，指出當您建立 ASP.NET MVC 應用程式時，想要建立單元測試專案並將其新增至您的解決方案。 雖然我們不會在此反覆項目中建置單元測試，但您應該選取 是，建立單元測試專案，因為我們打算在稍後的反覆項目中新增單元測試。 當您第一次建立新的 ASP.NET MVC 專案時，新增測試專案比建立 ASP.NET MVC 專案之後新增測試專案要容易得多。

注意

因為 Visual Web Developer 不支援測試專案，因此在使用 Visual Web Developer 時，您不會取得 [建立單元測試專案] 對話方塊。

圖 02：[建立單元測試專案] 對話方塊 (按一下以檢視完整大小的圖片)

ASP.NET MVC 應用程式會出現在 Visual Studio 方案總管視窗中 (請參閱圖 3)。 如果您沒有看到「方案總管」視窗，則可以透過選取功能表選項「檢視，方案總管」來開啟此視窗。 請注意，方案包含兩個專案：ASP.NET MVC 專案和測試專案。 ASP.NET MVC 專案名為 ContactManager，而測試專案則命名為 ContactManager.Tests。

圖 03：[方案總管] 視窗 (按一下以檢視完整大小的圖片)

刪除專案範例檔案

ASP.NET MVC 專案範本包含控制器和檢視的範例檔案。 在建立新的 ASP.NET MVC 應用程式之前，您應該刪除這些檔案。 您可以在 [方案總管] 視窗中刪除檔案和資料夾，方法是以滑鼠右鍵按下檔案或資料夾，然後選取 [刪除] 功能表選項。

您需要從 ASP.NET MVC 項目中移除下列檔案：

• \Controllers\HomeController.cs

• \Views\Home\About.aspx

• \Views\Home\Index.aspx

而且，您需要從測試專案中刪除下列檔案：

\Controllers\HomeControllerTest.cs

建立資料庫

Contact Manager 應用程式是資料庫驅動 Web 應用程式。 我們使用資料庫來儲存連絡資訊。

ASP.NET 具有任何現代化資料庫的 MVC 架構，包括 Microsoft SQL Server、Oracle、MySQL 和 IBM DB2 資料庫。 在本教學課程中，我們使用 Microsoft SQL Server 資料庫。 當您安裝 Visual Studio 時，會提供安裝 Microsoft SQL Server Express 的選項，這是免費版本的 Microsoft SQL Server 資料庫。

以滑鼠右鍵按一下 [方案總管] 視窗中的 [App_Data] 資料夾，然後選取 [新增，新項目] 功能表選項，以建立新的資料庫。 在 [新增新項目] 對話方塊中，選取 [資料] 類別和 [SQL Server 資料庫] 範本 (請參閱圖 4)。 將新的資料庫命名為 ContactManagerDB.mdf，然後按一下 [確定] 按鈕。

圖 04：建立新 Microsoft SQL Server 資料庫 (按一下以檢視完整大小的圖片)

建立新資料庫之後，資料庫會出現在 [方案總管] 視窗中的 [App_Data] 資料夾中。 按兩下 ContactManager.mdf 檔案，開啟 [伺服器總管] 視窗並連線到資料庫。

注意

在 Microsoft Visual Web Developer 中，[伺服器總管] 視窗稱為 [資料庫總管] 視窗。

您可以使用 [伺服器總管] 視窗來建立新的資料庫物件，例如資料庫資料表、檢視表、觸發程序和預存程序。 以右鍵按一下 [資料表] 資料夾，然後選擇取能表選項 [新增新資料表]。 資料庫資料表設計工具隨即出現 (請參閱圖 5)。

圖 05：資料庫資料表設計工具 (按一下以檢視完整大小的圖片)

我們需要建立包含下列資料行的資料表：

資料行名稱	資料類型	允許 Null
Id	int	false
FirstName	nvarchar(50)	false
LastName	nvarchar(50)	false
電話	nvarchar(50)	false
電子郵件	nvarchar(255)	false

第一個資料行 Id 行是特殊的。 您必須將 [識別碼] 資料行標示為 [識別] 資料行和 [主鍵] 資料行。 您可以藉由展開 [資料行屬性] 來指出資料行是 [識別] 資料行，然後向下捲動至 [識別規格] 屬性。 將 [是識別碼] Is Identity 的屬性值變更為 [是]。

您可以選取資料行，然後按一下具有索引鍵圖示的按鈕，將資料行標示為主鍵資料行。 在資料行標示為主鍵資料行之後，資料行旁邊會出現索引鍵的圖示 (請參閱圖 6)。

建立資料表之後，按一下 [儲存] 按鈕 (具有軟碟圖示的按鈕)，以儲存新的資料表。 為您的新資料表命名 Contacts。

建立 Contacts 資料庫資料表之後，您應該將一些記錄新增至資料表。 以滑鼠右鍵按一下 [伺服器總管] 視窗中的 [連絡人] 資料表，然後選取 [顯示資料表資料] 功能表選項。 在出現的方格中輸入一或多個連絡人。

建立資料模型

ASP.NET MVC 應用程式是由模型、檢視和控制器所組成。 首先，我們會建立代表我們在上一節中建立的 Contacts 資料表的 Model 類別。

在本教學課程中，我們使用 Microsoft Entity Framework 自動從資料庫產生模型類別。

注意

ASP.NET MVC 架構不會以任何方式繫結至 Microsoft Entity Framework。 您可以使用 ASP.NET MVC 搭配替代資料庫存取技術，包括 NHibernate、LINQ to SQL 或 ADO.NET。

請遵循下列步驟來建立資料模型類別：

1. 以滑鼠右鍵按一下「方案總管」視窗中的「模型」資料夾，然後選取「新增，新項目」。 「新增新項目」對話方塊隨即出現 (請參閱圖 6)。
2. 選取 [資料] 類別，並選取 [ADO.NET 實體資料模型] 範本。 將您的資料模型命名為 ContactManagerModel.edmx，然後按一下 [新增] 按鈕。 [實體資料模型精靈] 隨即出現 (請參閱圖 7)。
3. 在 [選擇模型內容] 步驟中，選取 [從資料庫產生] (請參閱圖 7)。
4. 在 [選擇您的資料連線] 步驟中，選取 ContactManagerDB.mdf 資料庫，然後輸入實體連線設定的 ContactManagerDBEntities 名稱 (請參閱圖 8)。
5. 在 [選擇您的資料庫物件] 步驟中，選取標示為資料表的核取方塊 (請參閱圖 9)。 資料模型會包含資料庫中包含的所有資料表 (只有一個資料表是 Contacts 資料表)。 輸入命名空間 Models。 按一下 [完成] 按鈕完成精靈。

圖 06：[新增新項目] 對話方塊 (按一下以檢視完整大小的圖片)

圖 07：選擇模型內容 (按一下以檢視完整大小的圖片)

圖 08：選擇您的資料連線 (按一下以檢視完整大小的圖片)

圖 09：選擇您的資料庫物件 (按一下以檢視完整大小的圖片)

完成 [實體資料模型精靈] 後，[實體資料模型設計工具] 隨即出現。 設計工具會顯示對應至每個要建立模型之資料表的類別。 您應該會看到一個名為 Contacts 的類別。

實體資料模型精靈會根據資料庫資料表名稱產生類別名稱。 您幾乎一律需要變更精靈所產生的類別名稱。 以滑鼠右鍵按一下設計工具中的 [連絡人] 類別，然後選取 [重新命名] 功能表選項。 將類別的名稱從 Contacts (複數) 變更為 Contact (單數)。 變更類別名稱之後，類別應該會顯示為圖 10。

圖 10：連絡人類別 (按一下以檢視完整大小的圖片)

此時，我們已建立資料庫模型。 我們可以使用 Contact 類別來代表資料庫中的特定連絡人記錄。

建立主控制器

下一個步驟是建立主控制器。 主控制器是 ASP.NET MVC 應用程式中叫用的預設控制器。

以滑鼠右鍵按一下 [方案總管] 視窗中的 [控制器] 資料夾，然後選取功能表選項 [新增，控制器] 來建立主控制器類別 (請參閱圖 11)。 請注意標示為 [建立]、[更新] 和 [詳細資料] 案例的 [新增動作方法] 核取方塊。 按一下 [新增] 按鈕之前，請確定已核取此核取方塊。

圖 11：新增主控制器 (按一下以檢視完整大小的圖片)

當您建立主控制器時，您會在清單 1 中取得類別。

清單 1 – Controllers\HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace ContactManager.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

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

        //
        // GET: /Home/Details/5

        public ActionResult Details(int id)
        {
            return View();
        }

        //
        // GET: /Home/Create

        public ActionResult Create()
        {
            return View();
        } 

        //
        // POST: /Home/Create

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /Home/Edit/5
 
        public ActionResult Edit(int id)
        {
            return View();
        }

        //
        // POST: /Home/Edit/5

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

列出連絡人

為了在 Contacts 資料庫資料表中顯示記錄，我們需要建立 Index() 動作和索引檢視。

主控制器已經包含 Index() 動作。 我們需要修改此方法，使其看起來像清單 2。

清單 2 – Controllers\HomeController.cs

public class HomeController : Controller
{

    private ContactManagerDBEntities _entities = new ContactManagerDBEntities();

    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View(_entities.ContactSet.ToList());
    }
…

請注意，清單 2 中的 Home 控制器類別包含名為 _entities 的私人欄位。 [_entities] 欄位代表來自資料模型的實體。 我們使用 [_entities] 欄位與資料庫通訊。

Index() 方法會傳回一個檢視，代表 Contacts 資料庫資料表中的所有連絡人。 表達式 _entities.ContactSet.ToList() 會傳回連絡人清單做為通用清單。

既然我們已建立索引控制器，接下來我們需要建立索引檢視。 建立索引檢視之前，請先選取 [建置，建置方案] 功能表選項來編譯您的應用程式。 您一律應該先編譯專案，再新增檢視，才能在 [新增檢視] 對話方塊中顯示模型類別清單。

您可以用滑鼠右鍵按下 Index() 方法來建立索引檢視，然後選取 [新增檢視] 功能表選項 (請參閱圖 12)。 選取此功能表選項會開啟 [新增檢視] 對話方塊 (參見圖 13)。

圖 12：新增 [索引] 檢視 (按一下以檢視完整大小的圖片)

在 [新增檢視] 對話方塊中，勾選標示為 [建立強型別檢視] 核取方塊。 選取 View 資料類別 ContactManager.Models.Contact 和 [檢視內容清單]。 選取這些選項會產生顯示連絡人記錄清單的檢視。

圖 13：[新增檢視] 對話方塊 (按一下以檢視完整大小的圖片)

當您按一下 [新增 ] 按鈕之後，就會產生清單 3 中的索引檢視。 請注意出現在檔案頂端的 <%@ Page %> 指示詞。 索引檢視繼承自 ViewPage<IEnumerable<ContactManager.Models.Contact>> 類別。 換句話說，檢視中的 Model 類別代表連絡人實體的清單。

Index 檢視的主體包含 foreach 循環，可逐一查看 Model 類別所代表的每個連絡人。 Contact 類別的每個屬性值會顯示在 HTML 資料表內。

清單 3 - Views\Home\Index.aspx (未修訂)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<ContactManager.Models.Contact>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Index</h2>

    <table>
        <tr>
            <th></th>
            <th>
                Id
            </th>
            <th>
                FirstName
            </th>
            <th>
                LastName
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </th>
        </tr>

    <% foreach (var item in Model) { %>
    
        <tr>
            <td>
                <%= Html.ActionLink("Edit", "Edit", new { id=item.Id  }) %> |
                <%= Html.ActionLink("Details", "Details", new { id=item.Id  })%>
            </td>
            <td>
                <%= Html.Encode(item.Id) %>
            </td>
            <td>
                <%= Html.Encode(item.FirstName) %>
            </td>
            <td>
                <%= Html.Encode(item.LastName) %>
            </td>
            <td>
                <%= Html.Encode(item.Phone) %>
            </td>
            <td>
                <%= Html.Encode(item.Email) %>
            </td>
        </tr>
    
    <% } %>

    </table>

    <p>
        <%= Html.ActionLink("Create New", "Create") %>
    </p>

</asp:Content>

我們需要對索引檢視進行一項修改。 因為我們未建立 [詳細資料] 檢視，因此我們可以移除 [詳細數資料] 連結。 從 [索引] 檢視中尋找並移除下列程式碼：

{ id=item.Id })%>

修改索引檢視之後，您可以執行 Contact Manager 應用程式。 選取功能表選項「偵錯」、「開始偵錯」或只需按 F5。 第一次執行應用程式時，您會在圖 14 中取得對話方塊。 選取選項修改 Web.config 檔案以啟用偵錯，然後按一下確定按鈕。

圖 14：啟用偵錯 (按一下以檢視完整大小的圖片)

根據預設，會傳回索引檢視。 此檢視會列出連絡人資料庫資料表中的所有資料 (請參閱圖 15)。

圖 15：索引檢視 (按一下以檢視完整大小的圖片)

請注意，索引檢視包含標籤為檢視底部 [新建] 的連結。 在下一部分中，您將瞭解如何建立新連絡人。

建立新連絡人

若要讓使用者建立新的連絡人，我們需要將兩個 Create() 動作新增至主控制器。 我們需要建立一個 Create() 動作，以傳回 HTML 表單來建立新連絡人。 我們需要建立第二個 Create() 動作，以執行新連絡人的實際資料庫插入。

我們需要新增至主控制器的新 Create() 方法包含在清單 4 中。

清單 4 - Controllers\HomeController.cs (含 Create 方法)

//
// GET: /Home/Create

public ActionResult Create()
{
    return View();
} 

//
// POST: /Home/Create

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate)
{
    if (!ModelState.IsValid)
        return View();

    try
    {
        _entities.AddToContactSet(contactToCreate);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

第一個 Create() 方法可以使用 HTTP GET 叫用，而第二個 Create() 方法只能由 HTTP POST 叫用。 換句話說，只有在張貼 HTML 表單時，才能叫用第二個 Create() 方法。 第一個 Create() 方法只會傳回檢視，其中包含用於建立新連絡人的 HTML 表單。 第二個 Create() 方法更有趣：它會將新的連絡人新增至資料庫。

請注意，第二個 Create() 方法已修改為接受 Contact 類別的執行個體。 從 HTML 表單張貼的表單值會自動由 ASP.NET MVC 架構繫結至此 Contact 類別。 HTML Create 表單中的每個表單欄位都會指派給 Contact 參數的屬性。

請注意，Contact 參數是以 [Bind] 屬性裝飾。 [Bind] 屬性可用來從繫結中排除連絡人識別碼屬性。 因為 Id 屬性代表 Identity 屬性，所以我們不想設定 Id 屬性。

在 Create() 方法的主體中，Entity Framework 是用來將新的 Contact 插入資料庫中。 新的 Contact 會新增至現有的連絡人集，並呼叫 SaveChanges() 方法來將這些變更推送回基礎資料庫。

您可以用滑鼠右鍵按兩個 Create() 方法之一，然後選取功能表選項 [新增檢視]，以產生 HTML 表單來建立新的連絡人 (請參閱圖 16)。

圖 16：新增 [建立] 檢視 (按一下以檢視完整大小的圖片)

在 [新增檢視] 對話方塊中，選取 ContactManager.Models.Contact 類別和檢視內容的 [建立] 選項 (請參閱圖 17)。 當您按一下 [新增] 按鈕時，會自動產生 [建立] 檢視。

圖 17：查看頁面分解 (按一下以檢視全尺寸影像)

[建立] 檢視包含 Contact 類別每個屬性的表單欄位。 [建立] 檢視的程式碼包含在清單 5 中。

清單 5 - Views\Home\Create.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create</h2>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

修改 Create() 方法並新增 [建立] 檢視之後，您可以執行 Contact Manger 應用程式並建立新的連絡人。 按一下 [索引] 檢視中顯示的 [新建] 連結，導覽至 [建立] 檢視。 您應該會看到圖 18 中的檢視。

圖 18：[建立] 檢視 (按一下以檢視完整大小的圖片)

編輯連絡人

新增編輯連絡人記錄的功能與新增建立新連絡人記錄的功能非常類似。 首先，我們需要將兩個新的 Edit 方法新增至主控制器類別。 這些新的 Edit() 方法包含在清單 6 中。

清單 6 - Controllers\HomeController.cs (含 Edit 方法)

//
// GET: /Home/Edit/5

public ActionResult Edit(int id)
{
    var contactToEdit = (from c in _entities.ContactSet
                           where c.Id == id
                           select c).FirstOrDefault();

    return View(contactToEdit);
}

//
// POST: /Home/Edit/5

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(Contact contactToEdit)
{
    if (!ModelState.IsValid)
        return View();

    try
    {
        var originalContact = (from c in _entities.ContactSet
                             where c.Id == contactToEdit.Id
                             select c).FirstOrDefault();
        _entities.ApplyPropertyChanges(originalContact.EntityKey.EntitySetName, contactToEdit);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}
}

第一個 Edit() 方法是由 HTTP GET 作業叫用。 Id 參數會傳遞至這個方法，代表正在編輯之連絡人記錄的識別碼。 Entity Framework 用來擷取符合識別碼的連絡人。傳回包含編輯記錄之 HTML 表單的檢視。

第二個 Edit() 方法會執行資料庫的實際更新。 這個方法接受 Contact 類別的執行個體做為參數。 ASP.NET MVC 架構會自動將 [編輯] 表單欄位繫結至這個類別。 請注意，編輯 Contact 時，您不包含 [Bind] 屬性 (我們需要 Id 屬性的值)。

Entity Framework 可用來將修改過的連絡人儲存至資料庫。 必須先從資料庫擷取原始連絡人。 接下來，呼叫 Entity Framework ApplyPropertyChanges() 方法來記錄連絡人的變更。 最後，會呼叫 Entity Framework SaveChanges() 方法來保存基礎資料庫的變更。

您可以用滑鼠右鍵按一下 Edit() 方法來產生包含編輯表單，然後選取[新增檢視] 功能表選項。 在 [新增檢視] 對話方塊中，選取 ContactManager.Models.Contact 類別和編輯檢視內容 (請參閱圖 19)。

圖 19：新增 [編輯] 檢視 (按一下以檢視完整大小的圖片)

當您按下 [新增] 按鈕時，會自動產生新的 [編輯] 檢視。 產生的 HTML 表單包含對應至 Contact 類別每個屬性的欄位 (請參閱清單 7)。

清單 7 - Views\Home\Edit.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Edit</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Edit</h2>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

刪除連絡人

如果您想要刪除連絡人，則必須將兩個 Delete() 動作新增至主控制器類別。 第一個 Delete() 動作會顯示刪除確認表單。 第二個 Delete() 動作會執行實際的刪除。

注意

稍後，在反覆項目 #7 中，我們會修改 Contact Manager，使其支援一步驟 Ajax 刪除。

這兩個新的 Delete() 方法包含在清單 8 中。

清單 8 - Controllers\HomeController.cs (刪除方法)

//
// GET: /Home/Delete/5

public ActionResult Delete(int id)
{
    var contactToDelete = (from c in _entities.ContactSet
                         where c.Id == id
                         select c).FirstOrDefault();

    return View(contactToDelete);
}

//
// POST: /Home/Delete/5

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(Contact contactToDelete)
{
    try
    {
        var originalContact = (from c in _entities.ContactSet
                               where c.Id == contactToDelete.Id
                               select c).FirstOrDefault();

        _entities.DeleteObject(originalContact);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

第一個 Delete() 方法會傳回確認表單，以便從資料庫刪除連絡人記錄 (請參閱圖20)。 第二個 Delete() 方法會對資料庫執行實際的刪除作業。 從資料庫擷取原始連絡人之後，會呼叫 Entity Framework DeleteObject() 和 SaveChanges() 方法來執行資料庫刪除。

圖 20：刪除確認檢視 (按一下以檢視完整大小的圖片)

我們需要修改索引檢視，使其包含刪除連絡人記錄的連結 (請參閱圖 21)。 您需要將下列程式碼新增至包含 [編輯] 連結的相同資料表資料格：

Html.ActionLink( { id=item.Id }) %>

圖 21：索引檢視與編輯連結 (按一下以檢視完整大小的圖片)

接下來，我們需要建立刪除確認檢視。 以滑鼠右鍵按一下主控制器類別中的 Delete() 方法，然後選取 [新增檢視] 功能表選項。 [新增檢視] 對話方塊隨即出現 (請參閱圖 22)。

與 [清單]、[建立] 和 [編輯檢視] 不同，[新增檢視] 對話方塊不包含建立 [刪除檢視] 的選項。 請改為選取 ContactManager.Models.Contact 資料類別和空白檢視內容。 選取 [空白檢視內容] 選項會要求我們自行建立檢視。

圖 22：刪除確認檢視 (按一下以檢視完整大小的圖片)

刪除檢視的內容包含在清單 9 中。 此檢視包含一個表單，可確認是否應該刪除特定連絡人 (請參閱圖 21)。

清單 9 - Views\Home\Delete.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Delete</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Delete</h2>
    
    <p>
    Are you sure that you want to delete the entry for
    <%= Model.FirstName %> <%= Model.LastName %>?
    </p>

    <% using (Html.BeginForm(new { Id = Model.Id }))
       { %>
       <p> 
            <input type="submit" value="Delete" />
        </p>
    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

變更預設控制器的名稱

這可能會困擾您，用於處理連絡人的控制器類別名稱會命名為 HomeController 類別。 控制器不應該命名為 ContactController？

此問題很容易修正。 首先，我們需要重構主控制器的名稱。 在 Visual Studio Code 編輯器中開啟 HomeController 類別，以滑鼠右鍵按一下類別的名稱，然後選取 [重構，重新命名] 功能表選項。 選取此功能表選項會開啟 [重新命名] 對話方塊。

圖 23：重構控制器名稱 (按一下以檢視完整大小的圖片)

圖 24：使用 [重新命名] 對話方塊 (按一下以檢視完整大小的圖片)

如果您重新命名控制器類別，Visual Studio 也會更新 Views 資料夾中的資料夾名稱。 Visual Studio 會將 \Views\Home 資料夾重新命名為 \Views\Contact 資料夾。

進行這項變更之後，您的應用程式將不再有主控制器。 當您執行應用程式時，您會在圖 25 中取得錯誤頁面。

圖 25：沒有預設控制器 (按一下以檢視完整大小的圖片)

我們需要更新 Global.asax 檔案中的預設路由，以使用連絡人控制器，而不是主控制器。 開啟 Global.asax 檔案，並修改預設路由所使用的預設控制器 (請參閱清單 10)。

清單 10 - Global.asax.cs

using System.Web.Mvc;
using System.Web.Routing;

namespace ContactManager
{
    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default",                                              // Route name
                "{controller}/{action}/{id}",                           // URL with parameters
                new { controller = "Contact", action = "Index", id = "" }  // Parameter defaults
            );

        }

        protected void Application_Start()
        {
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

進行這些變更之後，Contact Manager 將會正確執行。 現在，它會使用 Contact 控制器類別做為預設控制器。

摘要

在第一次反覆項目中，我們會以最快的方式建立基本的 Contact Manager 應用程式。 我們利用 Visual Studio 自動產生控制器和檢視的初始程式碼。 我們也利用 Entity Framework 自動產生資料庫模型類別。

目前，我們可以使用 Contact Manager 應用程式列出、建立、編輯和刪除連絡人記錄。 換句話說，我們可以執行資料庫驅動 Web 應用程式所需的所有基本資料庫作業。

不幸的是，我們的應用程式有一些問題。 首先，我不願承認這一點，Contact Manager 應用程式並不是最有吸引力的應用程式。 它需要一些設計工作。 在下一個反覆項目中，我們將探討如何變更預設檢視主版頁面和階層式樣式表，以改善應用程式的外觀。

其次，我們尚未實作任何表單驗證。 例如，沒有什麼可以阻止您在不輸入任何表單欄位值的情況下提交「建立連絡人表單」。 此外，您可以輸入無效的電話號碼和電子郵件地址。 我們會開始解決反覆項目中的表單驗證問題 #3。

最後，最重要的是，Contact Manager 應用程式的目前反覆項目無法輕易地修改或維護。 例如，資料庫存取邏輯會直接模擬到控制器動作中。 這意味著我們無法在不修改控制器的情況下修改資料存取程式碼。 在稍後的反覆項目中，我們會探索可實作的軟體設計模式，讓 Contact Manager 更具變更彈性。

下一步