共用方式為


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

作者:Tom FitzMacken

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

您將瞭解的內容:

  • 如何建立 HTML 表單。
  • 如何從表單讀取使用者輸入。
  • 如何驗證使用者輸入。
  • 如何在提交頁面之後還原表單值。

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

  • Request 物件。
  • 輸入驗證。
  • HTML 編碼。

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

  • ASP.NET Web Pages (Razor) 3

本教學課程也適用于 ASP.NET Web Pages 2。

建立簡單的 HTML 表單

  1. 建立新的網站。

  2. 在根資料夾中,建立名為 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>
    
  3. 在瀏覽器中啟動頁面。 (在 WebMatrix 的 [ 檔案 ] 工作區中,以滑鼠右鍵按一下檔案,然後選取 [ 在 browser 中啟動]。) 具有三個輸入欄位的簡單表單,並顯示 [ 提交 ] 按鈕。

    具有三個文字方塊的表單螢幕擷取畫面。

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

從表單讀取使用者輸入

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

  1. 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 欄位的值 (,其中包含員工計數) 為整數。

  2. 在瀏覽器中啟動頁面、填寫表單欄位,然後按一下 [ 提交]。 頁面會顯示您輸入的值。

提示

外觀和安全性的 HTML 編碼

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

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

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

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

驗證使用者輸入

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

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

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

  2. <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 並傳遞您想要訊息的功能變數名稱。

  3. 執行頁面。 將欄位保留空白,然後按一下 [ 提交]。 您會看到錯誤訊息。

    顯示使用者輸入未通過驗證時所顯示錯誤訊息的螢幕擷取畫面。

  4. 例如,將字串 (「ABC」) 新增至 [員工計數 ] 欄位,然後按一下 [再次 提交 ]。 這次您會看到錯誤,指出字串的格式不正確,也就是整數。

    顯示使用者輸入 [員工] 欄位字串時所顯示錯誤訊息的螢幕擷取畫面。

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

在回傳之後還原表單值

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

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

  1. 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 值全都是空的。 這沒問題,因為表單是空白的。

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

    forms-5

其他資源