第三章 第一個 asp.net core 應(yīng)用程序
原書的代碼托管在 github: Apress/pro-asp.net-core-3: Source Code for 'Pro ASP.NET Core 3' by Adam Freeman
搭建應(yīng)用程序的框架
本篇將創(chuàng)建一個 RSVP 的應(yīng)用程序,RSVP 來自法語,是敬請回復(fù)的意思。代碼完成后,應(yīng)用程序的大致功能如下:
首頁:

點擊 RSVP Now 按鈕,提交是否參加 Party:

填寫 Name, email address 和 phone以及是否參加:

提交后進(jìn)入反饋頁面:

可以查看哪些人將參加 Party:

第一步,搭建應(yīng)用程序的框架,使用 Asp.net core empty 項目模板,使用 Visual Studio 創(chuàng)建過程請參考上一篇。完成后,首先修改 startup.cs 文件:

因為我們計劃使用 MVC 模式,所以分別創(chuàng)建 model, controller 和 view。為了讓程序能跑起來,我們首先創(chuàng)建 controller 和 view 如下:


這樣程序就可以正常運(yùn)行了。
添加數(shù)據(jù)模型
PartyInvites 作為一個簡單的應(yīng)用程序,只需要一個域模型 GuestResponse。在 Models 文件夾中創(chuàng)建 GuestResponse.cs 文件,代碼如下:

實現(xiàn) RSVP 表單
接下來要實現(xiàn) RSVP 表單并且能讓頁面之間實現(xiàn)跳轉(zhuǎn)。對于 RSVP 表單來說,在 HomeController 中要有 Action 方法,允許路由根據(jù)規(guī)則制定渲染的視圖。在 HomeController 中添加兩個方法,GET 請求用于默認(rèn) RSVP 表單的展示,POST 請求用于將數(shù)據(jù)寫到后臺(真實的應(yīng)該是數(shù)據(jù)庫)并且給提交者一個反饋(thanks 視圖)。下面的代碼說明了該目的:

與 Action 方法對應(yīng),我們需要 rsvpform 視圖和 thanks 視圖。RSVP 視圖是一個表單,允許用戶在填寫后提交:

注意 Highlight 的地方,并不是 html 語法,而是微軟的 tag helper,為了能使用 tag helper 需要在項目中創(chuàng)建一個 view import 文件,并且加載 tag helper,否則會出現(xiàn)錯誤。

tag helper 能極大簡化 html 標(biāo)記的輸入,運(yùn)行時由 asp.net core 平臺翻譯成 html 標(biāo)記進(jìn)行渲染。比如 name 這個 input 標(biāo)簽:

我們還需要創(chuàng)建 thanks 視圖:

現(xiàn)在有了三個視圖,我們還要能讓不同的視圖之間能夠跳轉(zhuǎn)。跳轉(zhuǎn)通過超鏈接 a 標(biāo)記實現(xiàn),tag helper 的 asp-action 屬性在運(yùn)行的時候添加 href 屬性。

跳轉(zhuǎn)到 thanks 視圖通過在 HomeController 中指定路由負(fù)責(zé)。
理解模型綁定
模型綁定是 asp.net core 一個強(qiáng)大的特性,它允許使用 C# 對象而不是瀏覽器發(fā)送的單個數(shù)據(jù)值,從而消除了直接處理 http 請求的復(fù)雜性。為了演示模型綁定,這里使用的場景是:被邀請人在 rsvpform 視圖中填寫的回復(fù)被記錄下來,并反饋給被邀請人,被邀請人還可以查看有哪些人將參加 Party。
正常情況下,后端必須有數(shù)據(jù)庫來存儲應(yīng)用程序的信息,為簡便起見,這里使用 List 臨時存放數(shù)據(jù):

在 HomeController 中,RsvpForm 的參數(shù)從 html 表單中提取值,并將他們分配給 GuestResponse 對象的屬性。

為觀察模型綁定,在這里設(shè)置一個斷點:


模型綁定也可以將對象值傳遞給視圖。比如剛才的例子,作為 Response,當(dāng)用戶填寫了表單后,收到平臺的反饋 (thanks)視圖:
控制器 RsvpForm 的 Post 請求通知路由將 thanks 視圖反饋給填寫者:

thanks 視圖則根據(jù)接收到的信息顯示:

填寫者還可以查看哪些人參加 Party,該功能通過 HomeController 的 ListResponse 操作方法和 ListResponse Razor 視圖實現(xiàn)。


源碼
pro asp.net core 3 notes: 《ASP.NET Core 3高級編程(第8版)》學(xué)習(xí)筆記