ASP.NET MVC 實務精要｜第二章 表單
網頁依賴表單搜集資料，回傳伺服器進行儲存以及運算處理，ASP.ENT MVC開發人員透過Razor語法動態建立表單元素內容，自動轉換成所需的HTML標籤，第一章的概念課程中，我們看到了初步的示範，這一章將進一步專注於表單元素相關議題的細節討論。
表單是商業應用常見的網頁元素，負責收集使用者的輸入資料，例如會員註冊資訊等等，在網頁中製作表單主要是利用Helper方法動態建立，假設有一個控制器HomeController.cs，其中的動作方法Index() 如下：
於對應此方法的檢視檔案Home/Index.cshtml中，配置如下的Razor語法：
此檢視檔案於瀏覽器顯示會產生以下的內容：
在預設的情形下，action 屬性指向此檢視原來的動作方法，而 method 為 post ，我們可以進一步透過Html.BeginForm()的參數設定，調整這些預設屬性值，來看看這個方法的定義，它有數個多載版本：
這個版本的方法允許你指定重新導向的動作方法與控制器，如果要進一步調整參數的方法需調用以下的版本：
第三個參數是FormMethod列舉型別，可以根據需求指定為FormMethod.Get或是FormMethod.Post，強制要求表單以指定的方式回傳。這段語法建立的表單，會返回至與檢視關聯的預設控制器，你也可以指定其它參數如下：
第一個參數為所要執行的動作名稱，第二個參數則是目標控制器，指定了這兩個參數之後，表單內容被傳送至controller控制器中的action-method方法裏面。另外還可以指定第三個參數，控制表單以GET 或 POST 方式回傳，這是一個列舉值，設定如下：
為了說明上述的內容，於HomeController建立以下三個動作方法：
建立FormDemo() 對應的檢視FormDemo.cshtml，配置以下的內容：
這在網頁上形成兩組由Html.BeginForm()建構的表單，各包含一個文字方塊與按鈕，並且分別指定表單傳送之後對應的控制器與動作方法，透過設定FormMethod列舉指定為Get或是 Post，請特別注意其中的文字方塊，其識別名稱設定為message，後續於控制器中透過此名稱取出回傳的表單值。
這是表單呈現的畫面，當使用者於FormA欄位輸入特定訊息，按下第一組的按鈕，要求將以Get方式傳送至動作方法FormDemoA()。
動作方法FormDemoA()承接按下傳送過來的文字方塊內容進行處理。
其中透過Request.QueryString指定表單中文字方塊識別名稱message，取得使用者填入文字方塊的內容，最後回傳對應的檢視檔案內容如下：
如果使用者按下第二組的按鈕，要求將以Post方式傳送至動作方法FormDemoB()。
第二個按鈕將要求回傳至FormDemoB，程式內容如下：
這一次必須透過Request.Form指定表單中文字方塊識別名稱message，取得使用者填入文字方塊的內容，得到以下的結果畫面：
相較於上述第一個按鈕按下後的結果畫面兩相比較，讀者可以發現採用Get方法傳送的資料會附加於網址列，這是Get與Post兩者最大的差異。
表單是商業應用常見的網頁元素，負責收集使用者的輸入資料，例如會員註冊資訊等等，在網頁中製作表單主要是利用Helper方法動態建立，假設有一個控制器HomeController.cs，其中的動作方法Index() 如下：
public ActionResult Index()
{
return View();
}
於對應此方法的檢視檔案Home/Index.cshtml中，配置如下的Razor語法：
@using(Html.BeginForm())
{
<!— 表單內容 -->
}
此檢視檔案於瀏覽器顯示會產生以下的內容：
<div>
<form action="/Home/Index" method="post"></form>
</div>
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>
<input id="messageA" name="message" />
<input type="submit" value="利用Get傳送至FormA" />
}
</div>
<div>
@using (Html.BeginForm("FormDemoB", "Home", FormMethod.Post))
{
<label>FormB</label>
<input id="messageB" name="message" />
<input type="submit" value="利用Post傳送至FormB" />
}
</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兩者最大的差異。
沒有留言:
張貼留言