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 = /^(\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 ο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 路由方式传值方式的数据量很有限,不适于大数据量的传递。

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

  • 8
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
ASP.NET MVC 中,你可以通过以下步骤将注册页面的数据传递到数据库: 1. 创建一个模型(Model)来表示你的注册数据。这个模型应该包含与注册页面的表单字段对应的属性。例如,如果注册页面有用户名、密码和电子邮件字段,你可以创建一个名为`RegisterViewModel`的模型,包含这些属性。 ```csharp public class RegisterViewModel { public string Username { get; set; } public string Password { get; set; } public string Email { get; set; } } ``` 2. 在你的控制器Controller)中创建一个动作方法(Action),用于接收从注册页面提交的数据。你可以使用`HttpPost`特性来标记这个动作方法,以便它只响应 POST 请求。 ```csharp [HttpPost] public ActionResult Register(RegisterViewModel model) { // 在这里处理接收到的注册数据 // 将数据保存到数据库中 // 返回适当的视图或重定向到其他页面 } ``` 3. 在视图(View)上创建一个表单,将用户输入的数据提交到上述控制器动作方法。 ```html <form method="post" action="/ControllerName/Register"> <!-- 表单字段 --> <input type="text" name="Username" /> <input type="password" name="Password" /> <input type="email" name="Email" /> <input type="submit" value="注册" /> </form> ``` 4. 在控制器的注册动作方法中,你可以使用 Entity Framework 或其他数据库访问技术将注册数据保存到数据库中。这里以 Entity Framework 为例: ```csharp [HttpPost] public ActionResult Register(RegisterViewModel model) { if (ModelState.IsValid) { // 创建一个数据库上下文实例 using (var context = new YourDbContext()) { // 创建一个新的用户实体并设置属性 var user = new User { Username = model.Username, Password = model.Password, Email = model.Email }; // 将用户实体添加到数据库上下文中 context.Users.Add(user); // 保存更改到数据库 context.SaveChanges(); } return RedirectToAction("Index", "Home"); // 注册成功后重定向到首页或其他页面 } return View(model); // 如果数据验证失败,返回注册页面,显示错误信息 } ``` 在上述代码中,`YourDbContext`表示你的数据库上下文类,`User`表示你的用户实体类。这些类应该根据你的数据库结构进行定义和调整。 这样,当用户在注册页面提交表单时,数据将被传递到控制器的注册动作方法中,然后通过数据库上下文将数据保存到数据库中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值