天天看點

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  本文開始通過ASP.NET MVC建立一個部落格應用,該應用是通過預設的MVC模闆修改而來,是以建立的過程和代碼都與預設模闆一緻,然後通過修改的方式将預設模闆改為部落格的首頁,并添加部落格清單、内容等頁面。

  本文主要内容有:

  ●建立一個ASP.NET MVC應用程式

  ●ASP.NET MVC預設代碼介紹

  ●修改ASP.NET MVC模闆的預設頁面

  ●建立部落格Controller

  ●建立部落格頁面

  ●建立ViewModel來表示文章資料

  在之前文章中介紹了ASP.NET中提供了3個開發動态網頁的架構,分别是Web Form、MVC以及Web Pages,也大概介紹了它們的特點。

  其中MVC對于其它兩種框來來說更容易測試并且也更容易維護,MVC是一種開發模式MVC分别表示model(模型)-view(視圖)-controller(控制器)。

  Controller:這個類型用于處理來自浏覽器的請求,擷取資料發送給指定的View的類。

  Model:它代表應用程式裡的資料模型的類。

  View:它是一個用于動态生産HTML的模闆檔案。

  本章将開始介紹如何使用ASP.NET MVC來搭建一個部落格系統。

  1. 使用VS2017建立一個MVC項目(注意不是ASP.NET Core):

  

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  2. 選擇ASP.NET Web Application(.NET Framework)并輸入項目名稱:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  3. 選擇MVC模闆,身份驗證使用無身份驗證(注:身份驗證功能會在後續添加,此處無需添加此功能)。

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  4. 完成後将生成My Blog項目,以下是項目的預設目錄結構:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  上面3個紅框框出的目錄分别儲存Controller、Mode、View的内容,其餘Content、fonts、Scripts分别對應前端頁面需要用到的樣式表、字型和Javascript。其餘目錄和檔案暫時不需了解。

  5. 點選VS2017的調試按鈕調試程式:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  6. 運作結果:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  ASP.NET MVC已經為我們搭建了一個預設模闆,提供了三個頁面分别是Home、About以及Contact。

   

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  從代碼結構來看,項目中存在一個HomeController和Views\Home目錄下面的三個cshtml檔案(注:Model在controller和view之間沒有任何資料交換的情況下是可以省略的)。

  這裡需要說明的是_ViewStart.cshtml是預設的布局檔案,當存在全局_ViewStart.cshtml或者目前目錄下存在該檔案的時候會自動引用該檔案(如果不同層級都存在該檔案,那麼使用離該頁面最近的一個),具體内容後續說明,這裡僅需要知道該檔案為整個項目預設引用了一個布局檔案。

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  布局檔案是Shared目錄下的_Layout.cshtml:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  (在調試狀态下)修改一下這個布局檔案,或者說漢化一下,然後重新整理:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  可以看到标題、導航和頁腳的變化。

  到此為止,已經為部落格系統建立了一個ASP.NET MVC的項目。接下來将根據部落格系統的需求來設計部落格的清單頁和文章頁面。

  1.修改預設首頁為清單頁面:

  打開View目錄下的Index,對其進行修改,修改效果如下:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

   部分代碼如下:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

   此處是首頁banner,其中"@Html.ActionLink("關于我»", "Contact", "Home", new { @class = "btn btn-default" })"這句代碼是用于生成一個連接配接到HomeController,Contact方法的連接配接。

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  上面代碼是一個清單區域(連接配接仍然是微軟的)。

  2. 最後把關于和聯系我們的頁面也修改為我們想要的内容(About和Contact頁面):

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》
ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  注:到此為止的頁面修改操作均可以在調試狀态下修改,修改儲存後重新整理頁面即可看到修改。

  文章到這裡可能會發現這還是靜态的呀,和之前的有什麼差別?都是修改HTML檔案。

  而且還缺少文章檢視頁面,要如何實作?

  接下來先析一下Controller,看一下現有的3個頁面(首頁、關于、聯系我們)在Controller中是如何處理的,在預設建立的項目中隻有一個HomeController:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  文章最開始的時候對Controller進行了說明:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  它用于處理來自浏覽器的請求,上面上個方法剛好表示了之前頁面上的首頁--Index、關于--About、聯系我們--Contact,這些方法也叫Action,在Controller中的Public方法會被自動識别為Action。如果在調試狀态下可以在上面三個方法中設定斷點、然後再次通路相應頁面,相應的斷點就會被命中:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  還記得最開始的關于頁面有一個"Your application description page"的資訊嗎?這個資訊就來自于這裡,而不是直接錄在頁面上的。

  最初的頁面代碼:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  是不是感覺網站已經“動”起來了,它不再是HTML的寫死,設想一下如果這個Message來自資料庫或者一些配置檔案,那麼隻需要修改資料庫或者配置檔案的值,那麼頁面也就随之而變了。

  了解了View和Controller,那麼就可以來考慮部落格的需求了,文章清單和文章閱讀,建立一個PostController:

  1. 右鍵Controllers目錄--->Add--->Controller:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  2. 添加一個空的MVC5 Controller(注Add Scaffold譯為添加腳手架,腳手架用于根據T4模闆動态生成代碼,VS預設有兩個腳手架,一個是帶有read、write活動(action)的以及使用Entity Framework并且生成View的。更多可參考http://jingpin.jikexueyuan.com/article/9058.html):

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  為Controller命名:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

   PostController代碼:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  同時也可以看到Views目錄下建立了一個名為Post的空目錄,現在還沒有Post的View的。

  現在為了實作需求,需要一個擷取文章清單的方法和一個檢視文章内容的方法(注:一般使用Index作為預設頁面,而對于文章功能來說清單頁面就是預設頁面,是以添加一個文章擷取方法即可):

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  為PostController的Index及Get Action方法添加頁面:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  使用預設設定即可(Action在調用return View()方法的時候會去查找與Action名稱比對的View)。另外從使用布局檔案的選項那裡可以看到,如果使用預設的_viewstart布局檔案那麼留白即可,這裡為了保持頁面一緻性,是以預設使用之前的布局檔案(如果取消勾選“使用布局檔案”,那麼生成的View将會是一個完整的HTML檔案,包含head、body等标簽)。

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  頁面代碼:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》
ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  将文章清單頁面添加到導航上(布局檔案_Layout.cshtml):

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  運作結果:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  點選跳轉到部落格清單頁面:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  1. 在Models目錄下添加一個Post類,并為其添加必要的屬性:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》
ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  2. 在Controller中準備資料:

  首先定義一個靜态Post清單,并往裡添加多條資料作為資料源:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  然後在擷取清單的方法中,将該清單的資料"傳到"頁面上:

  還記得之前的ViewBag.Message嗎?

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  這裡要注意的是ViewBag是一個動态對象,可以對它添加任何的屬性,所有屬性在運作時解析:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》
ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  頁面如何修改呢,直接上代碼?(Razor文法參考:http://www.cnblogs.com/dengxinglin/p/3352078.html)

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》
ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  同理修改文章檢視action和頁面:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  注:posts.where方法使用了.net提供的Linq功能,用來根據文章ID在文章集合中查找對應的文章對象,關于Linq可參考:https://baike.baidu.com/item/LINQ/4462670?fr=aladdin

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  功能完成,第一個ASP.NET MVC應用程式也就介紹到這裡,這裡實作最初分析的“讀者”的檢視目錄和檢視文章功能:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  文章的最後來解釋一下為什麼“localhost:52356/Post/Get/1”能夠通路到文章1:

  在App_Start目錄下RouteConfig.cs中有這樣一段代碼:

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》

  這段代碼是為MVC應用程式注冊了一個路由,這個路由根據url所指的模闆去比對,然後映射到相應的Controller和Action上,并且預設的Controller和Action是Home和Index,這也是為什麼直接通路位址時會自動打開首頁面的原因,而/Post/Get/1就代表了Controller是Post、Action是Get、參數id為1,這樣就能找到上面定義的Controller和Action然後進行調用,如果Controller和Action不存在則會抛出異常,更多關于路由的内容後續會詳細介紹。

小結:

  本文主要簡述了ASP.NET MVC是什麼并示範了如何使用VS2017建立一個ASP.NET MVC應用程式,并對預設建立的應用程式進行了修改,添加了自己的資訊。另外建立了Post相關的Controller、View和Model,實作了文章清單的顯示和檢視功能。後續文章将會繼續完善這個應用程式。

本文位址:http://www.cnblogs.com/selimsong/p/7645270.html 

ASP.NET沒有魔法——目錄

作者:7m魚

出處:http://www.cnblogs.com/selimsong/

本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。

ASP.NET沒有魔法——第一個ASP.NET應用《MyBlog》