ASP.NET開發實戰——(三)第一個ASP.NET應用《MyBlog》


  本文開始通過ASP.NET MVC創建一個博客應用,該應用是通過默認的MVC模板修改而來,所以創建的過程和代碼都與默認模板一致,然后通過修改的方式將默認模板改為博客的主頁,並添加博客列表、內容等頁面。

  本文主要內容有:

  ●創建一個ASP.NET MVC應用程序
  ●ASP.NET MVC默認代碼介紹
  ●修改ASP.NET MVC模板的默認頁面
  ●創建博客Controller
  ●創建博客頁面
  ●創建ViewModel來表示文章數據

創建一個ASP.NET MVC應用程序

  在之前文章中介紹了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):

  

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

  

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

  

  4. 完成后將生成My Blog項目,以下是項目的默認目錄結構:

  

  上面3個紅框框出的目錄分別保存Controller、Mode、View的內容,其余Content、fonts、Scripts分別對應前端頁面需要用到的樣式表、字體和Javascript。其余目錄和文件暫時不需了解。

  5. 點擊VS2017的調試按鈕調試程序:

  

  6. 運行結果:

  

 

ASP.NET MVC默認代碼介紹

  ASP.NET MVC已經為我們搭建了一個默認模板,提供了三個頁面分別是Home、About以及Contact。

   

  從代碼結構來看,項目中存在一個HomeController和Views\Home目錄下面的三個cshtml文件(注:Model在controller和view之間沒有任何數據交換的情況下是可以省略的)。
  這里需要說明的是_ViewStart.cshtml是默認的布局文件,當存在全局_ViewStart.cshtml或者當前目錄下存在該文件的時候會自動引用該文件(如果不同層級都存在該文件,那么使用離該頁面最近的一個),具體內容后續說明,這里僅需要知道該文件為整個項目默認引用了一個布局文件。

  

  布局文件是Shared目錄下的_Layout.cshtml:

  

  (在調試狀態下)修改一下這個布局文件,或者說漢化一下,然后刷新:

  

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

  到此為止,已經為博客系統創建了一個ASP.NET MVC的項目。接下來將根據博客系統的需求來設計博客的列表頁和文章頁面。

修改ASP.NET MVC模板的默認頁面

  1.修改默認主頁為列表頁面:

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

  

 

   部分代碼如下:

  

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

  

  上面代碼是一個列表區域(連接仍然是微軟的)。

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

  

  

 

   

  注:到此為止的頁面修改操作均可以在調試狀態下修改,修改保存后刷新頁面即可看到修改。
  文章到這里可能會發現這還是靜態的呀,和之前的有什么區別?都是修改HTML文件。
  而且還缺少文章查看頁面,要如何實現?
  接下來先析一下Controller,看一下現有的3個頁面(主頁、關於、聯系我們)在Controller中是如何處理的,在默認創建的項目中只有一個HomeController:

  

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

  

  它用於處理來自瀏覽器的請求,上面上個方法剛好表示了之前頁面上的主頁--Index、關於--About、聯系我們--Contact,這些方法也叫Action,在Controller中的Public方法會被自動識別為Action。如果在調試狀態下可以在上面三個方法中設置斷點、然后再次訪問相應頁面,相應的斷點就會被命中:

  

  

  還記得最開始的關於頁面有一個"Your application description page"的信息嗎?這個信息就來自於這里,而不是直接錄在頁面上的。
  最初的頁面代碼:

  

  是不是感覺網站已經“動”起來了,它不再是HTML的硬編碼,設想一下如果這個Message來自數據庫或者一些配置文件,那么只需要修改數據庫或者配置文件的值,那么頁面也就隨之而變了。

創建博客Controller

  了解了View和Controller,那么就可以來考慮博客的需求了,文章列表和文章閱讀,創建一個PostController:

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

  

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

  

  為Controller命名:

  

   PostController代碼:

  

  同時也可以看到Views目錄下創建了一個名為Post的空目錄,現在還沒有Post的View的。
  現在為了實現需求,需要一個獲取文章列表的方法和一個查看文章內容的方法(注:一般使用Index作為默認頁面,而對於文章功能來說列表頁面就是默認頁面,所以添加一個文章獲取方法即可):

  

創建文章頁面

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

   

  使用默認設置即可(Action在調用return View()方法的時候會去查找與Action名稱匹配的View)。另外從使用布局文件的選項那里可以看到,如果使用默認的_viewstart布局文件那么留空即可,這里為了保持頁面一致性,所以默認使用之前的布局文件(如果取消勾選“使用布局文件”,那么生成的View將會是一個完整的HTML文件,包含head、body等標簽)。

  

  頁面代碼:

  

  

  將文章列表頁面添加到導航上(布局文件_Layout.cshtml):

  

  運行結果:

  

  點擊跳轉到博客列表頁面:

  

創建View Model來表示文章數據

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

  

  

  2. 在Controller中准備數據:
  首先定義一個靜態Post列表,並往里添加多條數據作為數據源:

  

  然后在獲取列表的方法中,將該列表的數據"傳到"頁面上:
  還記得之前的ViewBag.Message嗎?

  

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

  

  

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

   

  運行結果:

  

  同理修改文章查看action和頁面:

  

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

  運行結果:

  

  功能完成,第一個ASP.NET MVC應用程序也就介紹到這里,這里實現最初分析的“讀者”的查看目錄和查看文章功能:

  

  文章的最后來解釋一下為什么“localhost:52356/Post/Get/1”能夠訪問到文章1:
  在App_Start目錄下RouteConfig.cs中有這樣一段代碼:

   

  這段代碼是為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,實現了文章列表的顯示和查看功能。后續文章將會繼續完善這個應用程序。

 

歡迎添加個人微信號:Like若所思。

歡迎關注我的公眾號,不僅為你推薦最新的博文,還有更多驚喜和資源在等着你!一起學習共同進步!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM