在 ASP.NET 網頁 (Razor) 網站中使用 HTML 表單
演講者：Tom FitzMacken
本文介紹在 ASP.NET 網頁 (Razor) 網站中工作時如何處理 HTML 表單 (帶有文字方塊和按鈕)。
您將學到什麼：
- 如何建立 HTML 表單。
- 如何從表單讀取使用者輸入。
- 如何驗證使用者輸入。
- 頁面提交後如何恢復表單值。
這些就是本文介紹的 ASP.NET 程式設計概念：
Request物件。- 輸入驗證。
- HTML 編碼。
教學中使用的軟體版本
- ASP.NET 網頁 (Razor) 3
本教學也適用於 ASP.NET 網頁 2。
建立簡單的 HTML 表單
建立一個新網站。
在根資料夾中，建立一個名為 Form.cshtml 的網頁並輸入以下標記：
<!DOCTYPE html> <html> <head> <title>Customer Form</title> </head> <body> <form method="post" > <fieldset> <legend>Add Customer</legend> <div> <label for="CompanyName">Company Name:</label> <input type="text" name="CompanyName" value="" /> </div> <div> <label for="ContactName">Contact Name:</label> <input type="text" name="ContactName" value="" /> </div> <div> <label for="Employees">Employee Count:</label> <input type="text" name="Employees" value="" /> </div> <div> <label> </label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> </body> </html>在瀏覽器中啟動該頁面。 (在 WebMatrix 中的檔案工作區中，右鍵單擊該文件，然後選擇在瀏覽器中啟動。) 將顯示一個包含三個輸入欄位和一個提交按鈕的簡單表單。
此時，如果按一下提交按鈕，則不會發生任何事情。 為了使表單有用，您必須添加一些將在伺服器上執行的程式碼。
從表單中讀取使用者輸入
要處理表單，您需要新增程式碼來讀取提交的欄位值並對其執行某些操作。 此過程向您展示如何讀取欄位並在頁面上顯示使用者輸入。 (在生產應用程式中，您通常可以透過使用者輸入執行更有趣的操作。您將在有關使用程式庫的文章中執行此操作。)
在 Form.cshtml 檔案的頂部，輸入以下程式碼：
@{ if (IsPost) { string companyname = Request.Form["companyname"]; string contactname = Request.Form["contactname"]; int employeecount = Request.Form["employees"].AsInt(); <text> You entered: <br /> Company Name: @companyname <br /> Contact Name: @contactname <br /> Employee Count: @employeecount <br /> </text> } }當使用者第一次要求該頁面時，僅顯示空白表單。 使用者 (即您) 填寫表單，然後按一下提交。 這會將使用者輸入提交 (發布) 到伺服器。 預設情況下，請求會轉到同一頁面 (即 Form.cshtml)。
這次提交頁面時，您輸入的值將顯示在表單上方：
查看該頁面的程式碼。 您首先使用
IsPost方法來確定頁面是否正在發布，即使用者是否點擊了提交按鈕。 如果這是一篇帖子，則IsPost傳回 true。 這是 ASP.NET 網頁中確定您正在處理初始請求 (GET 請求) 還是回發 (POST 請求) 的標準方法。 (有關 GET 和 POST 的詳細資訊，請參閱使用 Razor 語法進行 ASP.NET 網頁編程簡介中的邊欄 HTTP GET 和 POST 以及 IsPost 屬性。)接下來，您取得使用者從
Request.Form物件中填寫的值，並將它們放入變數中以供稍後使用。Request.Form物件包含隨頁面提交的所有值，每個值都由一個鍵標識。 鍵相當於您要讀取的表單欄位的name屬性。 例如，要讀取companyname欄位 (文字方塊)，您可以使用Request.Form["companyname"]。表單值作為字串儲存在
Request.Form物件中。 因此，當您必須使用數字、日期或其他類型的值時，必須將其從字串轉換為該類型。 在範例中，Request.Form的AsInt方法用於將員工欄位 (包含員工計數) 的值轉換為整數。在瀏覽器中啟動該頁面，填寫表單欄位，然後按一下提交。 該頁面顯示您輸入的值。
提示
外觀和安全性的 HTML 編碼
HTML 對 <、> 和 & 等字元有特殊用途。 如果這些特殊字元出現在不期望的位置，它們可能會破壞網頁的外觀和功能。 例如，瀏覽器將 < 字元 (除非後面跟有空格) 解釋為 HTML 元素的開頭，例如 <b> 或 <input ...>。 如果瀏覽器無法識別該元素，它只會丟棄以 < 開頭的字串，直到它再次識別到該元素為止。 顯然，這可能會導致頁面出現一些奇怪的渲染。
HTML 編碼將這些保留字元替換為瀏覽器解釋為正確符號的程式碼。 例如，將 < 字元替換為 < 並將 > 字元替換為 >。 瀏覽器將這些替換字串呈現為您想要看到的字元。
每當您顯示從使用者獲得的字串 (輸入) 時，最好使用 HTML 編碼。 如果您不這樣做，使用者可能會嘗試讓您的網頁執行惡意程式碼或執行其他損害您網站安全的操作，或者這不是您想要的。 (如果您獲取輸入，將其儲存在某個地方，然後稍後顯示，例如作為部落格評論、用戶評論或類似內容，這一點尤其重要。)
為了幫助防止這些問題，ASP.NET 網頁會自動對從程式碼輸出的任何文字內容進行 HTML 編碼。 例如，當您使用諸如 @MyVar 之類的程式碼顯示變數或表達式的內容時，ASP.NET 網頁會自動對輸出進行編碼。
驗證使用者輸入
使用者會犯錯。 你要求他們填寫一個欄位，但他們忘記了，或者你要求他們輸入員工人數，他們卻輸入了一個名字。 為了確保在處理表單之前已正確填寫表單，您需要驗證使用者的輸入。
此過程示範如何驗證所有三個表單欄位以確保使用者沒有將其留空。 您也可以檢查員工計數值是否為數字。 如果發生錯誤，您將顯示錯誤訊息，告訴使用者哪些值未通過驗證。
在 Form.cshtml 檔案中，將第一段程式碼替換為以下程式碼：
@{ Validation.RequireField("companyname", "Company name is required."); Validation.RequireField("contactname", "Contact name is required."); Validation.RequireField("employees", "Employee count is required."); Validation.Add("employees", Validator.Integer()); if (IsPost) { var companyname = Request.Form["companyname"]; var contactname = Request.Form["contactname"]; var employeecount = Request.Form["employees"]; if(Validation.IsValid()){ <text> You entered: <br /> Company Name: @companyname <br /> Contact Name: @contactname <br /> Employee Count: @employeecount <br /> </text> } } }若要驗證使用者輸入，您可以使用
Validation協助程式。 您可以透過呼叫Validation.RequireField來註冊必填欄位。 您可以透過呼叫Validation.Add並指定要驗證的欄位以及要執行的驗證類型來註冊其他類型的驗證。當頁面執行時，ASP.NET 會為您完成所有驗證。 您可以透過呼叫
Validation.IsValid來檢查結果，如果一切都通過，則傳回 true；如果任何欄位驗證失敗，則傳回 false。 通常，您會在對使用者輸入執行任何處理之前呼叫Validation.IsValid。透過新增對
Html.ValidationMessage方法的三個呼叫來更新<body>元素，如下所示：<body> <form method="post"> <fieldset> <legend>Add Customer</legend> <div> <label for="CompanyName">Company Name:</label> <input type="text" name="CompanyName" value="" /> @Html.ValidationMessage("companyname") </div> <div> <label for="ContactName">Contact Name:</label> <input type="text" name="ContactName" value="" /> @Html.ValidationMessage("contactname") </div> <div> <label for="Employees">Employee Count:</label> <input type="text" name="Employees" value="" /> @Html.ValidationMessage("employees") </div> <div> <label> </label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> </body>若要顯示驗證錯誤訊息，您可以呼叫 Html.
ValidationMessage並向其傳遞您想要訊息的欄位的名稱。執行頁面。 將欄位留空並點擊提交。 您會看到錯誤訊息。
將字串 (例如「ABC」) 新增至員工計數欄位，然後再次按一下提交。 這次您會看到一個錯誤，表示該字串的格式不正確，即整數。
ASP.NET 網頁提供了更多用於驗證使用者輸入的選項，包括使用用戶端程式碼自動執行驗證的能力，以便使用者在瀏覽器中獲得即時回饋。 請參閱稍後的其他資源部分以獲取更多資訊。
回發後恢復表單值
當您測試上一節中的頁面時，您可能已經注意到，如果出現驗證錯誤，您輸入的所有內容 (不僅僅是無效資料) 都會消失，並且您必須重新輸入所有欄位的值。 這說明了重要的一點：當您提交頁面、處理它，然後再次渲染頁面時，頁面將從頭開始重新建立。 正如您所看到的，這意味著提交頁面時頁面中的所有值都會遺失。
不過，您可以輕鬆解決此問題。 您可以存取已提交的值 (在 Request.Form 物件中)，因此您可以在呈現頁面時將這些值填回表單欄位中。
在 Form.cshtml 檔案中，使用
value取代<input>元素的value屬性：<!DOCTYPE html> <html> <head> <title>Customer Form</title> </head> <body> <form method="post"> <fieldset> <legend>Add Customer</legend> <div> <label for="CompanyName">Company Name:</label> <input type="text" name="CompanyName" value="@Request.Form["companyname"]" /> @Html.ValidationMessage("companyname") </div> <div> <label for="ContactName">Contact Name:</label> <input type="text" name="ContactName" value="@Request.Form["contactname"]" /> @Html.ValidationMessage("contactname") </div> <div> <label for="Employees">Employee Count:</label> <input type="text" name="Employees" value="@Request.Form["employees"]" /> @Html.ValidationMessage("employees") </div> <div> <label> </label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> </body><input>元素的value屬性已設定為從Request.Form物件動態讀取欄位值。 第一次請求頁面時，Request.Form物件中的值都是空的。 這很好，因為這樣表格就是空白的。在瀏覽器中啟動該頁面，填寫表單欄位或將其留空，然後按一下提交。 將顯示一個顯示提交值的頁面。
