ASP.NET MVC案例教程—第二篇：第一個頁面
摘要 本文首先一步一步完成Demo的第一個頁面——首頁。然後根據實現過程，說明一下其中用到的與ASP.NET MVC相關的概念與原理。讓第一個頁面跑起來 現在，我們來實現公告系統中的第一個頁面——首頁。它非常簡單，只包括所有公告分類的列表，並且每個列表項是一個超鏈接。其中分類數據是用我們的Mock組件得到的。實現後界面如下：
在開始之前，我們要刪幾個東西。因為默認情況下建立一個MVC項目時裡面包含了幾個示例頁面，我們要做的就是： 1.將Controllers文件夾下所有文件刪除。 2.將Views文件夾下除了Shared文件夾和Web.config外的所有文件刪除，然後將Shared文件夾裡面的文件刪除。 完成以上幾步後，就可以開始實現第一個頁面了。實現控制器 在Controllers文件夾下新建一個文件，類型選擇「MVC Controller Class」，名字命名為HomeController.cs。這就是一個控制器類。然後我們為它編碼，具體代碼如下：HomeController.cs:
1usingSystem;2
usingSystem.Collections.Generic;3
usingSystem.Linq;4
usingSystem.Web;5
usingSystem.Web.Mvc;6
usingSystem.Web.Mvc.Ajax;7
usingMVCDemo.Models;8
usingMVCDemo.Models.Interfaces;9
usingMVCDemo.Models.Entities;10
11
namespaceMVCDemo.Controllers12
{13
publicclassHomeController:Controller14
{15
publicActionResultIndex()16
{17
ICategoryServicecServ=ServiceBuilder.BuildCategoryService();18
ViewData["Categories"]=cServ.GetAll();19
returnView("Index");20
}21
}22
}
直觀看來，這個類不是很複雜。它首先繼承了Controller類。Controller類是ASP.NET MVC框架中提供的一個控制器積累，所有我們自定義的控制器類都要繼承此基類。然後這個類中有一個Index方法，返回值類型是ActionResult。 這裡對其中涉及到的概念簡單解釋一下。首先，控制器類可以說是ASP.NET MVC的核心類，因為它將處理一切請求，並處理所有頁面轉發等表示邏輯，這也是使用了ASP.NET MVC後與傳統ASP.NET應用最大的差別。在傳統模式下，一個用戶請求的url將對應一個aspx文件，而在ASP.NET MVC下，一個用戶請求對應某個控制器類中的一個方法，而這個方法，就叫做一個Action。至於如何對應的，則是通過對url的解析。 例如，在傳統情況下，http://localhost/Default.aspx表示請求網站根目錄下的Default.aspx文件。而現在，url可能變成了這種樣子：http://localhost/Home/Index。這個意思就是，請求名叫HomeController控制器類下的Index方法。一般地，默認情況下，請求url的格式為http://localhost/{ControllerName}/{ActionName}。其中{ControllerName}是控制器類名「Controller」前的部分，{ActionName}就是方法名。 當然，這種映射規則是可以更改的，而且請求Action時也可以傳遞參數，但這些都是後話，以後再慢慢討論。 下面再深入Index方法，看看這個Action都做了什麼。它首先調用了業務邏輯組件（當然，是Mock的），然後將GetAll返回的公告分類數據賦予ViewData["Category"]，最後調用View()方法返回一個ActionResult。ViewData是什麼呢？你可以把他理解成一個關聯數組，它保存需要傳給視圖的數據。而View是Controller類的一個方法，它返回一個ActionResult實例。這樣說可能有點抽象，其實直觀就是將某個視圖（一般就是一個aspx文件）呈現到瀏覽器中。那麼如何知道呈現哪一個視圖呢？默認情況下，View方法會到網站的Views文件夾下的與控制器類同名的文件夾下尋找與Action方法同名的視圖。例如，HomeController的Index方法就會尋找Views/Home/Index.aspx，如果找不到，就會到Shared下尋找，再找不到就報錯了。當然，你也可以給View方法傳遞一個字元串參數，表示視圖名稱。實現視圖 上文說到，當請求http://localhost/Home/Index時，HomeController的Index方法會被調用，而Index方法最後要呈現Views/Home/Index.aspx視圖，所以，我們要在Views文件夾下建立一個Home文件夾，然後再新建一個Index.aspx視圖。如果您使用的是VS2008 SP1，那麼建立視圖非常方便，只要在Home文件夾下右鍵單擊，選Add--->View，然後指定視圖名就可以了。如果不是SP1的，就新建一個Item，類型選擇「MVC View Page」。建立好的視圖其實就是一個aspx頁面，但是其繼承了View。這也是一個基類，所有視圖需要繼承它。 下面給出Index.aspx的代碼：Index.aspx:
1
<%
@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Index.aspx.cs"Inherits="MVCDemo.Views.Home.Index"%>2
<%
@ImportNamespace="MVCDemo.Models.Entities"%>3
4
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">5
6
<htmlxmlns="http://www.w3.org/1999/xhtml">7
<headrunat="server">8
<title></title>9
</head>10
<body>11
<%
List<CategoryInfo>categories=ViewData["Categories"]asList<CategoryInfo>;%>12
<div>13
<h1>MVC公告發布系統</h1>14
<ul>15
<%
foreach(CategoryInfocincategories)16
{17
%>18
<li><%=Html.ActionLink(c.Name,"List/"+c.ID,"Announce")%></li>19
<%
}%>20
</ul>21
</div>22
</body>23
</html>
大約分析一下。剛才說過，Index這個Action最後呈現這個aspx作為視圖，而且ViewData中包含了要給視圖傳遞的數據。在那裡，我們將所有公告類別數據放在ViewData["Categories"]中。這裡可以看到，我們將這些數據取出，並用來呈現頁面。至於那個Html.Action，這裡先不細說。你只要知道，這個方法可以生成一個鏈接，其中第一個參數是鏈接文字，第二個是要鏈接到的url的Action名，第三個是要鏈接到的url的控制器名。關於這些，我們以後細細討論。 運行這個例子，並將請求url定位到Home/Index，就可以看到運行效果。 你可能會發現，不需要指定Home/Index，在輸入根目錄後就直接呈現了這個頁面。其實這是因為在默認的路由配置里，Home和Index是默認的控制器名和Action名。以後我們將會討論路由問題。小結 通過上面的過程，我們第一個ASP.NET MVC頁面已經能呈現出來了。而且不單純只是一個頁面，其中還呈現了業務邏輯組件返回的數據。 也許，您對其中許多地方還有困惑。不要著急，在下一篇中，我們做這個系統的步伐先緩一緩，我將用一整篇文章，詳細介紹一下ASP.NET MVC中許多重要的概念與原理。
推薦閱讀：