ASP.NET開發(fā)實戰(zhàn)——（三）第一個ASP.NET應(yīng)用《MyBlog》

時間：2023-05-23 16:06:01 | 來源：網(wǎng)站運營

時間：2023-05-23 16:06:01 來源：網(wǎng)站運營

ASP.NET開發(fā)實戰(zhàn)——（三）第一個ASP.NET應(yīng)用《MyBlog》：　　本文開始通過http://ASP.NET MVC創(chuàng)建一個博客應(yīng)用，該應(yīng)用是通過默認的MVC模板修改而來，所以創(chuàng)建的過程和代碼都與默認模板一致，然后通過修改的方式將默認模板改為博客的主頁，并添加博客列表、內(nèi)容等頁面。

　　本文主要內(nèi)容有：

　　●創(chuàng)建一個http://ASP.NET MVC應(yīng)用程序
　　●http://ASP.NET MVC默認代碼介紹
　　●修改http://ASP.NET MVC模板的默認頁面
　　●創(chuàng)建博客Controller
　　●創(chuàng)建博客頁面
　　●創(chuàng)建ViewModel來表示文章數(shù)據(jù)

創(chuàng)建一個http://ASP.NET MVC應(yīng)用程序

　　在之前文章中介紹了http://ASP.NET中提供了3個開發(fā)動態(tài)網(wǎng)頁的框架，分別是Web Form、MVC以及Web Pages，也大概介紹了它們的特點。
　　其中MVC對于其它兩種框來來說更容易測試并且也更容易維護，MVC是一種開發(fā)模式MVC分別表示model(模型)-view(視圖)-controller(控制器)。

　　Controller：這個類型用于處理來自瀏覽器的請求，獲取數(shù)據(jù)發(fā)送給指定的View的類。
　　Model：它代表應(yīng)用程序里的數(shù)據(jù)模型的類。
　　View：它是一個用于動態(tài)生產(chǎn)HTML的模板文件。

　　本章將開始介紹如何使用http://ASP.NET MVC來搭建一個博客系統(tǒng)。
　　1. 使用VS2017創(chuàng)建一個MVC項目(注意不是http://ASP.NET Core)：

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

　　3. 選擇MVC模板，身份驗證使用無身份驗證（注：身份驗證功能會在后續(xù)添加，此處無需添加此功能）。

　　4. 完成后將生成My Blog項目，以下是項目的默認目錄結(jié)構(gòu)：

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

　　5. 點擊VS2017的調(diào)試按鈕調(diào)試程序：

　　6. 運行結(jié)果：

http://ASP.NET MVC默認代碼介紹

　　http://ASP.NET MVC已經(jīng)為我們搭建了一個默認模板，提供了三個頁面分別是Home、About以及Contact。

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

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

　　(在調(diào)試狀態(tài)下)修改一下這個布局文件，或者說漢化一下，然后刷新：

　　可以看到標(biāo)題、導(dǎo)航和頁腳的變化。

到此為止，已經(jīng)為博客系統(tǒng)創(chuàng)建了一個http://ASP.NET MVC的項目。接下來將根據(jù)博客系統(tǒng)的需求來設(shè)計博客的列表頁和文章頁面。

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

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

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

　　部分代碼如下：

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

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

　　2. 最后把關(guān)于和聯(lián)系我們的頁面也修改為我們想要的內(nèi)容(About和Contact頁面)：

　　注：到此為止的頁面修改操作均可以在調(diào)試狀態(tài)下修改，修改保存后刷新頁面即可看到修改。
　　文章到這里可能會發(fā)現(xiàn)這還是靜態(tài)的呀，和之前的有什么區(qū)別？都是修改HTML文件。
　　而且還缺少文章查看頁面，要如何實現(xiàn)？
　　接下來先析一下Controller，看一下現(xiàn)有的3個頁面(主頁、關(guān)于、聯(lián)系我們)在Controller中是如何處理的，在默認創(chuàng)建的項目中只有一個HomeController：

　　文章最開始的時候?qū)ontroller進行了說明：

　　它用于處理來自瀏覽器的請求，上面上個方法剛好表示了之前頁面上的主頁--Index、關(guān)于--About、聯(lián)系我們--Contact，這些方法也叫Action，在Controller中的Public方法會被自動識別為Action。如果在調(diào)試狀態(tài)下可以在上面三個方法中設(shè)置斷點、然后再次訪問相應(yīng)頁面，相應(yīng)的斷點就會被命中：




　　還記得最開始的關(guān)于頁面有一個"Your application description page"的信息嗎？這個信息就來自于這里，而不是直接錄在頁面上的。
　　最初的頁面代碼：

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

創(chuàng)建博客Controller

　　了解了View和Controller，那么就可以來考慮博客的需求了，文章列表和文章閱讀，創(chuàng)建一個PostController：

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

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

　　為Controller命名：

　　PostController代碼：

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

創(chuàng)建文章頁面

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

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

　　頁面代碼：




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

　　運行結(jié)果：

　　點擊跳轉(zhuǎn)到博客列表頁面：

創(chuàng)建View Model來表示文章數(shù)據(jù)

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




　　2. 在Controller中準(zhǔn)備數(shù)據(jù)：
　　首先定義一個靜態(tài)Post列表，并往里添加多條數(shù)據(jù)作為數(shù)據(jù)源：

　　然后在獲取列表的方法中，將該列表的數(shù)據(jù)"傳到"頁面上：
　　還記得之前的ViewBag.Message嗎？

　　這里要注意的是ViewBag是一個動態(tài)對象，可以對它添加任何的屬性，所有屬性在運行時解析：




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

　　運行結(jié)果：

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

　　注：posts.where方法使用了.net提供的Linq功能，用來根據(jù)文章ID在文章集合中查找對應(yīng)的文章對象，關(guān)于Linq可參考：https://baike.baidu.com/item/LINQ/4462670?fr=aladdin

　　運行結(jié)果：

　　功能完成，第一個http://ASP.NET MVC應(yīng)用程序也就介紹到這里，這里實現(xiàn)最初分析的“讀者”的查看目錄和查看文章功能：

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

　　這段代碼是為MVC應(yīng)用程序注冊了一個路由，這個路由根據(jù)url所指的模板去匹配，然后映射到相應(yīng)的Controller和Action上，并且默認的Controller和Action是Home和Index，這也是為什么直接訪問地址時會自動打開主頁面的原因，而/Post/Get/1就代表了Controller是Post、Action是Get、參數(shù)id為1，這樣就能找到上面定義的Controller和Action然后進行調(diào)用，如果Controller和Action不存在則會拋出異常，更多關(guān)于路由的內(nèi)容后續(xù)會詳細介紹。

小結(jié)：
　　本文主要簡述了http://ASP.NET MVC是什么并演示了如何使用VS2017創(chuàng)建一個http://ASP.NET MVC應(yīng)用程序，并對默認創(chuàng)建的應(yīng)用程序進行了修改，添加了自己的信息。另外創(chuàng)建了Post相關(guān)的Controller、View和Model，實現(xiàn)了文章列表的顯示和查看功能。后續(xù)文章將會繼續(xù)完善這個應(yīng)用程序。

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

歡迎關(guān)注我的公眾號，不僅為你推薦最新的博文，還有更多驚喜和資源在等著你!一起學(xué)習(xí)共同進步！