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

桃扇骨 2022-05-25 02:15 154阅读 0赞

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

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

1、异步方式

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

（1）ajax方式

\[javascript\]  [view plain][]   [copy][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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

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

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

3、异步表单方式

\[javascript\]  [view plain][]   [copy][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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

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

\[csharp\]  [view plain][]   [copy][view plain]

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 路由方式传值方式的数据量很有限，不适于大数据量的传递。

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

[Asp.Net MVC_model_Model]: http://blog.csdn.net/ydm19891101/article/details/44301201
[view plain]: https://blog.csdn.net/ydm19891101/article/details/44336951#
[MVC_-HTML]: http://blog.csdn.net/ydm19891101/article/details/43405601