ASP.NET Core 平台的 Web Forms 繼任者 - Razor Pages

除了 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 並且顯在畫面上的結果。

在 PageModel 頁中，建立一個名稱為 numbersx 的 Dictionary 型態物件變數，然後於其中指定 a 與 b 兩組元素，其值分別為 600 與 700。

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

切換至網頁原始碼可以看到超連結自動轉換 asp-all-route-data 屬性值，組合Dictionary 型態物件變數 numbersx 的值。

資料繫結

表單是網頁傳送資料回伺服器端的主要方法之一，當然 Razor Pages 同時維持資料繫結機制，讓 Page Model 程式碼可以很容易的取得使用者的編輯資料。

例如這個畫面上配置了一個表單，提供兩個文字方塊讓使用者輸入提示的資料。

按下傳送按鈕之後，就可以將資料傳送至後端，對應的 Page Model 類別就會接收到資料。

來看表單的配置，其中兩個 TextBox 型態的 Input 標籤，name 屬性分別設定為 CompanyName 以及 ChairMan ，後端程式可以透過這兩組名稱讀取傳送回來的資料。

現在切換至 Page Model ，由於表單是 post 方式傳送，最直觀的方式便是在 OnPost 方法中提供兩個與 Input 標籤同名的參數，就可以直接取得使用者於文字方塊輸入的資料。

另外也可以透過公用屬性來作，建立兩組屬性，並且標註為 BindProperty ，如此一來，在 OnPost 中就可以直接取得這兩個對應的值。

當然，如果想要以最原始的方式來讀取也是可以的，透過 Request 引用 Form 傳入要讀取的表單欄位名稱即可。

Get / Post 

建立一個Razor Pages 檔案，並且配置其中的內容，有兩組 form ，其 method 分別設定為 get 與 post ，分別支援 Get 與 Post 的資料傳送方式，各插入一個 Input ，指定其 name 為 "name" ，以傳入 PageModel 類別的對應方法。

最下面一行的 @Model.msg 是取這個頁面檔案 PageModel 中的 public 變數 msg 的值，以 h2 標籤包裝顯示在頁面上。

切換至同名的 PageModel 類別檔，輸入其中的內容，一開始是 public 字串變數 msg，後續的方法根據表單操作調整變數值。

第一個是 OnGet 方法，參數 name 接受 Get 表單傳來的資料，第二個 OnPost 方法同樣具有名稱 name 的參數，接受 Post 表單傳來的方法。無論 Get 或 Post ，均根據參數的值設定對應的訊息字串，儲存於 msg。

執行專案，並輸入網址列 hellogetpost 以執行 hellogetpost.cshtml ，由於沒有任何網頁傳入的資料，一開始最基本的 OnGet 方法被執行，參數 name 是空的，因此取得畫面中的方法。

於文字方塊分別輸入不同的資料，按下按鈕，可以得到對應的時間回應資訊。


例如這是在畫面中第二個文字方塊輸入特定名稱，按下「Post 傳送」按鈕的回傳結果。

Razor Pages 遵循 Http 的要求/回應標準，並搭配 HTML的表單配置規則，支援 Get/Post 的表單方法，結合 PageModel 讓 Web 應用的開發更具生產力，同時更為清楚且容易理解。

處理一個以上的表單

 如果有一個以上的表單，可以透過 form 標籤的 asp-page-handler 屬性作設計，對應到 Post 方法。

這是結果畫面，分別於 a 與 b 文字方塊輸入整數值，按下等於按鈕，得到運算結果。加法與減法的文字方塊與按鈕，分別配置於不同的表單中。

這是頁面的配置內容，要分辨是那個表單的 submit 按鈕按下傳送，在 form 標籤設定　asp-page-handler　屬性，加法的表單指定為「Add」，減法的表單則指定為「Subtraction」。

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