康廷數位: 2.1 表單配置

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

網頁依賴表單搜集資料，回傳伺服器進行儲存以及運算處理，ASP.ENT MVC開發人員透過Razor語法動態建立表單元素內容，自動轉換成所需的HTML標籤，第一章的概念課程中，我們看到了初步的示範，這一章將進一步專注於表單元素相關議題的細節討論。

表單是商業應用常見的網頁元素，負責收集使用者的輸入資料，例如會員註冊資訊等等，在網頁中製作表單主要是利用Helper方法動態建立，假設有一個控制器HomeController.cs，其中的動作方法Index() 如下：

public ActionResult Index()

{

return View();

}

於對應此方法的檢視檔案Home/Index.cshtml中，配置如下的Razor語法：

@using(Html.BeginForm())

{

<!— 表單內容 -->

}

此檢視檔案於瀏覽器顯示會產生以下的內容：

<div>

</div>

在預設的情形下，action 屬性指向此檢視原來的動作方法，而 method 為 post ，我們可以進一步透過Html.BeginForm()的參數設定，調整這些預設屬性值，來看看這個方法的定義，它有數個多載版本：

public static MvcForm BeginForm(

this HtmlHelper htmlHelper,

string actionName,

string controllerName

)

這個版本的方法允許你指定重新導向的動作方法與控制器，如果要進一步調整參數的方法需調用以下的版本：

public static MvcForm BeginForm(

this HtmlHelper htmlHelper,

string actionName,

string controllerName ,

FormMethod method

)

第三個參數是FormMethod列舉型別，可以根據需求指定為FormMethod.Get或是FormMethod.Post，強制要求表單以指定的方式回傳。這段語法建立的表單，會返回至與檢視關聯的預設控制器，你也可以指定其它參數如下：

using(Html.BeginForm(action-method, controller, FormMethod))

第一個參數為所要執行的動作名稱，第二個參數則是目標控制器，指定了這兩個參數之後，表單內容被傳送至controller控制器中的action-method方法裏面。另外還可以指定第三個參數，控制表單以GET 或 POST 方式回傳，這是一個列舉值，設定如下：

列舉成員	說明
FormMethod.Get	指定 GET 要求。
FormMethod.Post	指定 POST 要求。

為了說明上述的內容，於HomeController建立以下三個動作方法：

public ActionResult FormDemo()

{

return View();

}

public ActionResult FormDemoA()

{

// …

}

public ActionResult FormDemoB()

{

// …

}

建立FormDemo() 對應的檢視FormDemo.cshtml，配置以下的內容：

<body>

<div>

@using (Html.BeginForm("FormDemoA", "Home", FormMethod.Get))

{

<label>FormA</label>

}

</div>

<div>

@using (Html.BeginForm("FormDemoB", "Home", FormMethod.Post))

{

<label>FormB</label>

}

</div>

</body>

這在網頁上形成兩組由Html.BeginForm()建構的表單，各包含一個文字方塊與按鈕，並且分別指定表單傳送之後對應的控制器與動作方法，透過設定FormMethod列舉指定為Get或是 Post，請特別注意其中的文字方塊，其識別名稱設定為message，後續於控制器中透過此名稱取出回傳的表單值。

這是表單呈現的畫面，當使用者於FormA欄位輸入特定訊息，按下第一組的按鈕，要求將以Get方式傳送至動作方法FormDemoA()。

動作方法FormDemoA()承接按下傳送過來的文字方塊內容進行處理。

public ActionResult FormDemoA()

{

ViewBag.Message = "GET：" + Request.QueryString["message"];

return View();

}

其中透過Request.QueryString指定表單中文字方塊識別名稱message，取得使用者填入文字方塊的內容，最後回傳對應的檢視檔案內容如下：

如果使用者按下第二組的按鈕，要求將以Post方式傳送至動作方法FormDemoB()。

第二個按鈕將要求回傳至FormDemoB，程式內容如下：

public ActionResult FormDemoB()

{

ViewBag.Message = "POST：" + Request.Form["message"];

return View();

}

這一次必須透過Request.Form指定表單中文字方塊識別名稱message，取得使用者填入文字方塊的內容，得到以下的結果畫面：

相較於上述第一個按鈕按下後的結果畫面兩相比較，讀者可以發現採用Get方法傳送的資料會附加於網址列，這是Get與Post兩者最大的差異。

康廷數位

2.1 表單配置

沒有留言:

熱門點閱