不用到處找資料，2天掌握Asp.net Mvc 3

 

    最快的學習方法：找到官方的教程，最好是類似Msdn演練或者冠以Step By Step的，跟著做一遍，做的過程中可以拷貝少量教程中的代碼，確保每個步驟、每行代碼含義都能夠明白，中途隨手記錄一下，每個步驟完成後停下來在腦子裡回顧一下。教程做完，基本上該掌握的也就掌握了，當然，也有人簡單的瞭解一些後就希望在小型的項目中開始使用，忽略了學習過程，這實際上更為浪費時間。先系統的學習一下，將會大幅減少開發過程中碰到問題解決問題所需要的時間。

    Asp.net Mvc 3當然也不會例外，官網上兩篇教程，看看ASP.NET MVC Music Store就行。已經有人翻譯為中文版，不過建議還是看原文，翻譯品質不高，原文每篇課程下都有討論。先簡單瀏覽一下，大體上覆蓋範圍比較合適，16個小時以內應能夠做完。以下是我本人實作過程中的零星筆記。

 

       第一課 建立項目 開始時間2月4日14：00 預期30分鐘  14:23結束。

     這一課主要講兩個問題，項目要做什麼：一個音樂市集，換句話說是賣唱片之類的網上商店。功能方面，網民可以按類別或按照演員是誰來查看唱片，加入購物車，並實現類比的支付。管理員能夠添加新的唱片。That's all，這基本上是做典型的小型網上商店的主要需求。

      建立項目的過程很簡單，注意這裡建立的是一個“空的”Asp.net Mvc3的項目，建立完之後可以看看，除了Content目錄下有網站的一些預設的樣式和圖片之外，神馬都沒有。之所以建立這樣空的項目而不是使用項目模版，讓VS協助我們實現基本的首頁、登入、註冊、登出之類的功能，大約是為了讓我們從最底層瞭解代碼和編程方式。

      這裡要注意的要點只有一個：Asp.net Mvc的預設目錄，這些目錄下即使沒有任何東西，也需要建立，一個Mvc應用會在Controller目錄下尋找控制器、會在Views目錄下尋找View，不需要在編程的時候寫完整的路徑。所以這是Asp.net Mvc開發Web應用的約定，簡單的說，這些目錄非有不可。

 

      第二課 控制器 開始時間14:23 預期60分鐘 15：06分結束 中斷4分鐘

      這一課主要講怎樣為應用添加控制器、在瀏覽器中如何訪問相應的控制器裡的相關方法。

    1、控制器是什嗎？實際上是Url，舉例來說，http://localhost:1826/Home/Index，對應HomeController的Index方法，我們在瀏覽器中輸入這個地址，則該方法會執行。看看自動產生的程式碼，這裡一般是返回一個視圖，本課則用一個返回字串的方法取代，這樣執行的時候，網頁上就會顯示這個字串。當然，如果只輸入http://localhost:1826/Home/，則預設的使用Index方法，如果連Home也省略掉輸入http://localhost:1826，則預設的使用Home控制器。這些同樣是約定，沒什麼道理可說，只是為了方便。

     2、控制器的方法名稱約定：只問方法名稱，不問方法的參數和傳回值。上面可以看到，系統產生的index是返回一個View，改成返回字串的Index，運行時照樣能夠找到這個方法。

    3、方法的參數：另外一個控制器StoreController包括三個方法，分別是Index、Browse和Detail，在瀏覽器中輸入http://localhost:1826/Store/Browse?Genre=Disco，為StoreController的Browse方法提供了一個參數：Disco。在瀏覽器中輸入http://localhost:1826/Store/Details/5，則為Details方法的Id提供了一個參數5.不過，你若是http://localhost:1826/Store/Browse/Disco，這樣參數是不能傳到的，原因見4.

    4、返回字串的時候，Browse方法使用了HttpUtility.HtmlEncode，防止js注入攻擊。http://localhost:1826/Store/Browse/Disco這種情況下將不能獲得參數。

string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);

   所以總結一下：控制器和Action、參數三者，是構成網站Url的三個部分，其中若不提供控制器名稱，則預設的使用HomeController，不提供方法名稱則預設的使用Index方法。參數有兩種形式,當接受的參數為字串的時候，要使用HttpUtility.HtmlEncode防範Js注入攻擊。

這裡，可以看看本課最後的總結。

 

第三課 View和ViewModels 15:15分開始 預期100分鐘 16.40結束

本課講解如何添加視圖和ViewModels

1、視圖和控制器的關係：控制器一般推送一個視圖給瀏覽器。前面的Controller中，我們每個Action返回一個字串，瀏覽器顯示該字串。但我們最終仍然還是要自行的產生Html，這就是View的任務。我們並非是在手寫htm，而是夾雜著Razor指令碼，用來訪問伺服器資源。從這個角度來說，部落格園的DUDU版主提及的沒有必要使用Mvc，其理由是站不住腳的。

2、如何添加控制器：在Controller目錄，右鍵，添加控制器即可。

3、如何添加View：我們先將Home的Index方法恢複原狀，即返回ActionResult，同時Return View()，然後在這個方法的代碼上，右鍵，添加視圖。一個名為Index.cshtml的視圖就會建立。

    請注意，這裡Return View()的View構造方法有多個重載，使用預設的構造方法，將導致該控制器在Views\Home\下面尋找與Action也就是這個方法同名的視圖，也就是我們剛剛產生的Index.cshtml。這就是前面提到的目錄路徑和檔案名稱的約定，只是約定而已，目的是讓我們的編程更簡單些。

    index.cshtml這樣的檔案和以前的Aspx沒什麼不同，是夾雜指令碼的檔案，伺服器未來將依據其得到htm、css和js，瀏覽器呈現。

    產生的視圖代碼很簡單，前面的三行是Razor文法的說明，用來指定該視圖在瀏覽器裡顯示時的標題。後面一行則簡單的htm文法，顯示一行文本。

4、修改_Layout.cshtml ，這個是網站公用的模版。在Views\Shared目錄下面。實際上要關注的是，使用@RenderBody()，來呈現各個視圖。我們需要在網站的頂部顯示兩個連結，一個到首頁一個到Store，那麼，先直接在Body這裡Render之前加入

5、調整樣式：直接從http://mvcmusicstore.codeplex.com下載MvcMusicStore-Assets.zip，開啟壓縮包，將包裡的Content目錄拖放到解決方案中。這裡只是覆蓋了site.css並加入了幾個表徵圖，樣式已經由這個項目組先製作好了。現在的網站看起來像模像樣的了。

6、使用Model傳送資訊給View:先在Model裡增加兩個類，Genre用來表達商品的類型，現在我們只需要一個Name屬性。Album類，包括包括一個標題和它屬於那個類型，兩個屬性。

然後，編譯這個項目，讓開發環境知道增加了這兩個類，我們再為StoreController的三個方法增加視圖。

7、最後，Store的index視圖必須能夠轉到Browse視圖，這個通過修改index的Views很容易做到。

到目前為止，我們在頂部有兩個連結，其中Store的index方法包含一個類型列表，點擊這個列表中的每個成員，都進入相應的Browse頁面。

總結一下：如何為控制器的某個Action建立視圖？如何為視圖指定Models？如何在視圖中呈現某個對象或某個集合？

 

第四課 Models和資料訪問 22:08分開始 預期30分鐘  23:35分結束，中斷16+6+3分鐘。其中資料庫問題浪費了一點時間。

這一課的主題很簡單，如何訪問資料庫。

準備工作：

1、建立資料庫：當然，資料庫包括樣本資料，已經準備好，在我們上一課中下載的MvcMusicStore-Assets.zip檔案裡。我們找到Data目錄下的MvcMusicStore-Create.sql，使用它建立資料庫。

2、安裝EFCodeFirst包：安裝Asp.net mvc3同時也安裝了Nuget，可以使用Nuget找到EFCodeFirst包，並安裝。通過這個包，我們可以先寫代碼然後再產生資料庫，當然，現在我們使用的是已存在的資料庫。另外一篇嚮導講解了如何先寫實體類再產生資料庫。

接下來：

1、在Web.Config裡添加連接字串：這個是常規工作，和教程裡不同，是用Sql server,所以連接字串為

<configuration>
  <connectionStrings>
    <add name="MusicStoreEntities"
         connectionString="Data Source=.;Initial Catalog=MvcMusicStore;Integrated Security=True"
         providerName="System.Data.SqlServer" />
  </connectionStrings>

2、在Models中添加一個Context類MusicStoreEntities.cs,這個類繼承於DbContext，包含兩個DbSet屬性分別處理前面的Albums和Genres表格。

只需要這個類無需其他配置，則我們能夠正常的處理資料訪問操作了。

3、修改前面的Album和Genre類，前面只是簡單的描述，現在這兩個類的屬性要和表格對應起來。

4、然後在StoreController中增加一個成員MusicStoreEntities storeDB = new MusicStoreEntities(); 用來訪問資料庫

5、現在試試，修改Store的index方法，返回資料庫中的Genres表格的內容：

var genres = storeDB.Genres.ToList();
return View(genres);

遇到問題：資料庫訪問異常。找到原因MvcMusicStore-Assets.zip中的指令檔不對，直接附加裡面的b資料庫即可。

6、其它的也就簡單了，修改Store的Browse、Details改從資料庫擷取資料，當然，也要修改Browse的視圖

這樣，我們現在在首頁點擊Store，能看到類別列表(Index)。點擊任一類別，能看到該類別的所有商品了(Browse)。

總結：這一節講解我們的Controller如何透過Modes從資料庫中擷取主從資料，當然，用Ado.net等方式也是相同的，和上一課沒什麼不同，區別是資料來源不一而已。

 

第五課 CRUD操作 11:08分開始 預期60分鐘  13:19分結束 中斷12+9分鐘

本課講解：如何增加新的記錄、修改記錄和刪除記錄

1、首先要建立一個StoreManagerController，當然，此時要勾上“為建立、更新、刪除和詳細資料添加操作方法”。由於詳細資料這個對我們沒用，可刪除該方法。

2、此時要加入唱片的“演員”資訊，這包括建立一個演員類Artist，為每張唱片增加Artist屬性，同時在前面的Context中增加一個Artist的DbSet，當然我們也要為StoreController增加一個MusicStoreEntities對象用於訪問資料。

   資料庫已經建好，所以只要Context中的DbSet名稱與表格名相同、屬性名稱與欄位名相同，我們不需要做其他的事情，根據命名規範EF會自動處理這些。我們現在為唱片類增加了一個Genre對象、一個Artist對象，表示該唱片屬於哪個類別和演員是誰，注意這兩個使用Vitual修飾的屬性，它不是對應表格中實際的欄位。我們也為該類增加了一個連結欄位，用於存放唱片的圖片的連結。

3、實現Index方法，並建立視圖，這個要顯示各個唱片，所以Model選擇Album類，視圖要選擇List，VS將幫我們產生列表的代碼，注意自動的將Model設為IEnumerable<MvcMusicStore.Models.Album>。我們修改一下，只顯示唱片的標題、類別和演員，並去掉Detail按鈕。

運行一下，在瀏覽器地址欄輸入http://localhost:1826/StoreManager，可以看到列表。

4、自己建立HtmlHelper方法，防止欄位過長影響Table的布局：我們可以建立一個新目錄Helper，建立一個靜態類，在其中為HtmlHelpers類增加一個擴充方法。

5、如何使用擴充方法：在視圖中引用命名空間即可

6、實現Edit：應該看到Controller中產生了兩個Edit方法，前者是用來顯示該對象的，後者是用來提交編輯結果的。我們實現了Edit的Get方法後，為其建立Edit視圖。

兩種方法：一種是使用添加視圖由Vs自動建立，一種是使用Heml.EditorFor，我們建立好視圖之後修改一下，使用後面一種方法。這樣是為了這個視圖可以重用於Create。

7、模版的命名規範：我們使用HtmlEditFor來編輯某個Model的時候，系統會首先在Views下面尋找EditorTemplates目錄，看下面是否有與Model同名的模版，如果有則使用這個模版，否則建立預設的視圖。

所以檔案夾的名稱和檔案的名稱都是有強制性的約定的。這當然是Asp.net Mvc強調約定大於配置的理念。

8、建立共用的模版：我們在Views的Shared目錄下建立檔案夾EditorTemplates，然後在這個檔案夾添加一個名為AlBum的視圖，並勾上“建立局部視圖”。

  將模版中的Form相關的資訊刪除掉，包括提交按鈕等，表單和提交由使用該模版的視圖處理，這裡的編輯檢視僅僅處理對每個欄位的編輯。

9、現在我們要修改模版，比如類別和演員，這個通過選擇而非輸入來處理。這就意味著我們必須使用ViewBag將所有演員的列表和所有類別的列表傳入。

10、然後實現HttpPost方法，這裡要注意的，是如果提交不成功，兩個下拉框用的列表應重新載入。當然，實際項目開發過程中，至少應在服務端緩衝這兩個列表。

現在就已經能夠編輯並儲存資料了。

 

接下來：實現Create方法，這裡要重用剛剛建立的編輯模版。實現Create的Get方法，添加視圖、改用重用的Edit模版、實現Post方法，這些都照本宣科的做就行了。

12、處理刪除：

這個過程包括Get方法，這實際上是一個確認過程。包括Post方法，這裡需要一個非強型別的視圖告知已經被刪除。

 

總結一下，這一課重點是以下內容：

1、增刪改的Get、Post方法和相應的視圖。

2、如何建立自訂的HtmlHelpers方法，如何使用？

3、如何重用視圖

4、如何處理下拉框，如何使用ViewBag傳送資料？

 

這一課真的頭昏腦脹，時間太長，簽入代碼的時候竟然有舒了一口氣的感覺，教程內容安排太不均衡。

 

第六課 驗證  13:35分開始 預期15分鐘 13:43分結束

對使用者的輸入進行驗證，包括用戶端和服務端兩種情形。本課內容很簡單，直接在Model裡定義驗證規則，不用做任何其他的事情，就能解決基本驗證問題。

 

第七課 Membership 15:30開始 預期40分鐘 16:19分結束

1、建立一個新的Asp.net mvc 3應用，這次是建立Internet應用而非空程式。將這個項目中與Membership相關的Controller、Views和Model都拷貝到MvcMusicStore，同時改變命名空間。

2、使用項目|Asp.net配置，增加一個管理使用者

因為使用Sql Server，這裡需要配置一下，教程裡沒涉及到。

1、首先為我們的資料庫建立Membership相關的表格，運行以下命令即可：

    "C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\"aspnet_regsql.exe

2、我們已經在Web.config的<configuration>節點中添加了連接字串

<configuration>

<connectionStrings>
  <add name="MusicStoreEntities"
       connectionString="Data Source=.;Initial Catalog=MusicStore;Integrated Security=True"
       providerName="System.Data.SqlClient" />
</connectionStrings>

3、將如下內容加入System.Web節點：這些同樣是從internet應用中抄襲過來的

    <authentication mode="Forms">
      <forms loginUrl="~/Account/LogOn" timeout="2880" />
    </authentication>

    <membership>
      <providers>
        <clear/>
        <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="MusicStoreEntities"
             enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
             maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
             applicationName="/" />
      </providers>
    </membership>

    <profile>
      <providers>
        <clear/>
        <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="MusicStoreEntities" applicationName="/" />
      </providers>
    </profile>

    <roleManager enabled="false">
      <providers>
        <clear/>
        <add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="MusicStoreEntities" applicationName="/" />
        <add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" />
      </providers>
    </roleManager>

3、然後點擊解決方案瀏覽器第一行最右邊的Asp.net配置表徵圖，先啟用角色、建立Administrator角色，再建立admin使用者，密碼也設為123456，同時將其角色設為Administrator。

4、檢查一下：

我們在StoreManagerController類前加屬性[Authorize(Roles = "Administrator")]

表示只有管理員角色的使用者才能訪問。

此時再運行，將會出現登入頁面。

總結一下，本課講述如何配置Membership、如何使用角色控制許可權。

 

第八課 購物車和Ajax 16：26分開始  預期80分鐘 17:12分結束。

本課講解如何建立購物車，內容雖多但相對比較簡單。

1、現增加購物車、訂單、訂單明細的實體類，並修改Context類。

2、然後增加一個類ShoppingCart用於處理購物車的商務邏輯，包括加入商品、去掉商品等。

3、添加兩個ViewModel類，分別處理購物車的維護和刪除，這是商務邏輯和視圖溝通的橋樑，我們顯然不願意讓Model遷就View。這實際上也是Wpf和SL中很常見的MVVM模式。View僅與ViewModel打交道，不會理會Model類。一般來說，視圖的每個元素都對應ViewModel相應的屬性。

4、然後繼續Controller-View的過程

5、注意購物車的刪除功能，我們使用Ajax，這樣會直接刪除，也不需要另外的視圖來處理確認刪除的過程。

6、修改Store的Details視圖，我們就能夠一直從類別到商品到明細，然後添加到購物車，同時也能測試一下購物車的刪除功能。

 

第九課 支付和註冊 17:12分開始 預期30分鐘 17：46分結束

匿名使用者也能將商品放進購物車，但如果要支付並確認訂單，則必須登入。

1、購物車和使用者資訊應該關聯起來：在AcountController增加一個私人方法，Logon方法和Register的post方法也要處理

2、增加CheckOutController，為其加上[Authorize]，表示使用者必須登入才能訪問。

3、下一步是增加AddressAndPayment視圖

4、為訂單增加驗證功能，這個在Models裡處理

5、增加支付完成的視圖，注意這裡的Models設為int

6、修改Shared裡的Error視圖

到目前為止，準系統已經完成，從第六課之後因為逐步熟悉了，每課所需時間大幅減少，只是對不太清晰的地方看明白就行了。

 

第十課 最後的完善工作 17:47分開始 預期20分鐘 18:15分結束

 

1、首先是CartSummary，我們定義了Action但沒有定義視圖。這裡我們不用定義強型別的視圖，建立局部視圖，這樣@Html.RenderAction("CartSummary", "ShoppingCart")就能夠在任意地方呈現。

2、然後建立類型列表，在StoreController中增加一個Action，用[ChildActionOnly]修飾，這種情形下我們通常都是呈現局部視圖。

3、然後修改_Layout.cshtml,加入頂部的連結，並加入類別列表。

4、最後修改一下Store的Browse視圖，用圖片而非列表的形式顯示

5、當然，我們需要在首頁顯示銷售量最大的商品，使用者可以快捷的購買

6、終於完成，最後的結果：

 

最後的結論：

1、整個教程耗時536分鐘，接近10個小時。教程中有2到3處問題，不過教程的討論裡基本上都有人解答了。

2、從最終結果來看，開發一般小型應用，所需要的知識本教程基本覆蓋。

3、重用：局部視圖、HtmlHelper擴充方法。

4、資料訪問：EFCodeFirst很簡潔，彷彿繼承了Asp.net mvc的約定大於配置的想法。

5、沒有覆蓋的內容包括：如何上傳檔案並使用無重新整理的方式顯示進度？Chart如何使用？如何處理緩衝？如何分頁？等等，這些都不是太複雜的問題。

6、節後開始的一個小型營銷資料採礦項目，使用Asp.net mvc3,已無大礙。參與開發的成員可以使用本教程快速學習。