除了 MVC 與 Web API,ASP.NET Core 並沒有納入 Web Forms 的升級,以頁面為中心的開發模式則以全新的 Razor Pages 取代。
Razor Pages 的好處是以 PageModel 類別整合 HTML 與 C# 在一組關聯檔案中,類似 Web Forms 的檔案架構,但是導入了路由以及 Tag Helpers 等設計,避開 Web Forms 為人垢病的控制器,符合 HTML 格式語法,更容易透過 C# 處理頁面內容與理解頁面架構,並與網頁元素進行互動,方便設計與開發的並行。
對於 MVC 水土不服的開發者,Razor Pages 的開發模式相對直觀,當然對於熟悉 Web Forms 者更會感到親切,以下快速列舉 Razor Pages 幾項重要的特性。
標籤協助程式 - Tag Helpers
Razor Pages 可以透過 Tag Helpers 設定,讓 C# 動態維護 HTML 標籤的生成與調整,這種功能讓動態建立網頁的過程更為彈性,也讓複雜網頁的建構更為容易。
新增一個 Razor 頁面檔案,並且於其中配置畫面上的內容,於 a 標籤設定名稱為 asp-all-route-data 的屬性,並且將其屬性設定為 PageModel 中的一個 numbersx 屬性。
h2 標籤中是按下 SUM 超連結之後,伺服器回傳 msg 並且顯在畫面上的結果。

h2 標籤中是按下 SUM 超連結之後,伺服器回傳 msg 並且顯在畫面上的結果。

當使用者按下超連結,其中的 asp-all-route-data 屬性取得 numbersx 的值,變成網址列參數 a=600&b=700,回傳至 PageModel 的 OnGet 方法,依序傳入進行加總,畫面上最後為加總的結果。


切換至網頁原始碼可以看到超連結自動轉換 asp-all-route-data 屬性值,組合Dictionary 型態物件變數 numbersx 的值。
資料繫結
當然,如果想要以最原始的方式來讀取也是可以的,透過 Request 引用 Form 傳入要讀取的表單欄位名稱即可。
Get / Post
最下面一行的 @Model.msg 是取這個頁面檔案 PageModel 中的 public 變數 msg 的值,以 h2 標籤包裝顯示在頁面上。
第一個是 OnGet 方法,參數 name 接受 Get 表單傳來的資料,第二個 OnPost 方法同樣具有名稱 name 的參數,接受 Post 表單傳來的方法。無論 Get 或 Post ,均根據參數的值設定對應的訊息字串,儲存於 msg。

執行專案,並輸入網址列 hellogetpost 以執行 hellogetpost.cshtml ,由於沒有任何網頁傳入的資料,一開始最基本的 OnGet 方法被執行,參數 name 是空的,因此取得畫面中的方法。
於文字方塊分別輸入不同的資料,按下按鈕,可以得到對應的時間回應資訊。

例如這是在畫面中第二個文字方塊輸入特定名稱,按下「Post 傳送」按鈕的回傳結果。
Razor Pages 遵循 Http 的要求/回應標準,並搭配 HTML的表單配置規則,支援 Get/Post 的表單方法,結合 PageModel 讓 Web 應用的開發更具生產力,同時更為清楚且容易理解。
處理一個以上的表單
於文字方塊分別輸入不同的資料,按下按鈕,可以得到對應的時間回應資訊。

例如這是在畫面中第二個文字方塊輸入特定名稱,按下「Post 傳送」按鈕的回傳結果。
Razor Pages 遵循 Http 的要求/回應標準,並搭配 HTML的表單配置規則,支援 Get/Post 的表單方法,結合 PageModel 讓 Web 應用的開發更具生產力,同時更為清楚且容易理解。
處理一個以上的表單
如果有一個以上的表單,可以透過 form 標籤的 asp-page-handler 屬性作設計,對應到 Post 方法。
這是頁面的配置內容,要分辨是那個表單的 submit 按鈕按下傳送,在 form 標籤設定 asp-page-handler 屬性,加法的表單指定為「Add」,減法的表單則指定為「Subtraction」。


切換至 PageModel 檔案,注意方法名稱根據 form 標籤的 asp-page-handler 屬性作設計,OnPostAdd 方法接受來自 asp-page-handler=Add 表單的 Post 要求,同理減法則是 OnPostSubtraction 。
沒有留言:
張貼留言