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>
<form action="/Home/Index" method="post"></form>
</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>
            <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兩者最大的差異。

沒有留言: