ASP.NET MVC第007天_表單Get和Post_將View輸入資料傳到Contoller
基本上Get Post的觀念之前在PHP也有演練過
相同觀念就不再贅述了
任何網頁語言都離不開這兩個網頁傳值基礎
這裡一樣建立一個乾淨的MVC空專案
新增一組Controller 跟 對應的View
取名為FormController
專案目錄架構
這裡要演示從 FormController 的 Index View提交表單的過程
透過Get 跟 Post 到HomeController 中 Action回應的Index View
當中差異
發送端(提交到Server後端)
/Views/Form/Index.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> <form action="/Home/About" method="get"> <input type="text" name="txt_name" /> <input type="submit" value="查詢" /> </form> </div> </body> </html> |
FormController.cs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MyEmptyMVC_1.Controllers { public class FormController : Controller { // GET: Form public ActionResult Index() { return View(); } } } |
/Views/Home/About.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>About</title> </head> <body> <div> <h3>你輸入的人員名稱:@ViewBag.Name</h3> </div> </body> </html> |
這裡要小心注意txt_name(也就是你get傳送時候的參數命名)跟接收端要記得兩邊一致
HomeController.cs接收端的Controller(Server Side)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MyEmptyMVC_1.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } public ActionResult About(string txt_name) { ViewBag.Name = txt_name; return View(); } } } |
運行結果
當然多個參數也就依此類推
action function多增加一個參數
另一種方式Post
發送端(提交到Server後端)
/Views/Form/Index.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> <form action="/Home/About" method="post"> 姓名:<input type="text" name="txt_name" /><br/> 電話:<input type="text" name="txt_phone" /><br /> <input type="submit" value="查詢" /> </form> </div> </body> </html> |
接收端的Controller(Server Side)
HomeController.cs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MyEmptyMVC_1.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } public ActionResult About(FormCollection post) { ViewBag.Name = post["txt_name"]; ViewBag.Phone = post["txt_phone"]; return View(); } } } |
效果
好吧那竟然學了.net mvc 當然也要入境隨俗
學一下它特別的專有語法
Html.BeginForm("動作名稱" , "控制器名稱" , Method)
主要適用於替換Form這組 Tag的
<form action="xxx" method="{get/post}">
</form>
Html.BeginForm版本的Get寫法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> @using (Html.BeginForm("About", "Home", FormMethod.Get)) { <label>姓名:</label><input type="text" name="txt_name" /><br /> <label>電話:</label><input type="text" name="txt_phone" /><br /> <input type="submit" value="查詢" /> } </div> </body> </html> |
效果
Html.BeginForm版本的Post寫法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> @using (Html.BeginForm("About", "Home", FormMethod.Post)) { <label>姓名:</label><input type="text" name="txt_name" /><br /> <label>電話:</label><input type="text" name="txt_phone" /><br /> <input type="submit" value="查詢" /> } </div> </body> </html> |
留言
張貼留言