asp.net MVC前臺View頁面向後臺Controller控制器傳遞資料的幾種方式
阿新 • • 發佈：2019-02-09
上一篇文章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>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
);
}http://localhost:39901/UserPay/Withdraw/12 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 路由方式傳值方式的資料量很有限，不適於大資料量的傳遞。
上面只是講解了前臺向後臺傳值的幾種方式，具體後臺如何接受資料就不再說明了。希望對大家有幫助。