[ASP.NET][MVC] ASP.NET MVC (4) : 繪製表單與 HTTP POST

截至第三篇文章為止,我們使用的都是 HTTP GET 協定,包括撈資料時的 ?CustomerID=AFAKI 這種,都是以 GET 作基礎的,但是有時我們也會需要提交資料給應用程式,這時我們需要的就是 HTTP POST,而想到 POST 就會想到表單 (form)...

截至第三篇文章為止,我們使用的都是 HTTP GET 協定,包括撈資料時的 ?CustomerID=AFAKI 這種,都是以 GET 作基礎的,但是有時我們也會需要提交資料給應用程式,這時我們需要的就是 HTTP POST,而想到 POST 就會想到表單 (form),在 ASP.NET Web Form 中,表單控制項都由 ASP.NET 提供好了,像是 Button, RadioButton, Checkbox, DropDownList, Label 等等,而在 ASP.NET MVC 中,一樣有這些東西,但是它不是用控制項來呈現,而是用一個叫做 HTML Helper 的 View 輔助物件來實作,每一個 View 都可以存取 HTML Helper 物件,它提供了支援繪製 (render) 表單控制項所需要的擴充方法 (extension methods),來簡化表單控制項的產出,它也簡化了表單和資料的套用。

HTML Helper 在 View 裡面是這樣用的:

   1: @{
   2:     ViewBag.Title = "Index";
   3: }
   4:  
   5: <h2>Index</h2>
   6: @{ Html.BeginForm("PostData", "My", FormMethod.Post); }
   7:  
   8: <p>
   9:    Value1: @Html.TextBox("Value1")
  10: </p>
  11: <p>
  12:    Value2: @Html.TextBox("Value2")
  13: </p>
  14:  
  15: <input type="submit" value=" OK " />
  16:  
  17: @{ Html.EndForm(); }

很多原本要寫 HTML 指令的部份,都被 HTML Helper 包起來了,只需要傳遞給它正確的參數,就能將 HTML 產生出來,對編寫 View 的工作來說算是減輕了一點點,為何只有一點點?因為 HTML Helper 只針對表單以及會和 Action/Route 有關的 HTML 指令做簡化操作,其他跟排版,表格或是不在表單類型內的 HTML,還是要自己寫的,不過這樣就已經足夠,尤其是常接美編版面的開發人員,以往要和 ASP.NET Controls 奮戰的情況已經幾乎消失,而且 HTML 彈性的最大化也讓接美編版的開發人員能不受 controls 的限制。不過表單中的 Button 控制項和 Image Button 控制項是例外,因為在一個表單中,只需要一個 submit,Button 本身並沒有套用資料,而且也沒有需要額外設定的東西,把 Button 的設定權直接交給開發人員,會比硬套在 HTML Helper 來得彈性。

 

有了表單後,我們就可以來寫接它資料的 Controller 了,依照 MVC Pattern 的架構,開發人員需要在 Controller 中加入一個 Action,而和 HTTP GET 不一樣的是,要特別在 Action 上標註 [HttpPost],以標記此 Action 必須要用 HTTP POST 叫用。

   1: [HttpPost]
   2: public ActionResult PostData(string Value1, string Value2)
   3: {
   4:     ViewData["Result"] = Convert.ToInt32(Value1) + Convert.ToInt32(Value2);
   5:     return View();
   6: }

MVC 在處理 HTTP POST 時,除了會呼叫指定給 HTTP POST 的 Action 外,還會自動依照 POST 各欄位的名稱,去對應參數值,開發人員只需要負責對應好 name 和參數的名稱,其他雜七雜八的東西,就交給 MVC Engine 去做就可以了,在本例中,我們用的是 a + b 的功能,也就是計算 a + b 的值,然後輸出到網頁上,而結果的輸出則由 PostData.cshtml 這個 View 來做,它也很簡單,只是把 ViewData 輸出而已。

   1: @{
   2:     ViewBag.Title = "PostData";
   3: }
   4:  
   5: <h2>PostData</h2>
   6: <p>
   7:     Result: @Html.Label(ViewData["Result"].ToString())
   8: </p>

執行起來的結果是:

image

輸入兩個數字後按 OK,會得到 Value1 + Value2 的值:

image

Reference:

http://www.asp.net/mvc/tutorials/mvc-music-store/mvc-music-store-part-5