ASP.NET MVC4 IN ACTION學習筆記-第一波

 

ASPNET MVC4 我們GO

--我承認我很懶,但我今天可能能“喵”到一點東西

原著：ASP.NET MVC 4 IN ACTION

本人能力有限，盡量將書中的知識濃縮去講，仔細學過後，然後你再學習其他語言的MVC架構也就大同小異了

ASP.NET MVC相對於WebForm，學完第一章，你會發現瀏覽器地址欄如此簡潔，檔案歸類的如此好維護，

沒有主版頁面，也可以這樣寫出類似模版的功能

本次接觸的東西：

SQLServer Compact （我自己簡稱SSC）
Controller（控制器），它裡面還多個Action（我叫它操作）

View（試圖），我簡稱它“頁面”

Razor（視圖引擎的一種），我簡稱它，一種網頁標籤另一種編程風格，另一種寫法

Route（路由），我討厭它，因為這個太抽象，暫且理解，一個瀏覽器地址欄中輸入URL後，斷行符號，會經過它（路由）處理一下，然後再跳轉，目前暫且理解這樣的一個技術

ViewBag：一個動態類型的一個對象，過會通過一個項目你就會理解它的作用。想現在理解，百度c# dynamic，可以學習一下

(∩_∩) 瞭解 C# 4 中的 Dynamic 關鍵字

1.環境搭建

   本例用VS2012 旗艦版 講解，VS2010可安裝 ASP.NET MVC4外掛程式，瀏覽器選擇 Chrome 23.0.127.1.1版本，後台語言選擇C#

 

 

2.建立檔案夾E:\MyASPNETMVC4\Ch1

   建立項目 GuestInfo
  

    視圖引擎 選擇Razor預設，無需勾選建立單元測試項目，點確定

  

   等待項目的完成…

   完成後,vs2012建立的預設的項目結構如下,那麼暫且,我們就用這個結構稍微做個簡單的增刪改查項目

App_Data:放一些資料庫檔案,XML檔案,或者其他我們項目中需要用到的檔案,ASP.NET運行時能夠識別這個特殊的目錄，所以能夠避免使用者直接存取這個目錄，只有我們的應用程式能夠對這個目錄讀寫

Content:包含了一些當你部署你的項目的時候需要的一些非代碼資源，這裡面通常有圖片檔案和css檔案,預設情況下,包含了一個Site.css樣式表和一個themes檔案夾,我們開啟themes可以看見,我們熟悉的jquery UI庫(做Web開發的都應該知道)

Controller:控制器 是 處理使用者請求,並決定返回哪一個頁面(View)的一個中間者類,在ASPNET MVC中,控制器全部在這個檔案夾裡面,預設有兩個控制器,HomeController(處理Home頁面的請求),AccountController(處理許可權)

Images:放了一些圖片資源

Models:放我們實體類的地方,隨著我們的項目變得越來越大,例如,我們可能會把實體類這個檔案夾中的類移動到一個專門的類庫裡面去,就像三層中的實體層那樣.預設包含了AccountModels.cs這個類

Scripts:包含了一些我們可能用到的一些js檔案

View 目錄:包含了呈現你在項目中使用到的項目介面的一個模版,每一個模版都是用Razor視圖呈現的(cshtml檔案或者vbhtml檔案)，這些檔案可從Controller目錄下的控制器建立，亦可以手動建立，過會，我們將會研究一下，Controller,actions,views之間的關係

Global.asax:當你的項目運行時候,它會初始化一些代碼,比如用代碼註冊路由

Web.config:有時為了確保ASP.NET MVC程式能夠順利的運行,有些配置細節必不可少,我們可以寫在裡面

 

 

按F5 運行項目,出現如下介面,表示開發環境搭建成功!

 

初探 ASPNET MVC4的項目

 --這個項目真無聊,但我會GO下去

2.1 基本概念

     Controller是所有控制器的父類

     ViewBag後面我可以定義任一名稱屬性,因為ViewBag是一個動態資料類型,類似於Javascript的var,運行時,判斷類型,然後建立,C#真他媽 為什麼4.0才出現這種文法

HomeController繼承了Controller的衣缽,擁有了它的一切,連類名的尾碼(suffix)都有了Controller作為標註

每一個存取修飾詞是public,傳回值是ActionResult類型的方法裡面 都 return了一個View(),此方法在Controller這個父類中定義的

現在我們把游標置於方法名稱上,右鍵

其實視圖這個名詞,真難受,叫頁面多好呢,是吧

對了,聰明的你,可能也發現了,視圖是 Razor風格的,尾碼名是cshtml,以前WebForm,每個aspx頁面都有一個aspx.cs後置代碼處理檔案。在ASP.NET中，分為兩部分了，一個就是控制器裡面處理，一個是cshtml裡面寫，用@符號區別，有點像JSP了

 

回到控制器檔案夾,那個啥,HomeController裡面去啦

在這個控制器中,定義了3個action,名字叫Index/Home/Contact

好了重點來了

第一關理解(Browser地址欄變簡潔):

由於這3個Action被定義了在了HomeController控制器(其實就是一個繼承了Controller的類)中,每個Action返回的都是一個檢視類型的,啊~我要瘋了,神啊,原諒我吧,請讓我這樣說行嗎?

每個Action返回的都是一個頁面類型的,我噓~舒服多了,返回一個頁面,return View()

所以你可以在瀏覽器的地址欄上: http://localhost:連接埠號碼/控制器名稱（去掉Controller尾碼後的）/然後ActionResult傳回值類型的方法名，例如：http://localhost:5438/Home/Index，就可以訪問那個 Actions名稱按右鍵->轉到視圖,對應的那個頁面

這裡就是Views/Home/Index.cshtml這個頁面,但是地址欄上是不會這樣顯示的

你可能會問為什麼?

我覺的如果你都能根據這個URL能夠找到它要顯示的頁面，那麼你就懂了

例如，就拿個預設模版來說（HomeController.cs）：

我們在這裡面加一個Action

public ActionResult TestHa() {
    ViewBag.Message = "阿拉只是想測試一下";
    return View();
}

右鍵方法名稱，添加視圖,會彈出一個對話方塊，保持預設，點添加

在Views/Home目錄下產生個一個TestHa.cshtml檔案

這個cshtml的檔案名稱，TestHa就是這個Action的名字啊

而它所在的目錄的名稱，Home，就是對應的Action所在的控制器HomeController去掉Controller尾碼名的名字

再次驗證你的疑問

右鍵Controller檔案夾，添加一個新的控制器，名稱叫GuestbookController.cs

在檔案裡面我們建立一個叫Create的Action

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

右鍵方法名添加視圖,發現多了一個以對應的Action的方法名為檔案名稱的Create.cshtml檔案，而目錄就是Guestbook

其實Action對應的cshtml檔案的名字可以不要跟方法名一樣的，以後講

現在給你一個這樣的URL，你應該可以找到對應的頁面了吧

好了,電腦能識別，主要是Global.asax這個檔案裡面有個RegisterRoutes方法

我們稍微看一下,開啟Global.asax檔案，游標置於RegisterRoutes方法，按F12轉到對應的定義

 

我們看到,這裡定義了兩個entry(入口)

首先，IgnoreRoute告訴架構不要擔心去匹配某些的特殊的URL路徑,在這個例子的意思是

不要去處理任何以.axd結尾的檔案請求，比如說Trace.axd.

第二個，MapRoute定義了URL如何被處理，這個預設的路由配置代碼已經可以幫一部分應用程式完成配置了

，但是以後你可能會因為你的應用程式中會用到一些特殊的URL地址而添加更多的路由來解決這些特殊路由的問題

我們暫時保持預設

我們可以看見，每一個路由都有一個name，url定義,一個可選擇的預設值，有時我們的程式第一次運行時候，沒有任何URl片段，比如Home/Index什麼的。直接一個網域名稱或者測試時候的localhost:連接埠號碼，程式根據這個預設值，就載入預設的頁面了

在default設定裡面,看單詞就知道了 翻譯成URL就是 /Home/Index這個是預設的。id那個參數是可有可無的

正是由於這個預設值

你在地址欄中，假如你的網域名稱是MySite.com

你可以直接輸入http://MySite.com或者輸入http://MySite.com/Home/Index或者http://MySite.com/Home

都可以達到觸發 HomeController類中的Index這個Action，然後載入Views/Home/Index.cshtml的這樣的一個效果

 

關於Route的一個小插曲

url參數   url: "{controller}/{action}/{id}"

很明顯我們看到，都是花括弧{}括起來的，這個預設的url模版是個已經能夠服務很多web請求的一個很通用的路由了,括弧裡面的單詞MVC架構能夠理解的，最常用的就是controller和action了

 

接下來我們來看看有趣的 ViewBag，我個人覺得好玩

回到HomeController.cs，開啟這個檔案

寫個小測試，你就說，哦！騷迪斯來（日語：原來如此）了

在Index這個Action裡面加上一行代碼，      ViewBag.CurrentDate = DateTime.Now;

如果你瞭解過C# 動態類型的話，那就太簡單了，不明白也能瞬間明白

CurrentDate和Message這兩個屬性都不是ViewBag裡面的，所以CurrentDate這個名字，你可以改成任意名字，比如 hahaDate

Message也可以改啊，你當然也可在定義其他幾個變數啊，你放心，稍後會有用的.例如，這裡我們用CurrentDate,一看我們自己知道，他是個DateTime類型的。動態類型，你可以跟js相比較一下，在你寫js的時候，程式不知道是什麼類型的，程式啟動並執行時候，他自己判斷，然後再建立對象，名字就是你定義的那個

定義好了CurrentDate，我們就可以在該Action對應的View中使用這個CurrentDate變數了，然後當然就可以在頁面上顯示這個值了

我們轉到HomeController下的Index這個Action對應的頁面（視圖）-------------（請原諒我，我發誓這是我最後一次寫視圖兩個字）

開啟後如，我們看到，這個一個C#代碼和html標籤混合的頁面，有點類似jsp，php，asp的一貫作風

我們在</hgroup>後面添加以下代碼

<p>目前時間是：@ViewBag.CurrentDate.ToLongDateString()</p>

按F5運行程式，效果如下

我想你大概已經知道ViewBag第一個用法了

在這個cshtml裡面，Asp.NET MVC用@符號 來完成一次Html標籤和C#代碼的一次過渡

在HomeController向我們展示了在MVC應用程式中，控制器和視圖的基本使用,但是僅僅在螢幕顯示一個簡單的文字一點都不有趣

在本章的最後下一個階段，我們將做一個簡單的資料錄入和展示的guestbook項目，作為一個ASP.NET MVC4的入門吧

 

Guestbook ASPNET MVC4 我來了

 --我已經準備好了，開始吧！好興奮

3.1 資料庫，SqlServer Compact

      SSC是微軟向sqlserver家庭中添加的一款關係型資料庫，是一個輕量級的可用於傳統型程式開發，web開發,甚至window phone系列手機應用中用到的資料庫，它不需要安裝，也不用啟動任何服務來協助它運行，以前我們在使用sqlserver的時候，開始都要啟動服務什麼的，例如net start mssqlserver

如果你用過Access資料庫，你可以想象SSC就像Access一樣，不用啟動服務，不用裝任何東西，就能當做儲存我們程式所需要的資料的一個介質

我們可以右擊App_Data檔案夾，添加-》建立項

手動建庫，然後建表，建立欄位，然後供程式使用

在這個例子中，我們用代碼建立資料庫，不手動添加資料庫了

 

3.1 我們開始

  3.1.1 我們建立一個實體，在Models檔案夾裡面

代碼如下

public class GuestbookEntry
{
    public int Id { get; set; }
    public string  name { get; set; }
    public string Message { get; set; }
    public DateTime  DateAdded { get; set; }
}

這四個屬性的名稱最好就是最終資料庫表中的列名，最好對應，過會你就知道了，這裡只是個技巧

我們現在只是通過一個類來表現資料庫中的一張表了

但是怎麼講對象映射到資料庫中的表呢？或者把資料庫中的資料轉換成對象呢

這裡我們需要用ORM工具了，如果ORM不懂，不用太緊張的

在這個例子中，我們將會使用Entity Framework4.1來為我們做這個映射。雖然在.NET平台上有很多ORM工具來讓我們選擇(以後的幾章裡，我們將會看一下NHibernate還有一些的ORM工具),而且EF這個ORM很大，有好幾本書專門來講解它,但是Entity Framework4.1提供了一些簡單的API,我們會用很簡單的方式，利用EF來完成我們的項目的額資料庫訪問。所以不用擔心

在開始使用EF之前,我們需要為我們的應用程式，添加一個DbContext類,在Entity Framework中DbContext類協助我們持久化資料和讀取資料提供了一些抽象方法。

現在我們在Models檔案夾下面添加一個GuestbookContext類，並讓它繼承DbContext，按Shift+Alt+F10快速匯入命名空間

 

   public class GuestbookContext : DbContext
  {
      public GuestbookContext(): base("Guestbook"){}
      public DbSet<GuestbookEntry> Entries { get; set; }

  }
關於Data Access choice(資料訪問的選擇)的一個小插曲

 

      在.NET開發中,在處理資料訪問時候有很多選擇，現在當代的很多應用程式都使用比如Entity Framework或者NHibernate作為ORM工具來處理關係型資料庫，但不是每一個項目都要用到他們,我們可以選擇其他的。

如果你的應用程式比較小，你可能決定不需要用那麼複雜的ORM,在你的項目中使用WebMatrix.Data或者Simple.Data就能滿足你的需要了

WebMatrix.Datashi微軟作為Asp.NET Web頁面處理技術系列產品的一部分，在ASP.NET MVC3發布的時候一起發布的，它提供了一個輕量級的,用純sql語句,DLR的動態類型文法完成資料訪問。Simple.Data提供了一個更簡單的解決方案，它依靠動態查詢文法而不是sql語句。更多的Simple.Data的資訊,你可以在https://github.com/markrendle/Simple.Data找到

 

關於這個繼承了DbContext(依賴於System.Data.Entity命名空間)的類,我們在它的建構函式中，傳遞了一個Guestbook參數，因為我們的資料庫名稱就叫Guestbook.sdf,如果我們不傳參數,EF就會根據類名稱產生一個 GuestbookContext.sdf這樣子的資料庫

這個類還定義了一個DbSet<GuestbookEntry>類型的一個Entries屬性,它扮演者一個向GuestbookEntry表中查詢資料，返回一個擁有對象的一個把資料讀取到記憶體中的一個集合。

在這個基礎上，Entity Framework將會產生合適的sql語句去查詢這張表,並把查詢到的結果轉換成強型別的GuestbookEntry對象,過會我們會查詢這個集合。最後我們需要讓EF和ssc產生通訊

從模型產生資料庫

為了達到這個目的，有很多方法，我們可以在Global.asax.cs檔案裡面的Application_Start手動的添加一些代碼來完成一些工作。這是個特殊的方法，我們的程式啟動並執行時候，他就會立即被調用。

但是，為了達到這個目的，我們可以使用一個稍微不同於這個的一個方法---我們可以使用NuGet包為我們完成一些初始化工作。

NuGet是一個包管理工具,它可以把一些開源的類庫簡單快速地添加到我們的.NET項目中去。儘管NuGet 沒有捆綁在ASP.NET MVC項目中去，但是它在你安裝ASP.NET MVC環境時候已經一起安裝上去了，所以你不必單獨去安裝，你就可以直接使用了。

開啟管理NuGet程式包菜單，輸入EntityFramework.SqlserverCompact尋找一下，安裝此開源類庫

我們也可以使用WebActivator來註冊一些開始代碼，更多資料：https://bitbucket.org/davidebbo/webactivator

 

現在我們開始在Controller檔案夾裡面添加一個GuestbookController.cs控制器

這下面有很多種模板，我們用預設的,具體使用，我們以後講

開啟GuestbookController,我們添加一個Create名稱的Action,如

此時,我們按F5運行,地址欄輸入http://localhost:連接埠號碼/Guestbook/Create,會報錯,因為找不到對應的View

在這個錯誤裡面,我們發現,它在Create這個Action所在的GuestbookController,以Guestbook作為Views目錄裡面的子目錄,開始尋找Create.aspx,Create.ascx(這個是因為別的視圖引擎)，還有Create.cshtml（C#語言版本）和Create.vbhtml(vb.NET版本),如果對應的控制器名稱為目錄名的目錄裡面找不到,他就會從Views/Shared目錄裡面找,Shared裡面放的是多個控制器公用的View(頁面啦)

現在我們手動右擊Views目錄，手動添加一個View，或者在控制器的Action名稱右擊，添加視圖都一樣的，自己隨便選哪個都行

建立好Create.cshtml後，

我們添加代碼如下，為了避免代碼粘貼複製，不加思考，我就貼圖了

好了，我們按下F5開始運行一下，地址欄手動輸入http://localhost:你的連接埠號碼/Guestbook/Create

注意一下，在這個表單裡面，有Name和Message兩個input，這兩個名字其實是有技巧的，它們和我們定義的GuestbookEntry對象裡面的屬性的名稱是對應的,過會我們看一下，他們是怎麼自動綁定的

這個新的Create Action我們可以在/Guestbook/Create">http://localhost:<port>/Guestbook/Create訪問到

我們現在有必要在GuestbookController裡面添加一個Action來處理表單的post請求並向資料庫裡面添加一條資料

為了完成這個，我們將會使用我們以前建立的GuestbookContext類和GuestbookEntry實體類，在Models目錄裡面

現在我們向GuestbookController裡面添加一個帶參數的Create,代碼如下

我們重載了Create方法，並加上了一個HttpPost特性，標誌此方法，只能是HTTP Post性質的請求才能訪問

關於這個，我們以後會深度研究一下

這個方法，有個GuestbookEntry類型的參數,這個對象的屬性已經因為 表單中的元素的名字和對象中的屬性的名字一樣,所以已經自動和我們表單頁面綁定了。

SaveChages()，是將我們的資料寫入資料庫

關於EF，這裡不打算怎麼講，其實這裡寫了一個很常用的SaveChanges()方法，不管你是修改了資料，還是添加了資料，刪除了資料什麼的，當時資料庫都沒有什麼影響，只有你調用了SaveChanges()方法，所有你的資料操作狀態才會提交到資料庫，完成一次“同步”

有的資料庫文法也是這樣的，sql語句寫完，要寫個submit一樣的。

此時我們按F5運行，開啟Create頁面，輸入資料提交，資料已經能夠順利添加了。

 

光光增加一個資料，沒什麼用，我們不知道是不是真正添加了，所以我們需要一個展示訊息的一個頁面

預設控制器裡面有個Index Action，現在我們添加如下代碼，只提取GuestbookEntry表中的最近添加的20條資料

EF，本身用的linq風格的文法，所以想學EF的，先學一下linq，這裡不介紹linq

 

這裡我們只是，按照DateAdded降序，然後就可以獲得最新的20條最近添加的記錄，然後展示在頁面裡面，我們把這個對象放在了ViewBag裡面，這樣我們就可以在頁面裡使用我們獲得的20條記錄了，然後我們for迴圈一下，就可以展示了

建立一個好了訊息，最好能夠返回到展示頁面，目前我們只是提示，成功添加

現在我們修改帶參數的Create方法，修改如下

我們使用了RedirectToAction方法，這個方法能夠協助我們，添加成功後，自動調用本控制器內的Index Action

現在我們，給本控制器內的Index添加對應的視圖（好了，我認輸~頁面）

修改對應的Index.cshtml，代碼如下

好了現在我們大部分完成了

按下F5運行查看一下，瀏覽器地址欄輸入/Guestbook/Create">http://localhost:<port>/Guestbook/Create

 

到現在為止，我們應該大概瞭解了一下MVC了，對了，目前就是這麼簡單

不過我們還沒結束

現在我們來修改一下外表，其實是瞭解一下layout

上面我們每次都是手動輸入地址欄地址，好煩啊

所以我們順便瞭解一下MVC4的布局方式，不是DIV+什麼css，也不是模板頁，但是模板的思想

其實我們當前看的頁面其實是個組合起來的頁面，類似於模板頁，某些地方掏空，供內容頁填充什麼的

如果你使用的是以前的ASP.NET MVC或者ASP.NET WebForm，這個layout就像你們使用的Master Page

現在我們開啟看layout，添加一個菜單，供跳轉到Guestbook/Index.cshtml

他在Views/Shared目錄下,開啟它

關於ActionLink方法，三個參數（顯示的文字，Action名稱，控制器名稱），類似於HTML標籤中的超連結的作用

我們把 “將你的徽標放置在此處” 文字改成 “My Guest Book ”

在這個檔案裡，我們還發現其他幾個有趣的部分，比如

關於partial view 我們會在下一章講解,但是它最終起的作用是在多個頁面的組成的一個頁面裡，重新使用部分html的作用

關於菜單，它選擇了一個<ul>無序列表標籤，我們添加一個查看訊息的連結，代碼如

最後一個有趣的是RenderBody方法

原文講解如下，我自己講的不知道對不對

這個方法將會向當前的視圖（_Layout.cshtml）裡添加一些內容，這些內容都是由我們以前寫好的action

跳轉的view，view產生的html代碼會被layout包裹，就是會在 <section class="content-wrapper main-content clear-fix"></section>裡面

 

 

 

總結:

      本章是我們開始ASP.NET MVC編程的第一步，我們建立了一個新項目,並開始研究了預設項目的模版各個部分,我們談了一下Controller的概念，進一步地我們講到了controller類和Action方法,然後我們看了Razor模版怎麼表現成視圖（頁面）的,我們也看了Route怎樣對請求的URL映射（Mapping）的，當然我們也可以自己建立特殊的，自訂的URL模版,具體的會在第9章講解.

在這個基礎上，我們建立了Guestbook這個例子來驗證給我們的想法----我們使用Entity Framework 的 DbContext API和SQl SERVER Compact來添加和查詢了資料，我們還利用NuGet包管理器在我們的項目中快速地添加了額外的包

最後我們使用了layout，完成了統一風格的介面，感受了多視圖在一個視圖檔案裡（頁面）,這個很好地過渡到下一章的學習,在下一章裡，我們將會在Guestbook應用程式中繼續使用Razor視圖，並會你用這個項目繼續講解各個細節知識點。

 

本章源碼：下載 http://download.csdn.net/download/yangyanghaoran/5043248

 關於ASP.NET MVC4 IN ACTION系列目錄位址已經產生：點擊查看目錄