asp.net MVC前台View页面向后台Controller控制器传递数据的几种方式

https://blog.csdn.net/ydm19891101/article/details/44336951

上一篇文章 Asp.Net MVC中的@model与Model讲解了后台控制器如何向前台页面传递数据，今天就接着为大家讲解前台View页面向后台Controller控制器传递数据的几种方式。这几种方式是我在实际中使用并总结的，如果那个地方说的不对或有不足之处，欢迎各位指出并给出建设性意见、共同学习。

1、异步方式

在实际项目开发中，我们经常需要异步提交数据，可以在不提交当前页面的时候即获取到一些重要信息。这样既不会浪费网络资源，也不会造成服务器负载。异步方式主要有ajax、post、get三种

（1）ajax方式

[javascript]  view plain  copy

1. /*判断用户是否已经登录*/  
2.         $(function () {  
3.             $.ajax({  
4.                 type: "post",  
5.                 url: "/MonthWin/Index/12",  
6.                 data:{"name":name,"sex":sex},  
7.                 dataType: 'JSON',  
8.                 success: function (result) {  
9.                     if (result == true) {  
10.                         isLogin = true;  
11.                     }  
12.                     else {  
13.                         isLogin = false;  
14.                     }  
15.                 }  
16.             });  
17.         })  

（2）post方式

[javascript]  view plain  copy

1. $.post(url, { "username": username, "province": province, "city": city, "branch": branch, "number": number, "bankName": bankName },  
2.                function (result) {  
3.                    if (result == "1") {  
4.                        alert("保存成功");  
5.                        location.reload();  
6.                    }  
7.                    else {  
8.                        alert("保存失败");  
9.                        location.reload();  
10.                    }  
11.                });  

总结：异步方式实现起来也比较简单，当然这只是一方面。其最重要的一点就是可以回传值。我们可以根据后台传过来的值进行下一步的操作，同时减少了一次服务器请求，降低了网络负载。

2、表单方式

（1）post方式

<1>不通过js，直接提交的post方式

[html]  view plain  copy

1. <form onsubmit="layer.load('请求提交中')" action="/WithFunding/StartFunding/12" method="post">  
2. <input type="hidden" name="CategoryId" value="12" />  
3. <input type="hidden" name="accountMoney" value="@ViewBag.Account" />  
4. <input type="hidden" name="totalFreezeMoney" value="@ViewBag.totalFreezeMoney" />  
5. <input type="hidden" name="totalWithFunding" value="@ViewBag.totalWithFunding" />  
6. <input type="hidden" name="totalDepositMoney" value="@ViewBag.totalDepositMoney" />  
7. <input type="hidden" name="moneyDeposit" value="@ViewBag.moneyDeposit" />  
8. <input type="hidden" name="moneyWithfunding" value="@ViewBag.moneyWithfunding" />  
9. <input type="hidden" name="rateOpen" value="@ViewBag.rateOpenLine" />  
10. <input type="hidden" name="rateWarn" value="@ViewBag.rateWarn" />  
11. <input type="hidden" name="defaultManageMoney" value="@ViewBag.defaultManageMoney" id="manageMoney" />  
12. <input type="hidden" name="startTime" value="@ViewBag.startTime" />  
13. <input type="hidden" name="ManageFeeRate" value="@ViewBag.moneyRate" />  
14. <input type="hidden" name="days" id="days" />  
15. <input type="button" onclick="history.go(-1)" value="返回修改" class="btn2" />  
16. </form>  

<2>使用js提交的post方式

[javascript]  view plain  copy

1. /*修改银行卡*/  
2. function updateBank() {  
3.     var username = $.trim($("#username").val());  
4.     var branch = $.trim($("#branch").val());  
5.     var number = $.trim($("#changbankno").val());  
6.     var check = /^(\d{19})$/;  
7.     var bankName = $("#addBankCode").find("option:selected").text();  
8.     if (username == "" || username == null) {  
9.         alert("请输入开户名");  
10.     }  
11.     else if (branch == "" || branch == null) {  
12.         alert("请输入开户支行");  
13.     }  
14.     else if (number == "" || number == null) {  
15.         alert("请输入银行卡号");  
16.     }  
17.     else if (!check.test(number)) {  
18.         alert("请输入正确的银行卡格式");  
19.     }  
20.     else if (bankName == "请选择银行") {  
21.         alert("请选择银行");  
22.     }  
23.     else {  
24.         $("#Updatebank").submit();  
25.     }  
26. }   

上面介绍的两种form表单提交方式只能简单的向后台提交数据，至于数据提交之后服务器的返回值，我们是看不到的。为了得到相应结果，我们还需要在后台添加代码。这个在此就不再累述了。

总结：从上面的代码我们可以看到post传值方式可以传递的数据量几乎不受限制，如果需要大量的传值，post方式是一个不错的选择。

           

（2）get方式

表单提交的get方式也可以称为QueryString方式，就是简单的把要传递的数据放在Url之后。

[html]  view plain  copy

1. <form onsubmit="layer.load('请求提交中')" action="/WithFunding/StartFunding/12?id=123" method="get"></form>  

总结：不过get方式相比post的方式有很多不足：传递数据量有限制、不安全

当然在MVC中我们还可以通过HTML帮助器实现表单提交，在此不在累述，具体请参考：MVC学习系列-HTML帮助器的使用

3、异步表单方式

[javascript]  view plain  copy

1. <head>   
2.     <script type="text/javascript" src="path/to/jquery.js"></script>   
3.     <script type="text/javascript" src="path/to/form.js"></script>   
4.    
5.     <script type="text/javascript">   
6.         // wait for the DOM to be loaded   
7.         $(document).ready(function() {   
8.             // bind 'myForm' and provide a simple callback function   
9.             // 为myform绑定ajaxForm异步提交事件，并提供一个简单的回调函数。  
10.             $('#myForm').ajaxForm(function() {   
11.                 alert("Thank you for your comment!");   
12.             });   
13.         });   
14.     </script>   
15. </head>  

总结：这种方式是前两种方式的结合使用，当然也就结合了两者的优点，比较方便

4、Model数据存储模型方式

MVC 中的Model作为Controller和View之间交流的桥梁，当然也就可以在View和controller之间传递数据。该方式的实现主要分为以下三步：

（1）定义Model实体

[csharp]  view plain  copy

1. public class Model  
2.     {  
3.         public string rtoNumber { set; get; }  
4.         public string approver { set; get; }  
5.         public string modifier { set; get; }  
6.         public string comment { set; get; }  
7.     }  

（2）定义Html标签

[html]  view plain  copy

1. <div id="container">  
2.         <table id="table">  
3.             <tr>  
4.                 <td><label>RTONumber</label><input name="rtoNumber" /></td>  
5.                 <td><label>Approver</label><input name="approver" /></td>  
6.                 <td><label>Modifier</label><input name="modifier" /></td>  
7.                 <td><label>Comment</label><textarea name="comment" cols="30" rows="4"></textarea></td>  
8.             </tr>  
9.         </table>  
10.         <input id="submit" type="button" value="submit"/>  
11. </div>  

（3）传值

[javascript]  view plain  copy

1. <script type="text/javascript">  
2.         $(function () {  
3.             $('#submit').click(function () {  
4.                 var model = [];  
5.                 var subModel = [];  
6.                 $.each($("table tr"), function (i, item) {  
7.                     var RTONumber = $(item).find("[name=rtoNumber]").val();  
8.                     var Approver = $(item).find("[name=approver]").val();  
9.                     var Modifier = $(item).find("[name=modifier]").val();  
10.                     var Comment = $(item).find("[name=comment]").val();  
11.                     model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment, checkBoxValue: subModel });  
12.                 });  
13.                 $.ajax({  
14.                     url: '/WithFunding/StartFunding',  
15.                     data: JSON.stringify(model),  
16.                     type: 'POST',  
17.                     contentType: 'application/json;charset=utf-8',  
18.                     async: false,  
19.                     success: function (data) {  
20.                         alert("Postting data is over!");  
21.                     }  
22.                 });  
23.             });  
24.         });  
25. </script>  

总结：在数据存储模型传值方式中，我们也采用了ajax异步方式。然而此种方式与ajax方式又有一些不同：传递的数据是Model实体类型。相信大家也看到了，虽然Model可以实现View传值到Controller，但是代码量比较大，而且不太好理解，所以在实际中我们使用的不多。

5、Url 路由方式

MVC开发方式中，我们请求的是控制器下面的一个Action，有时候Action需要参数，也就是路由参数。我们通过添加路由规则传递路由参数。

[csharp]  view plain  copy

1. public static void RegisterRoutes(RouteCollection routes)  
2. {  
3.     routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
4.   
5.     routes.MapRoute(  
6.         "Default", // Route name  
7.         "{controller}/{action}/{id}", // URL with parameters  
8.         new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults  
9.     );  
10. }  

Url 路由传值方式如下所示

[javascript]  view plain  copy

1. http://localhost:39901/UserPay/Withdraw/12  

上面的12就是路由参数，对应的Action如下所示

[csharp]  view plain  copy

1. public ActionResult Withdraw(int id)  
2. {  
3.     int Cid = 0;  
4.     var Mid = WebHelper.GetCookie(StockFunds.Key.CookieKey.MemberId);//用户Id  
5.     if (!string.IsNullOrWhiteSpace(Mid))   
6.     {  
7.        Cid= Convert.ToInt32(SecureHelper.AESDecrypt(Mid));  
8.     }  
9.     string Username = Request["username"];  
10.     string province = Request.Form["province"];  
11.     string city = Request["city"];  
12.     string branch = Request["branch"];//支行  
13.     string number = Request["number"];//卡号  
14.     string bankName = Request["bankName"];//开户银行  
15.     F_Member_Banks bank = new F_Member_Banks();  
16.     bank.BankName = bankName;  
17.     bank.BankNo = number;  
18.     bank.MId = Cid;  
19.     bank.CardHolder = Username;  
20.     bank.AddDate = System.DateTime.Now;  
21.     bank.AccountBranck = branch;  
22.     var res = BLL.F_MemberBLL.GetMember.BandBinding(bank).ToString();  
23.     return Content(res);  
24. }  

总结：Url 路由方式传值方式的数据量很有限，不适于大数据量的传递。

上面只是讲解了前台向后台传值的几种方式，具体后台如何接受数据就不再说明了。希望对大家有帮助。