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兩者最大的差異。
沒有留言:
張貼留言