[翻譯-ASP.NET MVC]Contact Manager開發之旅之疊代1 - 建立Contact Manager應用

注:為保證可讀性，文中Controller、View、Model、Route、Action等ASP.NET MVC核心單詞均未翻譯。

<a href="http://www.cnblogs.com/024hi/archive/2009/03/17/ASP_NET_MVC_SAMPLE_CONTACT_MANAGER_INDEX.html">ContactManager開發之旅-索引頁</a>

疊代1 - 建立應用程式

在這個系列中，我們将從頭至尾的建立一個Contact Management應用程式。我們可以通過它來管理親戚、朋友、同僚的聯系資訊，如名字、電話号碼、電子郵件位址等等。

我們将通過疊代的方式開發這個應用，并在每次疊代的過程中逐漸的擴充和改善該應用程式。

本次疊代

在這第一次疊代中，我們将用最快最簡單的方式建立起Contanct Manager最基本的應用程式。在接下來的疊代中，我們将逐漸改善應用程式的設計。

Contact Manager是一個基本的資料庫驅動的應用程式。你可以使用它建立新的聯系人，編輯已存在的聯系人亦或者删除這些聯系人。

本次疊代我們将完成如下步驟所述的内容：

建立ASP.NET MVC應用程式。

建立資料庫。

使用AEF建立實體模型。

建立一個controller action以及一個view來列出所有資料庫中存在的聯系人。

同樣，建立controller action以及view向資料庫添加新的聯系人。

建立controller action以及view 實作編輯資料庫中現有的聯系人記錄。

建立controller action以及view用以實作對資料庫中已存在的聯系人的删除操作。

開發環境

我的開發環境是ASP.NET MVC Framework RC2，Visual Studio 2008SP1，SQL2005SP2

具體的安裝方法什麼的這裡就略掉了，前人已經說過太多了。你可以去重典、Q.Lee.Lulu的Blog去看看。

建立ASP.NET MVC 項目

運作VS2008 選擇檔案->新項目。在建立項目（圖1）對話框中選擇項目類型為Web中的ASP.NET MVC Web Application模闆并命名為“ContactManager”。然後點選确認。

圖1

随後将出現建立測試項目對話框（圖2）。當你建立ASP.NET MVC應用程式的時候，你可以通過這個對話框為你的解決方案指定及添加一個測試項目。由于我們打算在接下來的某次疊代中使用單元測試，是以這裡我們點選“是，建立一個單元測試項目”。在ASP.NET MVC項目建立初期建立單元測試要比在該應用建立後再建立單元測試友善得多。

圖2

至此ASP.NET MVC應用程式會出現在你的解決方案資料總管中（圖3）。這時解決方案中應當包含兩個項目：一個名稱為ContactManager的ASP.NET MVC項目及一個叫做ContactManager.Tests的單元測試項目。

圖3

删除項目中的示例檔案

預設的ASP.NET MVC項目模闆中包含了若幹controller及views的示例檔案。在這裡我們應當從項目中删除這些檔案：

\Controllers\HomeController.cs

\Views\Home\About.aspx

\Views\Home\Index.aspx

然後在測試項目中删除如下檔案：

\Controllers\HomeControllerTest.cs

建立資料庫

在Contact Manager這個項目中，我們需要使用資料庫來存儲聯系人資訊。ASP.NET MVC framework可以與很多流行的資料庫協同工作，如Microsoft SQL Server、Oracle、MySQL、IBM DB2等，在本項目中我們将使用Microsoft SQL Server作為資料庫。不知你是否還記得，在安裝Visual Studio時，安裝程式提供了安裝Miscrsoft SQL Server Express的選項。接下來我們就将使用這個免費提供的MS SQL檔案型資料庫。

右鍵點選解決方案浏覽器中的App_Data檔案夾，選擇添加->建立項。在添加新項對話框中選擇類型為資料中的Sql Server資料庫模闆（圖4）。将其命名為ContactManagerDB.mdf并點選确認。

圖4

然後新建立的資料庫就已經出現在解決方案資料總管中的App_Data檔案夾下了。輕按兩下ContactManager.mdf檔案打開伺服器資料總管視窗并連接配接資料庫。

你可以通過伺服器資料總管視窗建立新的資料庫對象，包括表、視圖、觸發器及存儲過程等。右擊“表”檔案夾然後選擇“添加新表”。這時會出現資料庫表設計器。（圖5）

圖5

我們需要按照下表設計資料庫字段

列

資料類型

允許Null

int

false

FirstName

nvarchar(50)

LastName

Phone

nvarchar(255)

第一列，即Id列比較特殊。你需要将其設定為辨別列并将其設定為主鍵。設定為辨別的方法為在列屬性（看圖5下半部分）中将“是辨別”的值更改為“是”。右擊Id列并選擇“設定主鍵”即可将該列設定為主鍵。被辨別為主鍵的列前邊會出現一個鑰匙圖示（圖5）。

完成表的設計以後，點選儲存按鈕儲存這個建立的表并将其命名為“Contacts”

然後你需要為這個表添加一些資料進去。在資料庫資料總管視窗中右擊Contacts表然後選擇“顯示表資料”菜單并在出現的表格中輸入一條或多條資料。

建立資料模型

ASP.NET MVC 應用程式由模型,視圖及控制器組成。我們首先建立一個資料模型來描述上一節建立Contacts表。

在本系列中，我們采用Microsoft ADO.NET Entity Framework(以下稱AEF)基于表結構自動建立模型。

ASP.NET MVC framework并不是和AEF緊密相連的。你大可使用其他的資料庫存儲技術如NHibernate、LINQ to SQL、ADO.NET等。

我們通過以下幾步建立資料模型：

在解決方案資料總管中右擊Models檔案夾，選擇添加->建立項。（圖6）

選擇類型中的資料，然後選擇ADO.NET Entity Data Model模闆。将其命名為“ContactManagerModel.edmx”後點選添加按鈕，而後會出現實體模型向導(圖7)。

選擇模型内容步驟中，我們選擇從資料庫生成（圖7）。

選擇您的資料連接配接步驟中，選擇下拉清單框中的ContactManagerDB.mdf資料庫并将實體連接配接設定命名為“ContactManagerDBEntities”（圖8）。

在選擇資料庫對象步驟中，選中“表”複選框（圖9）。這樣建立的資料模型将會預設包含資料庫中的所有表(當然，現在隻有Contacts這一個表)。在模型命名空間文本框中輸入“Models”。最後點選完成按鈕關閉實體模型向導。

圖6

圖7

圖8

圖9

按照實體模型向導一步步設定完成過後，就可以使用實體資料模型設計器對實體模型進行編輯了。設計器中會顯示根據資料庫中每一個表模型化的對象（類）。這裡你應該看到一個叫做Contacts的類。

實體資料模型向導基于資料庫中表的名稱建立這些模型類。你通常需要更改這些由向導生成的類名。在設計器中右擊Contacts類并選擇重命名.将該類的名稱從Contacts(複數形式)改成Contact(單數形式)。修改後的類應該如圖10所示。

圖10

至此我們已經将資料模型建立完畢。我們可以使用Contact類描述資料庫中特定的聯系記錄。

建立Home Controller

接下來我們開始着手建立Home controller。Home controller是ASP.NET MVC應用程式中預設執行的controller。

要建立Home controller，我們隻需在解決方案資料總管中的Controllers檔案夾上右擊，在彈出的菜單中選擇添加->Controller(圖11)。需要注意的是下面的複選框Add action methods for Create, Update, and Details scenarios.對于這個項目來說，在點選Add按鈕之前需确認他們已經被選中了。

圖11

建立Home controller後，該類會預設添加如下代碼段

聯系人清單

為了顯示資料庫中Contacts表中的聯系人記錄，我們需要建立一個Index() action和一個Index view。

Home controller中已經準備好了Index() action。我們需要修改這個方法至如下代碼所示：

上面的代碼中，Home controller類包含一個叫做_entities的私有字段，它用來與資料庫通信及描述資料模型中的實體。

Index()方法傳回一個展現資料庫中Contacts表中所有聯系人的view。表達式_entities.ContactSet.ToList()傳回一個聯系人的泛型集合。

現在我們已經建立好了Index controller,接下來我們需要建立Index view。在建立Index view之前，請編譯你的應用程式(Ctrl+Shift+B)。為了確定所有的模型類都出現在Add Viwe對話框的清單中，你應該在每次添加一個view之前編譯你的項目。

要建立Index view，請右擊Index()方法，跟着選擇Add View（圖12）

圖12

在Add View對話框中，標明複選框Create a strongly-typed view。標明View data class為ContactManager.Models.Contact及View content為List。通過這些選項IDE将生成一個顯示聯系人記錄清單的view。

圖13

點選Add按鈕後，Index view就被建立完畢了。注意頁首的<%@ Page %>指令，它指定Index view繼承自ViewPage<IEnumerable<ContactManager.Models.Contact>>類。也就是說，view中的Model類即可表現聯系人實體清單。

Index view的主體中包括一個foreach循環，它用來從Model中枚舉出每一個聯系人資訊。每一個Contact類中屬性的值都被顯示在Html表格中。

由于我們并未建立一個Details view，是以需要對此作出一點修改。我們可以删除Details連結，從找到如下代碼中所示的内容，并删除它：

最終view的代碼如下：

完成對Index view的修改後，你便可以按F5運作Contact Manager應用程式了。

當你第一次運作應用程式的時候會出現如圖14所示的對話框。選擇修改Web.config檔案以啟用調試，然後點選确定按鈕。

圖14

運作結果一目了然（圖15），Index view傳回預設的action用以顯示Contacts表中的資料清單。

圖15

注意，Index view底部有一個Create New的連結标簽。在下一節中你将學習到如何建立新的聯系人。

建立新聯系人

為了使使用者可以建立新的聯系人，我們需要向Home controller添加兩個Create() action。其中一個Create() action傳回建立新聯系人的HTML表單，另外一個則用來向資料庫寫入新聯系人的資料。

兩個Create()方法代碼如下

第一個Create()方法會被HTTP GET請求調用，而第二個Create()方法則會被HTTP POST請求調用。也就是說，第二個Create()方法隻會在HTML表單被送出時被調用，而第一個Create()方法隻是簡單傳回一個用于建立新聯系人的Html表單。第二個Create()方法更有趣些：它将新的聯系人添加到資料庫中。

這裡需要注意的是，我們已經将第二個Create()方法修改為接受一個Contact類的執行個體。HTML表單中送出的值都被綁定到這個Contact類。這一切都是ASP.NET MVC framework自動完成的。每一個表單對象都指向一個Contact參數。

另外還需注意的是這裡的Contact參數被[Bind]特性所修飾。這裡[Bind]特性用來将Id屬性從綁定中排除。因為Id屬性是一個自動辨別，我們并不希望設定這個屬性。

在Create()方法中，AEF用來向資料庫中插入新的聯系人資料。新聯系人被添加在已存在的Contacts集中，而SaveChanges()方法調用時則将這些變更反映到資料庫中。

你可以通過右擊任意一個Create()方法然後選擇菜單選項中的Add View，進而為添加新聯系人建立一個HTML表單（圖16）

圖16

在Add View對話框中，為view content(圖17)選擇ContactManager.Models.Contact類以及Create選項。點選Add後，一個Create view就被自動的建立出來了。

圖17

Create view生成的表單中的對象對應每一個Contact類的屬性。代碼如下：

完成Create()方法的修改及Create view的添加後，你就可以運作Contact Manager應用程式并建立新的聯系人了。方法自然是點選Index view中的Create New這個連結。它将頁面導航至如圖18所示的頁面

圖18

編輯聯系人資訊

為項目添加生成編輯聯系人記錄的方法與添加建立聯系人記錄的方法十分相似。首先，我們需要為Home controller類添加兩個Edit()方法，如下：

第一個Edit()方法被HTTP GET操作調用，參數Id為代表将要編輯的聯系人記錄的特定Id。AEF使用Id來比對資料庫中的特定記錄并将其取出，進而傳回一個編輯記錄的HTML表單。

第二個Edit()方法用于與資料庫通信更新記錄。這個方法接受一個Contact類的執行個體作為參數。ASP.NET MVC framework會自動将類中的屬性及值綁定到表單的對象上。與上面建立Create()放法所不同的是，這裡并沒有使用[Bind]特性進行标記，因為我們這裡需要Id屬性的值。

AEF使用更新後的Contact實體更新資料庫。首先，源Contact必須從資料庫中取出，然後AEF的ApplyPropertyChanges()方法被調用進而記錄所有改動。最後AEF的SaveChanges()方法将實際的更新結果反映到資料庫。

你可以通過右擊任意一個Edit()方法然後選擇菜單中的Add View選項。在Add View對話框中選擇ContactManager.Models.Contact及Edit view content(圖19)

圖19

點選Add按鈕後，一個新的Edit view就被自動建立出來了。HTML表單中的表單對象也是根據Contact類中的每個屬性生成的。具體代碼如下:

删除聯系人

如果你希望為應用程式增加删除聯系人的功能，則你需要在Home controller類中添加兩個Delete() action。第一個Delete() action顯示一個确認删除表單，另外一個則執行真正的删除過程。

PS:我們将在疊代7中修改Contact Manager，為其添加基于Ajax的删除功能。

兩個Delete()方法的具體代碼如下:

第一個Delete()方法傳回一個确認從資料庫中删除一條聯系人記錄的的表單（圖20）。第二個Delete()方法則用來切實的從資料庫中删除記錄。源聯系人記錄被從資料庫中取出後，AEF的DeleteObject()及SaveChanges()方法分别被調用，進而從資料庫中删除該聯系人。

圖20

并且，我們需要更改Index view，為其添加一個删除聯系人記錄的連結（圖21）。你需要将如下代碼寫入與Edit連結相同的那個單元格。

圖21

接着，我們需要添加确認删除頁的view。右擊Home controller類中的任意一個Delete()方法，選擇彈出菜單中的Add View選項。此時彈出Add View對話框（圖22）

需要注意的是，與建立List,Create及Edit的對應view不同的是，這個對話框并不包含建立Delete view的選項，我們需要在這裡選擇ContactManager.Models.Contact 及Empty view content。

圖22

為了讓此view作為确認某個特定的聯系人的确認表單，我們需要修改這個view至如下代碼所示。

改變預設Controller的名稱

我們用來處理聯系人資訊的controller類的名稱叫做HomeController，這很有些詞不達意，難道就不能将其命名為ContactConstroller嗎？

這個問題好說。首先我們需要重構Home controller的名稱。在VS的代碼編輯器中打開HomeController類，右擊類名選擇彈出菜單中的重構，重命名（圖23）。

圖23

然後将彈出重命名對話框（圖24）

圖24

如果你重命名了controller類，VS會同時更新View檔案夾下子檔案夾的名稱。即\Views\Home檔案夾被重命名為\Views\Contact。

做好了如上重構後，你的應用程式中的Home controller将不複存在。當應用程度運作時你将會看到圖25所示的錯誤頁面。

圖25

我們需要在Global.asax檔案中将預設route從Home controller修改成Contact controller。打開Global.asax檔案并修改default route節至如下代碼所示：

總結

在本次（也是第一次）疊代中，我們力求簡單快速的建立了Contact Manager應用程式的基本結構。在這個過程中，我們充分的利用了VS強大功能自動的生成controller和view的基本代碼。同時也體會到使用AEF自動建立資料模型的友善與快捷。

現在，我們的Contact Manager應用程式已經具有清單、建立、編輯以及删除聯系人的功能，也就是說我們已經可以駕馭所有的資料庫驅動web應用程式的基本資料操作。

遺憾的是，我們的應用程式還存在一些問題。我不得不承認，我們的Contact Manager應用程式并不是非常具有吸引力--它需要一些設計和修飾。在下一次疊代中，我們将一起通過修改預設view的主機闆頁的CSS體驗提升應用程式表現的過程。

再則，我們還未實作任何的表單驗證功能，比如現在并沒有任何規則限制使用者送出不完全的表單内容。以後我們會逐漸添加對電話号碼以及電子郵件位址的驗證。我們将在疊代3中處理這些問題。

最後，當然也是最重要的：目前的Contact Manager 應用程式的很難修改及維護。如資料庫的存儲邏輯被散布在controller action中。這就意味着我們想要修改資料存儲相關的功能就必須修改controller。在以後的疊代過程中，我們将使用一些設計模式來改善這種情況，似的我們的Contact Manager更具彈性、更易修改。

本文轉自紫色永恒51CTO部落格，原文連結：http://www.cnblogs.com/024hi/archive/2009/03/17/ASP_NET_MVC_SAMPLE_CONTACT_MANAGER_1.html ，如需轉載請自行聯系原作者

[翻譯-ASP.NET MVC]Contact Manager開發之旅之疊代1 - 建立Contact Manager應用

繼續閱讀

Testlink安裝部署之XAMPP

set define off關閉替代變量功能

報錯：'mysql' 不是内部或外部指令，也不是可運作的程式或批處理檔案。

Linxu常用指令技巧彙總

ERROR 1 (HY000): Can't create/write to file '/tmp/#sql_4188_1.MYI' (Errcode: 28)

艱難安裝LDAP,SSL認證

《Linux指令行與Shell腳本程式設計大全第2版.布盧姆》pdf

MySQL的4種隔離級别？出現問題

XX系統實施過程問題總結

無元件上傳圖檔到資料庫中，最完整解決方案

【MySQL資料庫】資料庫索引事務1.索引2.事務

neo4j之cypher使用文檔

NOSQL安全攻擊

mybatis_入門程式Mybatis入門

登入plsql 報錯 the account is locked --使用者被鎖

SequoiaDB巨杉資料庫C++驅動概述