asp.net MVC前台View页面向后台Controller控制器传递数据的几种方式
Posted 躬匠
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了asp.net MVC前台View页面向后台Controller控制器传递数据的几种方式相关的知识,希望对你有一定的参考价值。
上一篇文章 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 οnsubmit="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" οnclick="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 = /^(\\d19)$/;
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 οnsubmit="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 路由方式传值方式的数据量很有限,不适于大数据量的传递。
上面只是讲解了前台向后台传值的几种方式,具体后台如何接受数据就不再说明了。希望对大家有帮助。
以上是关于asp.net MVC前台View页面向后台Controller控制器传递数据的几种方式的主要内容,如果未能解决你的问题,请参考以下文章