1. 程式人生 > >從零開始學習ASP.NET MVC 1.0 (一) 開天闢地入門篇

從零開始學習ASP.NET MVC 1.0 (一) 開天闢地入門篇

《從零開始學習ASP.NET MVC 1.0》 文章導航

一.摘要

隨著ASP.NET MVC 1.0版本的正式釋出, 我將本系列文章也更新到了1.0, 對於已經發表的文章我都會根據1.0版本重新編輯. 希望本系列文章能打給大家幫助.

二.前言

ASP.NET MVC是微軟官方提供的開源MVC框架. 在經過了漫長的preview和2個RC版本後, 終於釋出了1.0版本.其實從RC開始ASP.NET MVC的核心程式碼就已經趨於穩定.所以現在開始學習ASP.NET MVC是一個很好的時間點.學習的早,而且不用擔心知識過時.

本系列教程是我在學習ASP.NET MVC時的總結, 比如雖然我學習老趙的視訊教程, 但是因為版本較老, 一般我都要從最新版本上進行知識的校驗與昇華, 然後將最後的精華總結出來寫成文字. 現在還在不斷的學習, 不斷地寫作.希望大家喜歡本系列文章, 我將用精益求精的精神寫本系列文章.

三.Hello ASP.NET MVC

現在開始跟著我一步一步學習ASP.NET MVC.在什麼都不知道之前, 還是讓我們先下載一個ASP.NET MVC程式. 當看到程式執行後, 我的心才會踏實很多.

首先去ASP.NET MVC的官網看看:

這裡我們可以下載ASP.NET MVC的安裝檔案.目前最新版本是1.0,另外我們可以在CodePlex上獲取原始碼:

在官網上下載ASP.NET MVC安裝檔案, 一路回車完成安裝. 啟動VS2008 SP1(不是VS2008?不是SP1?作為一個專業的IT人士,水平可以菜,軟體咱一定要用新的!去找個新版本吧!),點選新建,在Web中可以找到:

image

點選確定即建立了一個預設的MVC專案.同時還會建立一個測試專案. 這些我現在都不懂也不關注, 直接將Web專案中的default.aspx設定為啟動頁, 執行專案, 一個ASP.NET MVC的專案已經執行在我的電腦上了:

image

而且那個Home和About還能點選!雖然現在我什麼都不懂, 不過看著能執行的例項, 心裡就踏實多了!

四.學習MVC的概念

一個ASP.NET頁面通常需要做這些事情:

  1. 獲取一個頁面需要的資料. 
  2. 在頁面的Page_Load(頁面載入)方法中為我們的頁面控制元件繫結資料
  3. 瀏覽器顯示頁面

MVC即Model, View, Controller

Model就是我們1中獲取的網頁需要的資料

Controller就是我們獲取資料,然後將資料繫結到頁面控制元件的這個業務流程.不十分正確但是可以先這樣理解: Controller就是我們的Page_Load方法邏輯.

View就是我們的aspx頁面,注意這是一個不包含後臺程式碼檔案的aspx頁面.(其實帶有.asp.cs檔案也不會有編譯錯誤,但是這樣寫程式碼就違背了MVC的設計初衷)

下面這張圖很好的概括了MVC的作用:

image

一個URL請求, ASP.NET MVC引擎會分析這個URL要使用那個Controller, 這個Controller(實際上真正的方法是Controller的Action)從資料庫或者其他資料來源獲取資料,通常這些資料是一個業務的模型類(即MVC中的Model). Controller將Model物件傳遞給頁面(即MVC中的View),  頁面顯示在瀏覽器上.(這一步是ViewEngine的功能, 我們一般的ASPX頁面使用的是WebForm的ViewEngine,當然也可以替換.)

五.學習例項首頁

簡單的概念也有了.例項也能運行了.現在就是看看這個例項是如何使用ASP.NET MVC的.從首頁下手.

1.尋找入口方法

首頁網站的地址應該是 http://localhost:1847/home/index (1847是埠號,隨機生成,所以會不同), 為什麼地址不是具體的頁面但是最後卻將請求提交給了view/home/Index.aspx 頁面? 很明顯是使用了URL重寫. ASP.NET中叫做UrlRouting,對應的程式集是System.Web.Routing, 開啟專案的Global.asax.cs檔案, 會找到我們建立的頁面重寫規則:

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

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

        }

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

關於Routing的深入瞭解將在以後介紹, 這裡我們完全可以照葫蘆畫瓢, 按照例項新增新的重寫規則.

最後, http://localhost:1847/home/index 就被解析為:

Controller為Home, Action為Index, 沒有id引數.

2.尋找Controller

在Controllers資料夾下我們可以找到HomeController.cs, 這裡使用了一個約定, 就是如果URL中獲取到的Controller名字是Home, 則他的Controller類名就是HomeController. 在URL中的名字後加上”Controller”.

例項中Controller都放在Controllers資料夾, 所以我們可以按照命名約定很容易就可以找到HomeController類

3.尋扎Action

開啟HomeControllers.cs, 發現裡面有兩個方法:

        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

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

其中的Index和About都是Action.這個Action是個什麼東東呢?目前我只知道一個Controller可以包含多個Action, MVC模式中Controller角色的具體實現邏輯都是在Action中的.

因為我們的Action是Index, 所以自然就要呼叫Index()方法.這裡將"Webcome to ASP.NET MVC!", 這裡的Model角色就是這句話, 也就是一個字串物件.

Controller的一個重要作用就是將Model物件傳遞給View,也就是具體的頁面. 傳遞的方法就是將這個字串放到ViewData這個集合物件中, 然後在頁面上也呼叫這個物件獲取資料. 這個ViewData 物件一定是靜態的, 或者至少是和HttpContext物件關聯的, 否則到了View頁面上是不能夠呼叫的.但是也不知道ASP.NET MVC是在什麼時候建立了這個物件.有心深入的一會去原始碼裡找找就能找到答案了.

4.尋找View

Model有了,資料有了, 接下來要跳轉到View去顯示資料了.第一個問題就是如何從Controller中跳到View上? return View() 這句話實現了此功能.其實如果這樣寫大家會更清楚:

        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View("index");
        }

View方法中可以帶一個名字, 這個名字就是View的名字.如果把index改成about,那麼訪問/home/index就會跳轉到about頁!

雖然知道了我們要返回到名稱是"index"的View上, 但是這個View的頁面在哪裡呢?在Web中有一個Views資料夾:

image

這裡面存放的都是View物件, 也就是隻有顯示功能的aspx頁面檔案.但是aspx檔案要遵循約定: Views下面要按照Controller建立資料夾, 比如HomeController就對應Home資料夾, 然後在裡面新增view, 比如index.aspx, 那麼在HomeController中返回到名為Index的View物件實際就會返回Views/Home/Index.aspx頁面.

如果不寫View的名字, 則認為Action的名稱就是View的名稱.

5.頁面展示

最後的工作就是View頁面使用Model資料完整頁面顯示工作, 在index.aspx這個沒有後臺程式碼的View物件中, 通過ViewData物件獲取Model:

<%= Html.Encode(ViewData["Message"]) %>

接下來ViewEngine即頁面引擎會將aspx中的HTML部分以及上面的資料部分和在一起返回給瀏覽器.

關於View物件我注意到此頁面是繼承自System.Web.Mvc.ViewPage而不是直接繼承自System.Web.UI.Page, 而這個ViewData物件就是ViewPage中的一個屬性. 這裡的ViewData一定是頁面級別的,當頁面編譯完畢這個物件就會被登出(HTTP是無狀態的協議,每次請求其實都是生成一個新的ViewPage物件).

六.總結

雖然僅僅是第一篇入門文章, 但是是不是覺得已經會用ASP.NET MVC了? 雖然學習不可以驕傲, 但是可以自豪的是ASP.NET MVC我已經不再陌生, 即使不能駕輕就熟, 偶爾說出來幾個概念,給你解釋解釋啥是MVC, 還是很能嚇唬人的. 在後續文章中,我將對MVC的各種細節做具體的講解.希望大家喜歡本系列文章!