2.2 處理表單元素

ASP.NET MVC 實務精要｜第二章 表單

使用者透過表單與應用程式進行互動，而我們看到了ASP.NET MVC 中表單的建立主要是透過Helper實作：

Html.BeginForm()

除了表單本身，表單中的輸入文字，包含文字方塊、隱藏欄位與核取方塊等等，均有對應的方法可以調用，例如要在網頁上配置一個文字方塊所需的Razor語法如下：

Html.TextBox("xTextbox")

其中參數值xTextbox最後成為 name 與 id 屬性值，這會在網頁上建立一個input 標籤，並且其 type 屬性為 text 如下：

<input id="Name" name="xTextbox" type="text" value="" />

如果要指定其中的value屬性值，則指定第二個參數即。

@Html.TextBox("xTextbox","x")

在網頁這一行會建立以下的Input標籤內容：

<input id="xTextbox" name="xTextbox" type="text" value="x" />

如你所見，其中的value屬性已經自動填入 x 。另外還有一個建立表單常用的Lable標籤，需要的語法如下：

@Html.Label("Name", "姓名")

第一個參數Name是labe 標籤的for屬性值，第二個參數則是標籤在網頁上顯示的名稱，最後在網頁上建立如下的Label標籤：

<label for="Name" >姓名</label>

現在我們可以利用這些Helper方法取代直接以HTML標籤建立的表單內容，考慮以下的配置設計：

@using (Html.BeginForm())

{

    <p> @Html.Label("Name","姓名")  @Html.TextBox("Name")</p>

    <p> @Html.Label("Email","郵件")  @Html.TextBox("Email")</p>

    <p> @Html.Label("Phone","電話")  @Html.TextBox("Phone")</p>

    <input type="submit" value="傳送" />

}

最後一行是一個submit的傳送按鈕，按一下按鈕便會將其中的三個文字方塊欄位內容回傳，這個檢視最後在瀏覽器顯示的畫面如下：



檢視其轉換完成的HTML內容：

<form action="/Forms/FormData" method="post">           

<p> <label for="Name">姓名</label> 

<input id="Name" name="Name" type="text" value="" /></p>

  …

  <input type="submit"  value="傳送"/>

</form>

form 標籤的 action 屬性指向對應的動作方法 /Forms/FormData ，而 method 為 post ，因此現在回傳Forms.cs 控制器中，建立以下的動作方法以接收回傳進來的表單資料：

[HttpPost]

public ActionResult FormData(FormCollection formCollection)

{

    // 取出表單欄位值

return View();

}

第一行的HttpPost屬性標示此為post 方法，如此一來表單資料才會被正確的回傳至此動作方法，接下來第二行中的參數 formCollection 是一個 FormCollection 物件，其中封裝了所有回傳的表單欄位資料，將表單上文字方塊欄位的名稱當作索引鍵值傳入物件即可逐一取出表單欄位值，例如 formCollection["Name"] 取出使用者輸入「姓名」文字方塊中的值。
取得表單資料，接下來我們就可以進一步針對資料進行處理，無論是將其儲存至資料庫，或是重新回傳至網頁，這裏我們嘗試將三個文字方塊的內容重新回傳，為了方便在檢視中取得這些資料，將其設定給ViewData ，於 FormData 方法中加入程式碼如下：

[HttpPost]

public ActionResult FormData(FormCollection formCollection)

{

    // 取出表單欄位值

ViewData["Name"] = formCollection["Name"];

     ViewData["Email"] = formCollection["Email"];

     ViewData["Phone"] = formCollection["Phone"];

      return View();

}