上一篇文章 Asp.Net MVC中的@model與Model講解了後台控制器如何向前台頁面傳遞資料，今天就接著為大家講解前台View頁面向後台Controller控制器傳遞資料的幾種方式。這幾種方式是我在實際中使用並總結的，如果那個地方說的不對或有不足之處，歡迎各位指出並給出建設性意見、共同學習。
1、非同步方式
在實際項目開發中，我們經常需要非同步提交資料，可以在不提交當前頁面的時候即擷取到一些重要訊息。這樣既不會浪費網路資源，也不會造成伺服器負載。非同步方式主要有ajax、post、get三種
（1）ajax方式
/*判斷使用者是否已經登入*/ $(function () { $.ajax({ type: "post", url: "/MonthWin/Index/12", data:{"name":name,"sex":sex}, dataType: 'JSON', success: function (result) { if (result == true) { isLogin = true; } else { isLogin = false; } } }); })
（2）post方式
$.post(url, { "username": username, "province": province, "city": city, "branch": branch, "number": number, "bankName": bankName }, function (result) { if (result == "1") { alert("儲存成功"); location.reload(); } else { alert("儲存失敗"); location.reload(); } });
總結：非同步方式實現起來也比較簡單，當然這隻是一方面。其最重要的一點就是可以回傳值。我們可以根據後台傳過來的值進行下一步的操作，同時減少了一次伺服器請求，降低了網路負載。
2、表單方式
（1）post方式
<1>不通過js，直接提交的post方式
<form onsubmit="layer.load('請求提交中')" action="/WithFunding/StartFunding/12" method="post"><input type="hidden" name="CategoryId" value="12" /><input type="hidden" name="accountMoney" value="@ViewBag.Account" /><input type="hidden" name="totalFreezeMoney" value="@ViewBag.totalFreezeMoney" /><input type="hidden" name="totalWithFunding" value="@ViewBag.totalWithFunding" /><input type="hidden" name="totalDepositMoney" value="@ViewBag.totalDepositMoney" /><input type="hidden" name="moneyDeposit" value="@ViewBag.moneyDeposit" /><input type="hidden" name="moneyWithfunding" value="@ViewBag.moneyWithfunding" /><input type="hidden" name="rateOpen" value="@ViewBag.rateOpenLine" /><input type="hidden" name="rateWarn" value="@ViewBag.rateWarn" /><input type="hidden" name="defaultManageMoney" value="@ViewBag.defaultManageMoney" id="manageMoney" /><input type="hidden" name="startTime" value="@ViewBag.startTime" /><input type="hidden" name="ManageFeeRate" value="@ViewBag.moneyRate" /><input type="hidden" name="days" id="days" /><input type="button" onclick="history.go(-1)" value="返回修改" class="btn2" /></form>
<2>使用js提交的post方式
/*修改銀行卡*/ function updateBank() { var username = $.trim($("#username").val()); var branch = $.trim($("#branch").val()); var number = $.trim($("#changbankno").val()); var check = /^(\d{19})$/; var bankName = $("#addBankCode").find("option:selected").text(); if (username == "" || username == null) { alert("請輸入開戶名"); } else if (branch == "" || branch == null) { alert("請輸入開戶支行"); } else if (number == "" || number == null) { alert("請輸入銀行卡號"); } else if (!check.test(number)) { alert("請輸入正確的銀行卡格式"); } else if (bankName == "請選擇銀行") { alert("請選擇銀行"); } else { $("#Updatebank").submit(); } }
上面介紹的兩種form表單提交方式只能簡單的向後台提交資料，至於資料提交之後伺服器的傳回值，我們是看不到的。為了得到相應結果，我們還需要在後台添加代碼。這個在此就不再累述了。
總結：從上面的代碼我們可以看到post傳值方式可以傳遞的資料量幾乎不受限制，如果需要大量的傳值，post方式是一個不錯的選擇。
（2）get方式
表單提交的get方式也可以稱為QueryString方式，就是簡單的把要傳遞的資料放在Url之後。
<form onsubmit="layer.load('請求提交中')" action="/WithFunding/StartFunding/12?id=123" method="get"></form>
總結：不過get方式相比post的方式有很多不足：傳遞資料量有限制、不安全
當然在MVC中我們還可以通過HTML協助器實現表單提交，在此不在累述，具體請參考：MVC學習系列-HTML協助器的使用
3、非同步表單方式
<head> <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/form.js"></script> <script type="text/javascript"> // wait for the DOM to be loaded $(document).ready(function() { // bind 'myForm' and provide a simple callback function // 為myform綁定ajaxForm非同步提交事件，並提供一個簡單的回呼函數。 $('#myForm').ajaxForm(function() { alert("Thank you for your comment!"); }); }); </script> </head>總結：這種方式是前兩種方式的結合使用，當然也就結合了兩者的優點，比較方便
4、Model資料存放區模型方式
MVC 中的Model作為Controller和View之間交流的橋樑，當然也就可以在View和controller之間傳遞資料。該方式的實現主要分為以下三步：
（1）定義Model實體
public class Model { public string rtoNumber { set; get; } public string approver { set; get; } public string modifier { set; get; } public string comment { set; get; } }
（2）定義Html標籤
<div id="container"> <table id="table"> <tr> <td><label>RTONumber</label><input name="rtoNumber" /></td> <td><label>Approver</label><input name="approver" /></td> <td><label>Modifier</label><input name="modifier" /></td> <td><label>Comment</label><textarea name="comment" cols="30" rows="4"></textarea></td> </tr> </table> <input id="submit" type="button" value="submit"/></div>
（3）傳值
<script type="text/javascript"> $(function () { $('#submit').click(function () { var model = []; var subModel = []; $.each($("table tr"), function (i, item) { var RTONumber = $(item).find("[name=rtoNumber]").val(); var Approver = $(item).find("[name=approver]").val(); var Modifier = $(item).find("[name=modifier]").val(); var Comment = $(item).find("[name=comment]").val(); model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment, checkBoxValue: subModel }); }); $.ajax({ url: '/WithFunding/StartFunding', data: JSON.stringify(model), type: 'POST', contentType: 'application/json;charset=utf-8', async: false, success: function (data) { alert("Postting data is over!"); } }); }); });</script>總結：在資料存放區模型傳值方式中，我們也採用了ajax非同步方式。然而此種方式與ajax方式又有一些不同：傳遞的資料是Model實體類型。相信大家也看到了，雖然Model可以實現View傳值到Controller，但是代碼量比較大，而且不太好理解，所以在實際中我們使用的不多。
5、Url 路由方式
MVC開發方式中，我們請求的是控制器下面的一個Action，有時候Action需要參數，也就是路由參數。我們通過添加路由規則傳遞路由參數。
public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults ); }Url 路由傳值方式如下所示
http://localhost:39901/UserPay/Withdraw/12上面的12就是路由參數，對應的Action如下所示
public ActionResult Withdraw(int id) { int Cid = 0; var Mid = WebHelper.GetCookie(StockFunds.Key.CookieKey.MemberId);//使用者Id if (!string.IsNullOrWhiteSpace(Mid)) { Cid= Convert.ToInt32(SecureHelper.AESDecrypt(Mid)); } string Username = Request["username"]; string province = Request.Form["province"]; string city = Request["city"]; string branch = Request["branch"];//支行 string number = Request["number"];//卡號 string bankName = Request["bankName"];//開戶銀行 F_Member_Banks bank = new F_Member_Banks(); bank.BankName = bankName; bank.BankNo = number; bank.MId = Cid; bank.CardHolder = Username; bank.AddDate = System.DateTime.Now; bank.AccountBranck = branch; var res = BLL.F_MemberBLL.GetMember.BandBinding(bank).ToString(); return Content(res); }
總結：Url 路由方式傳值方式的資料量很有限，不適於大資料量的傳遞。
上面只是講解了前台向後台傳值的幾種方式，具體後台如何接受資料就不再說明了。希望對大家有協助。
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
