2.2 處理表單元素

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

使用者透過表單與應用程式進行互動,除了表單本身,表單中的輸入文字,包含文字方塊、隱藏欄位與核取方塊等等,均有對應的方法可以調用,例如要在網頁上配置一個文字方塊所需的Razor語法如下:

@Html.TextBox("tb","hello")

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

<input id="tb" name="tb" type="text" value="hello" />

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

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

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

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

無論TextBox或是Label,其中的第二個參數都可以省略,如此一來會建立一個空白文字方塊或是標籤元素,,考慮以下的配置設計:

@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();
}

透過ViewData重新在網頁中將其取出,回到檢視檔案,修改內容如下:

@{
    ViewBag.Title = "FormData";
}
<h2>表單資料</h2>
@if (ViewData["Name"] != null)
{
<p>您的基本資料如下:</p>
<p> @Html.Label("Name", "姓名")
<span>@ViewData["Name"].ToString()</span></p>
      <p> @Html.Label("Email", "郵件")
<span>@ViewData["Email"].ToString()</span></p>
        <p> @Html.Label("Phone", "電話")
<span>@ViewData["Phone"].ToString()</span></p>}
else
{
    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="傳送" />
    }
}

這一次加入了 if判斷式,如果回傳的 ViewData["Name"] 為空值,表示第一次瀏覽網頁,因此預設的控制器動作方法 /Forms/FormData會執行,因此 else 區塊會執行並建立表單。當使用者填入資料並且按下「傳送」按鈕,資料被封裝成 FormCollection 物件一併回傳,此次會執行參數版本的 FormData 方法,因此取出其中的欄位逐一設定給 ViewData ,最後回傳檢視表,這一次ViewData["Name"] 並非空值,因此將其中的內容取出,直接顯示於網頁上。

以下來看執行結果:



在第一個畫面中的表單裏面,輸入個人資料,按一下「傳送」按鈕,重新返回畫面顯示使用者輸入的資料內容。



2 則留言:

MIS2000 Lab. (ASP.NET專題實務) 提到...

這篇文章寫得很棒,淺顯易懂。 :-) 讚!

康廷數位 提到...

謝謝XD