在 ASP.NET Web Pages (Razor) 網站中使用 HTML 表單

發行項
07/13/2023

本文說明當您在 ASP.NET Web Pages (Razor) 網站中工作時，如何使用文字方塊和) 按鈕來處理 HTML 表單 (。

您將瞭解的內容：

如何建立 HTML 表單。

如何從表單讀取使用者輸入。

如何驗證使用者輸入。

如何在提交頁面之後還原表單值。

以下是文章仲介紹的 ASP.NET 程式設計概念：

Request 物件。

輸入驗證。

HTML 編碼。

教學課程中使用的軟體版本

ASP.NET Web Pages (Razor) 3

本教學課程也適用于 ASP.NET Web Pages 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>&nbsp;</label>
            <input type="submit" value="Submit" class="submit" />
          </div>
        </fieldset>
      </form>
    </body>
</html>

在瀏覽器中啟動頁面。 (在 WebMatrix 的 [ 檔案 ] 工作區中，以滑鼠右鍵按一下檔案，然後選取 [ 在 browser 中啟動]。) 具有三個輸入欄位的簡單表單，並顯示 [ 提交 ] 按鈕。

此時，如果您按一下 [ 提交 ] 按鈕，則不會發生任何事。若要讓表單很有用，您必須新增一些將在伺服器上執行的程式碼。

從表單讀取使用者輸入

若要處理表單，您可以新增程式碼來讀取提交的域值，並使用它們執行某些動作。此程式說明如何讀取欄位，並在頁面上顯示使用者輸入。 (在生產應用程式中，您通常會使用使用者輸入來執行更有趣的動作。您將在使用 databases.) 一文中執行此動作

在 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 Web Pages的標準方式，可用來判斷您使用的是 GET 要求 () 或 POST 要求 (回傳) 。 (如需 GET 和 POST 的詳細資訊，請參閱使用 Razor 語法 ASP.NET Web Pages程式設計簡介中的提要欄位「HTTP GET 和 POST 和 IsPost 屬性」。)

接下來，您會從 Request.Form 物件取得使用者填入的值，並將它們放在變數中以供稍後使用。物件 Request.Form 包含與頁面一起提交的所有值，每個值都是由索引鍵所識別。索引鍵相當於 name 您想要讀取之表單欄位的屬性。例如，若要讀取 companyname 欄位 (文字方塊) ，請使用 Request.Form["companyname"] 。

表單值會以字串形式儲存在 Request.Form 物件中。因此，當您必須以數位或日期或其他類型的形式使用值時，您必須將它從字串轉換成該類型。在此範例中 AsInt ，的方法 Request.Form 可用來將 employees 欄位的值 (，其中包含員工計數) 為整數。
在瀏覽器中啟動頁面、填寫表單欄位，然後按一下 [ 提交]。頁面會顯示您輸入的值。

提示

外觀和安全性的 HTML 編碼

HTML 對、 > 和 & 等 < 字元有特殊用途。如果這些特殊字元出現在預期的位置，他們可能會破壞網頁的外觀和功能。例如，瀏覽器會解譯 < 字元 (，除非字元後面接著空格) 做為 HTML 專案的開頭，例如 <b> 或 <input ...> 。如果瀏覽器無法辨識元素，它只會捨棄開頭 < 為的字串，直到到達再次辨識的專案為止。很明顯地，這可能會導致頁面中的一些奇怪轉譯。

HTML 編碼會將這些保留字元取代為瀏覽器解譯為正確符號的程式碼。例如， < 字元會取代為 < ，而 > 字元會取代為 > 。瀏覽器會將這些取代字串轉譯為您想要看到的字元。

每當您 (使用者取得的輸入) 顯示字串時，最好使用 HTML 編碼。如果您未這麼做，使用者可以嘗試讓您的網頁執行惡意腳本，或執行危害網站安全性的其他動作，或只是不想要的內容。 (如果您接受使用者輸入、將它儲存在某個位置，然後稍後再顯示，例如，作為部落格批註、使用者檢閱或類似該處的內容，這特別重要。)

為了協助避免這些問題，ASP.NET Web Pages自動以 HTML 編碼您從程式碼輸出的任何文字內容。例如，當您使用之類的 @MyVar 程式碼來顯示變數或運算式的內容時，ASP.NET Web Pages會自動編碼輸出。

驗證使用者輸入

使用者犯錯。您可以要求他們填寫欄位，而他們忘記，或要求他們輸入員工數目，並改為輸入名稱。若要在處理表單之前確定表單已正確填入，請驗證使用者的輸入。

此程式示範如何驗證這三個表單欄位，以確保使用者未將其保留空白。您也會檢查員工計數值是否為數字。如果發生錯誤，您將會顯示錯誤訊息，告知使用者未通過驗證的值。

在 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 ，再對使用者輸入執行任何處理。

<body>將三個呼叫新增至方法， Html.ValidationMessage 以更新元素，如下所示：

<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>&nbsp;</label>
         <input type="submit" value="Submit" class="submit" />
      </div>
    </fieldset>
  </form>
</body>

若要顯示驗證錯誤訊息，您可以呼叫 Html。ValidationMessage 並傳遞您想要訊息的功能變數名稱。

執行頁面。將欄位保留空白，然後按一下 [ 提交]。您會看到錯誤訊息。
例如，將字串 (「ABC」) 新增至 [員工計數 ] 欄位，然後按一下 [再次提交 ]。這次您會看到錯誤，指出字串的格式不正確，也就是整數。

ASP.NET Web Pages提供更多選項來驗證使用者輸入，包括能夠使用用戶端腳本自動執行驗證，讓使用者在瀏覽器中立即收到意見反應。 See the Additional Resources section later for more information.

在回傳之後還原表單值

當您在上一節中測試頁面時，可能會注意到，如果您有驗證錯誤，則您輸入的所有 (不只是不正確資料) 已消失，而且您必須重新輸入所有欄位的值。這說明一個重要點：當您提交頁面、處理頁面，然後再次轉譯頁面時，會從頭重新建立頁面。如您所見，這表示在提交頁面時的任何值都遺失。

不過，您可以輕鬆地修正此問題。您可以存取物件中 Request.Form 提交 (的值，因此您可以在轉譯頁面時，將這些值填回表單欄位。

在Form.cshtml檔案中，使用 value attribute 取代 value 元素的屬性 <input> 。

<!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>&nbsp;</label>
          <input type="submit" value="Submit" class="submit" />
        </div>
    </fieldset>
  </form>
</body>

元素 value 的 <input> 屬性已設定為動態讀取物件中的 Request.Form 域值。第一次要求頁面時，物件中的 Request.Form 值全都是空的。這沒問題，因為表單是空白的。

在瀏覽器中啟動頁面、填寫表單欄位或保留空白，然後按一下 [ 提交]。顯示所提交值的頁面隨即顯示。