一、使用ASP.NET MVC建立應用程式
這篇文章的通過建立一個asp.net mvc應用程式，展示asp.net mvc是個什麼樣子，告訴我們如何構建一個簡單的asp.net mvc應用程式。
如果我們曾使用過asp和asp.net，那我們對asp.net mvc會感到比較熟悉。從頁面外觀上看asp.net mvc比較像asp的程式，並且也很像asp.net傳統的web應用程式。Asp.net mvc提供了多語言功能和.net架構的完整支援。
在這篇文章中我們來體會asp.net mvc應用程式與asp和asp.net 傳統web應用程式的相同與不同之處。
二、工作工作清單程式
為了簡單其見，我們在這裡構建一個簡單的應用程式，這個程式完成了以下功能。
1.顯示工作工作清單
2.建立一項新的工作任務
3.標記工作任務是否已完成
同樣為了簡單其見，這個項目中我們將盡少使用asp.net mvc架構的新特性（如：測試驅動和HTML Helper等）。
三、建立asp.net mvc web應用程式
在VS2008中，單擊“檔案”－“建立項目”，彈出建立項目對話方塊。選擇ASP.NET MVC Web Application，並在項目名稱中寫入TaskList點擊“確定”
《圖1》
在建立asp.net mvc web應用程式時，Visual Studio會彈出提示對話方塊如下，提示我們是否需要建立一個單元測試項目。在這裡我們不想建立單元測試項目，所以我們選擇“No”選項，單擊“確定”按鈕
《圖2》
ASP.NET MVC應用程式具有一系列的標準檔案夾：Models、Views和Controllers。在解決方案管理器中我們可以看到，我們將向這些檔案夾中添加相應的檔案來實現我們的應用程式
當我們使用VS2008建立一個新的ASP.NET MVC應用程式時，會產生一個樣本程式，我們可以把其中的相關的檔案刪掉，再來重新添加我們自己的新檔案。在這裡我們把下在的兩個檔案刪除。
1.Controllers\HomeController.cs
2.Views\Home
四、建立控制器
一般來說在我們構建ASP.NET MVC應用程式的時候，我們是從控制器開始構建的。每個瀏覽器的請求都會被發送給ASP.NET MVC程式中的一個控制器進行處理。控制器包含響應應用程式請求的一系列程式邏輯。（車延祿）
要建立一個控制器我們需要在解決方案中的Controllers檔案夾上右擊，選擇“添加”->“添加新項”。在彈出的視窗中選擇MVC Controller Class模板，並把該控制器檔案命名為“HomeController.cs”，單擊“添加”按鈕。
在這裡我們修改HomeController類，代碼如下所示，這個控制器中包含四個方法Index(), Create(), CreateNew(), and Complete().每個方法對應一個控制動作。
Listing 1 – HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq; using System.Web;
using System.Web.Mvc;
using TaskList.Models;
namespace TaskList.Controllers
{
public class HomeController : Controller
{
// Display a list of tasks
public ActionResult Index()
{
return View();
}
// Display a form for creating a new task
public ActionResult Create()
{
return View();
}
// Add a new task to the database
public ActionResult CreateNew()
{
return RedirectToAction("Index");
}
// Mark a task as complete
public ActionResult Complete()
{
// database logic
return RedirectToAction("Index");
}
}
}
Index() － 顯示所有任務的列表
Create() － 當添加新任務的時候，用來顯示form表單。
CreateNew() － 當添加新任務的表單被提交時被調用，這個控制器的動作實際上是把新的任務添加到資料庫中去了
Complete() － 通過調用它來把一個任務標記為完成。
當然我們還需要向控制器的動作中添加其它邏輯來使程式按照我們的意圖進行工作。
控制器類中對外暴露的公有方法被稱為控制器動作。這裡需要注意的是：控制器的動作對外暴露。任何人都可以在瀏覽器的URL地址欄中入相應的路徑來調用控制器動作，因此當我們不想讓方法被調用的時候，請不要在控制器中添加公有方法。
控制器的動作返回ActionResult型 資料，ActionResult表示動作如何操作。前兩個action（Index()和Create()）中，返回MVC view，第三個和第四個action直接跳轉至其它的action中。
當我們請求Create()控制動作時，返回一個包含建立新任務的表單視圖。當提交表單的時候，調用CreateNew()控制動作，CreateNew()控制動作向資料庫中添加一個新的任務，並重新導向到對Index()控制動作的調用。Index()控制動作返回顯示整個工作清單的view視圖。最後，當我們把一個任務標記為完成的時候，就會調用Complete()動作，更新資料庫。Complete()動作完成更新後重新導向到Index()動作上，更新列表的顯示。（車延祿）
五、建立視圖
視圖包含HTML標記和伺服器發送至瀏覽器的內容。視圖是ASP.NET MVC應用程式中離頁面最近的東西。我們通過建立.aspx檔案來建立視圖
我們一定要把視圖的位置搞清楚。如果我們要為HomeController控制器的Index()動作建立視圖，那我們必須把視圖放在下面的路徑中：
\Views\Home\Index.aspx
如果要為ProductorController控制器的Price()動作建立視圖的話，那視圖的位置必須放在下面的路徑中：
\Views\Product\Price.aspx
一般預設情況下，視圖應當與控制器對應的動作具有相同的名稱。視圖也必須放在與控制器有相同名稱的檔案夾中。
在解決方案管理器中的Views檔案夾上右擊，在右鍵菜單中選擇“添加”－“添加新項”，選擇MVC View Page模板添加一個新視圖。我們建立如下兩個視圖檔案。
\Views\Home\Index.aspx
\Views\Home\Create.aspx
當我們建立完這兩個視圖的時候，在解決方案管理器中顯示如下
《圖3》
視圖可以包含HTML內容處指令碼，Index.aspx視圖將用來顯示所有工作清單。Index.aspx視圖的代碼如下
Listing 2 – Index.aspx
<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="TaskList.Views.Home.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<div>
<h1>My Tasks</h1>
... displaying all tasks
<a href="/Home/Create">Add new Task</a>
</div>
</body>
</html>
Index.aspx視圖當前並沒有顯示任何任務，這裡只是聲明正準備顯示。我們需要添加指令碼在Index.aspx中顯示工作清單
在Index.aspx視圖中包含一個名子為Add new Task的超連結。這個超連結指向路徑“/Home/Create”。當我們點擊這個超連結時HomeController控制類的Create()動作會被觸發。Create()方法返回建立視圖。
Create.aspx視圖包含一個建立任務的表單。Create.aspx代碼如下：
Listing 3 – Create.aspx
<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Create.aspx.cs" Inherits="TaskList.Views.Home.Create" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<div>
<h1>Add New Task</h1>
<form method="post" action="/Home/CreateNew">
<label for="description">Task:</label>
<input type="text" name="description" />
<br />
<input type="submit" value="Add Task" />
</form>
</div>
</body>
</html>
需要注意的是這個form表單的Action提交方向為：
/Home/CreateNew.aspx
這個URL指向HomeController控制器的CreateNew()動作。Form表單資料將被提交到這個Action動作中。
六、建立資料庫
下面我們建立任務資料庫，右擊“App_Data”檔案夾，在右鍵菜單中選擇“添加”－“添加新項”，選擇SqlServer資料範本項，把資料庫命名為TaskListDB.mdf，單擊“添加”按鈕。
在解決方案管理器中，雙擊“TaskListDB.mdf”，在Tables節點上右擊選擇“建立表”功能表項目，開啟資料資料表設計工具，建立如下列：
Id Int 非空
Task Nvarchar(300) 非空
IsCompleted Bit 非空
EntryDate DateTime 非空
第一列Id，有兩個屬性設定，首先要把Id列設為主鍵，然後把Id列設為Identity自增長。。
《圖4》
最後儲存表。把表命名為Tasks
七、建立模型層
MVC模型包含大部分應用程式和資料庫訪問邏輯。通常把MVC應用程式的主要的類放在Models檔案夾中。把視圖層和控制層之外的所有代碼，都應放在Models檔案夾中。（車延祿）
在這裡我們將使用LinQ to SQL與資料庫進行互動。個人喜歡LinQ to SQL，這裡不是必須使用LinQ to SQL編寫ASP.NET MVC程式。只要你喜歡，你可以使用其它的技術，如NHibernate或其它的Entity Framework與資料庫互動
在使用LinQ to SQL前，我們首先要在Models檔案夾中建立LinQ to Sql類。右需Models檔案夾，“添加”－“添加新項”，選擇“LinQ to Sql Classes”模板項，並指定Linq to Sql類為TaskList dbml。單擊“添加”按鈕。完成這些後，顯示OR設計介面。
我們需要建立一個Linq to Sql實體類，來表現我們任務表。從解決方案檔案管理工具中，把任務管理表拖到OR設計器中，這樣就建立了一個名子為Task的Linq to Sql的執行個體類。點擊儲存。
《圖5》
八、向控制方法中添加資料庫邏輯
現在我們有一個資料庫，下面我們就可以修改我們的控制器方法，以便我們對資料庫的檢索和回存操作。HomeController的代碼如下。
Listing 4 – HomeController.vb
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TaskList.Models;
namespace TaskList.Controllers
{
public class HomeController : Controller
{
private TaskListDataContext db = new TaskListDataContext();
// Display a list of tasks
public ActionResult Index()
{
var tasks = from t in db.Tasks orderby t.EntryDate descending select t;
return View(tasks.ToList());
}
// Display a form for creating a new task
public ActionResult Create()
{
return View();
}
// Add a new task to the database
public ActionResult CreateNew(string description)
{
// Add the new task to database
Task newTask = new Task();
newTask.Description = description;
newTask.IsCompleted = false;
newTask.EntryDate = DateTime.Now;
db.Tasks.InsertOnSubmit(newTask);
db.SubmitChanges();
return RedirectToAction("Index");
}
// Mark a task as complete
public ActionResult Complete(int Id)
{
// database logic
var tasks = from t in db.Tasks where t.Id == Id select t;
foreach (Task match in tasks)
match.IsCompleted = true;
db.SubmitChanges();
return RedirectToAction("Index");
}
}
}
HomeController類有一個私人的成員變數db ，這個db成員變數是TaskListDataContext類的執行個體。HomeController類使用db變數操作TaskListDB資料庫。
在Index()操制動作中實現了對任務表中所有記錄的檢索功能，並把工作清單傳輸給Index視圖。
CreateNew()方法中實現了在任務表中插入一條新任務的功能。CreateNew()方法具有一個字串型的參數description，這個參數接收建立新任務的form表單中的description文字框。ASP.NET MVC架構自動把form表單的欄位作為參數傳遞給控制器的動作。（車延祿）
最後，Complete()方法修改了任務表中的IsComplete列的值。當我們標記一項任務已經結束時，會把這項任務的Id代號傳弟給Complete動作，以達到對資料庫的修改目的。
九、Index視圖層的代碼完善
我們還需要做最後一件事情來結束我們的TaskList應用程式。我們需要修改Index 視圖，以便顯示所有的工作清單，並允許我們把任務標記為結束狀態。代碼如下：
Listing 5 – Index.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="TaskList.Views.Home.Index" %>
<%@ Import Namespace="TaskList.Models" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Index</title>
</head>
<body>
<div>
<h1>My Tasks</h1>
<ul>
<% foreach (Task task in (IEnumerable)ViewData.Model) { %>
<li>
<% if (task.IsCompleted) {%>
<del>
<%= task.EntryDate.ToShortDateString() %> -- <%=task.Description%>
</del>
<% } else {%>
<a href="/Home/Complete/<%= task.Id.ToString() %>">Complete</a>
<%= task.EntryDate.ToShortDateString() %> -- <%=task.Description%>
<% }%>
</li>
<% } %>
</ul>
<br />
<br />
<a href="/Home/Create">Add new Task</a>
</div>
</body>
</html>
在Index視圖中包含了C#的foreach迭代遍曆所有的工作清單。工作清單是通過ViewData.Model屬性取得的。一般我們都是通過ViewData來從控制層的動作中向視圖層傳遞資料的。
在迴圈中，我們使用一個條件判斷來檢查每個任務是否已結束。如果已結束，就把任務顯示為一條刪除線(<del></del>是刪除線的功能)。如果任務沒有結果，就把任務顯示為一條超連結。
<a href="/Home/Complete/<%= task.Id.ToString() %>">Complete</a>
需要注意的是，這裡的URL地址中包含有任務Id。這個任務Id被傳給HomeController類的Complete()動作作參數。因此當我們點擊相應的Complete超連結時，會正確更新對應的資料庫記錄
最後Index 視圖顯示如下的介面
《圖6》
十、總結：
這篇文章是為了讓我們對ASP.NET MVC應用程式有一個大體的瞭解，可以從中體會到ASP.NET MVC Web應用程式開發與ASP或ASP.NET非常相似。
在這裡我們只是使用了ASP.NET MVC framework的最基本的功能。以後續的文章中我們將對各個主題（如：控制器，控制器動作，視圖，視圖資料和HTML Helper等）進行深入研究。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
