標籤：大量 分享 記錄 div 大小限制 input for 轉換 cap
使用ASP.NET MVC做開發時，經常需要在頁面（View）和控制器（Controller）之間傳遞資料，那麼都有哪些資料傳遞的方式呢？
本文對於View向Controller中傳值共列舉了以下幾種方式：
對於Controller向View中傳值則列舉了以下幾種方式：
QueryString
View中代碼：
<div> <button id="btn">提交</button></div><script> $(function () { $(‘#btn‘).click(function () { //url不區分大小寫 location.href = "/home/getvalue?method=querystring"; }); });</script>Controller中代碼：
public void GetValue(){ //Request屬性可用來擷取querystring,form表單以及cookie中的值 var querystring = Request["method"];}使用querystring向後台傳遞屬於http協議中的get方式，即資料會暴露在url中，安全性不高（可通過瀏覽器記錄看到發送的資料）且傳遞的資料量有大小限制。
點擊提交按鈕後瀏覽器地址欄中的地址：http://localhost:57625/home/getvalue?method=querystring
RouteData
路由可以讓我們寫出可讀性較高的url，使用路由傳遞資料，首先要配置合適的路由：
routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}");前端代碼只需要將location.href的值改為和路由匹配的url即可，本樣本中為"/home/getvalue/100"
Controller中的代碼：
public void GetValue(){ var value = RouteData.Values["id"];}擷取的值是object類型
擷取路由參數的另外一種方式是給Action設定一個和路由模板中指定的參數名一致（不區分大小寫）的參數即可，代碼如下：
public void GetValue(int id){}注意：這裡不僅擷取了路由資料，而且自動將資料類型轉換為int類型
querystring和路由均是通過url進行資料的傳遞，若資料中包含中文應進行Encode操作。此外，url的長度是有限制的，使用url不可傳遞過多的資料。url傳遞參數屬於Http協議中的Get請求，若要發送大量資料可以使用Post請求。
ModelBinding
1. Form
form表單形式是常見的向後端發送資料的方式，但是在提交資料是只會提交form表單內部具有name屬性的input,textarea,select標籤的value值。
View中的代碼：
<form action="/home/getvalue" method="post"> <input type="text" name="username" /> <input type="text" name="age" /> <input type="submit" name="button" value="提交" /></form>Controller中的代碼：
public void GetValue(){ var name = Request["username"]; var age = Request["age"]; var btn = Request["button"];}擷取到的資料均為string類型
現在我們建立一個和form表單對應的類：
public class User{ public string UserName { set; get; } public int Age { set; get; }}修改Action的代碼如下：
public void GetValue(User user){}然後運行程式，可以看到MVC以將表單中的資料對應為User類執行個體的屬性值，且進行了相應的資料類型的轉換。
2. 使用和Action參數同名的變數進行傳遞
View中的代碼：
<button id="btn">傳遞資料</button><script> $(function () { $(‘#btn‘).click(function () { $.ajax({ ‘type‘: ‘post‘, ‘url‘: ‘/home/getdata‘, //傳遞的資料也可以是序列化之後的json格式資料 //如，上面使用form表單提交資料就可以使用jquery中的serialize()方法將表單進行序列化之後在提交 //data:$(‘#form‘).serialize() ‘data‘: { username: ‘雪飛鴻‘, age: ‘24‘ }, error: function (message) { alert(‘error!‘); } }); }) })</script>Controller中的代碼：
public void GetData(string username, int age){}在Action中成功擷取到了對應的參數值，且資料類型也根據Action中參數的類型進行了相應的轉換。
Model綁定體現在從當前請求提取相應的資料繫結到目標Action方法的同名參數（不區分大小寫）中。對於這樣的一個Action，如果是Post請求，MVC會嘗試將Form（注意，這裡的Form不是指html中的<form>表單，而是Post方法發送資料的方式，若我們使用開發人員工具查看Post方式發送的請求資訊，會看到Form Data一欄）中的值賦值到Action參數中，如果是get請求，MVC會嘗試將QueryString的值賦值到Action參數中。
Cookie
這裡引用jquery.cookie外掛程式來進行cookie的操作
<body> <button id="btn">提交</button> <script> $(function () { //向cookie中寫入值 $.cookie(‘key‘, ‘jscookie‘); $(‘#btn‘).click(function () { location.href = "/home/getvalue"; }); }) </script></body>public void GetValue(){ var cookie = Request["key"];}單個值的傳遞
public ActionResult Index(){ //注意，傳遞的值不能是string類型，否則會執行View(string viewName)方法而導致得不到正確結果 return View(100);}<body> <p>@Model</p></body>Json
public ActionResult Index(){ return View();}public JsonResult SendData(){ return Json(new { UserName = "雪飛鴻", Age = 24 });}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <script src="~/scripts/jquery-1.10.2.min.js"></script></head><body> <p id="message"></p> <button id="btn">擷取資料</button> <script> $(function () { $(‘#btn‘).click(function () { $.ajax({ ‘url‘: ‘/home/senddata‘, ‘type‘: ‘post‘, success: function (data) { $(‘#message‘).html(‘使用者名稱：‘ + data.UserName + "<br/>年齡：" + data.Age); }, error: function (message) { alert(‘error:‘ + message.statusText); } }); }); }); </script></body></html>匿名型別
public ActionResult Index(){ //使用匿名類向View中傳遞資料 return View(new { UserName = "雪飛鴻", Age = 24 });}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /></head><body> <p>使用者名稱：@Model.UserName</p> <p>年齡：@Model.Age</p></body></html>因為匿名型別的類型名由編譯器產生，並且不能在原始碼級使用。所以，直接使用匿名型別向View中傳遞資料，在前台頁面是無法訪問到匿名型別中的屬性的。執行上面代碼程式會出現錯誤：
針對上述問題，使用Newtonsoft將匿名型別轉換為json格式即可解決該問題。
使用NuGet引入Newtonsoft.Json包，然後修改代碼如下：
public ActionResult Index(){ string json = JsonConvert.SerializeObject(new { UserName = "雪飛鴻", Age = 24 }); //也可以直接序列化JSON格式的字串 //dynamic jsonObj = JsonConvert.DeserializeObject("{ UserName : \"雪飛鴻\", Age : 24 }"); dynamic jsonObj = JsonConvert.DeserializeObject(json); return View(jsonObj);}ExpandoObject
上面提到，直接使用匿名型別向View中傳遞資料是行不通的，可以使用ExpandoObject類型對象來替代匿名型別
public ActionResult Index(){ dynamic user = new ExpandoObject(); user.UserName = "雪飛鴻"; user.Age = 24; return View(user);}ViewBag、ViewData、TempData
public ActionResult Index(){ ViewBag.Title = "資料傳遞"; ViewData["key"] = "傳遞資料"; //預設情況下TempData中的資料只能使用一次 TempData["temp"] = "tempdata"; return View();}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title></head><body> <p>@ViewData["key"]</p> <p>@TempData["temp"]</p></body></html>ViewModel
通過視圖模型將資料傳遞到前端
//視圖模型public class User{ public string UserName { set; get; } public int Age { set; get; }}//Actionpublic ActionResult Index(){ User user = new User() { UserName = "雪飛鴻", Age = 24 }; return View(user);}@* 設定頁面為強型別頁面 *@@model DataTransfer.Controllers.User@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /></head><body> <p>使用者名稱：@Model.UserName</p> <p>年齡：@Model.Age</p></body></html>Cookie
public ActionResult Index(){ Response.SetCookie(new HttpCookie("key", "cookie")); return View();}<body> <p id="message"></p> <script> $(function () { var message = $.cookie(‘key‘); $(‘#message‘).text(message); }) </script></body>ASP.NET MVC5中View-Controller間資料的傳遞
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
