使用ASP.NET MVC做开发时，经常需要在页面（View）和控制器（Controller）之间传递数据，那么都有哪些数据传递的方式呢？

本文对于View向Controller中传值共列举了以下几种方式：

对于Controller向View中传值则列举了以下几种方式：

View向Controller中传递数据的方式

QueryString

View中代码：

<div>

    <button id="btn">提交</button>

</div>

<script>

    $(function () {

        $('#btn').click(function () {

            //url不区分大小写

            location.href = "/home/getvalue?method=querystring";

        });

    });

</script>

Controller中代码：

public void GetValue()

{

    //Request属性可用来获取querystring,form表单以及cookie中的值

    var querystring = Request["method"];

}

使用querystring向后台传递属于http协议中的get方式，即数据会暴露在url中，安全性不高（可通过浏览器历史记录看到发送的数据）且传递的数据量有大小限制。
点击提交按钮后浏览器地址栏中的地址：http://localhost:57625/home/getvalue?method=querystring。程序执行结果如下：

RouteData

路由可以让我们写出可读性较高的url，使用路由传递数据，首先要配置合适的路由：

routes.MapRoute(

    name: "Default",

    url: "{controller}/{action}/{id}"

);

前端代码只需要将location.href的值改为和路由匹配的url即可，本示例中为"/home/getvalue/100"
Controller中的代码：

public void GetValue()

{

    var value = RouteData.Values["id"];

}

获取的值是object类型：

 

获取路由参数的另外一种方式是给Action设置一个和路由模板中指定的参数名一致（不区分大小写）的参数即可，代码如下：

public void GetValue(int id)

{

}

注意，这里不仅获取了路由数据，而且自动将数据类型转换为int类型：

querystring和路由均是通过url进行数据的传递，若数据中包含中文应进行Encode操作。此外，url的长度是有限制的，使用url不可传递过多的数据。url传递参数属于Http协议中的Get请求，若要发送大量数据可以使用Post请求。

ModelBinding

1. Form

form表单形式是常见的向后端发送数据的方式，但是在提交数据是只会提交form表单内部具有name属性的input,textarea,select标签的value值。
View中的代码：

<form action="/home/getvalue" method="post">

    <input type="text" name="username" />

    <input type="text" name="age" />

    <input type="submit" name="button" value="提交" />

</form>

Controller中的代码：

public void GetValue()

{

    var name = Request["username"];

    var age = Request["age"];

    var btn = Request["button"];

}

获取到的数据均为string类型：

现在我们创建一个和form表单对应的类：

public class User

{

    public string UserName { set; get; }

    public int Age { set; get; }

}

修改Action的代码如下：

public void GetValue(User user)

{

}

然后运行程序，可以看到MVC以将表单中的数据映射为User类实例的属性值，且进行了相应的数据类型的转换。

2. 使用和Action参数同名的变量进行传递

View中的代码：

<button id="btn">传递数据</button>

<script>

    $(function () {

        $('#btn').click(function () {

            $.ajax({

                'type': 'post', 'url': '/home/getdata',

                 //传递的数据也可以是序列化之后的json格式数据

                 //如，上面使用form表单提交数据就可以使用jquery中的serialize()方法将表单进行序列化之后在提交

                 //data:$('#form').serialize()

                'data': { username: '雪飞鸿', age: '24' },

                error: function (message) {

                    alert('error!');

                }

            });

        })

    })

</script>

Controller中的代码：

public void GetData(string username, int age)

{

}

在Action中成功获取到了对应的参数值，且数据类型也根据Action中参数的类型进行了相应的转换。

 
Model绑定体现在从当前请求提取相应的数据绑定到目标Action方法的同名参数中。对于这样的一个Action，如果是Post请求，MVC会尝试将Form（注意，这里的Form不是指html中的<form>表单，而是Post方法发送数据的方式，若我们使用开发者工具查看Post方式发送的请求信息，会看到Form Data一栏）中的值赋值到Action参数中，如果是get请求，MVC会尝试将QueryString的值赋值到Action参数中。
 

Cookie

这里引用jquery.cookie插件来进行cookie的操作

<body>

    <button id="btn">提交</button>

    <script>

        $(function () {

            //向cookie中写入值

            $.cookie('key', 'jscookie');

            $('#btn').click(function () {

                location.href = "/home/getvalue";

            });

        })

    </script>

</body>
public void GetValue()

{

    var cookie = Request["key"];

}

 

Controller向View中传值

单个值的传递

public ActionResult Index()

{

    //注意，传递的值不能是string类型，否则会执行View(string viewName)方法而导致得不到正确结果

    return View();

}
<body>

 <p>@Model</p>

</body>
程序执行结果如下：

Json

public ActionResult Index()

{

    return View();

}

public JsonResult SendData()

{

    return Json(new { UserName = "雪飞鸿", Age =  });

}
<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <script src="~/scripts/jquery-1.10.2.min.js"></script>

</head>

<body>

    <p id="message"></p>

    <button id="btn">获取数据</button>

    <script>

        $(function () {

            $('#btn').click(function () {

                $.ajax({

                    'url': '/home/senddata', 'type': 'post',

                    success: function (data) {

                        $('#message').html('用户名：' + data.UserName + "<br/>年龄：" + data.Age);

                    },

                    error: function (message) {

                        alert('error:' + message.statusText);

                    }

                });

            });

        });

    </script>

</body>

</html>
程序执行结果如下：

匿名类型

public ActionResult Index()

{

    //使用匿名类向View中传递数据

    return View(new { UserName = "雪飞鸿", Age =  });

}
<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

</head>

<body>

    <p>用户名：@Model.UserName</p>

    <p>年龄：@Model.Age</p>

</body>

</html>

因为匿名类型的类型名由编译器生成，并且不能在源代码级使用。所以，直接使用匿名类型向View中传递数据，在前台页面是无法访问到匿名类型中的属性的。执行上面代码程序会出现错误：

针对上述问题，使用Newtonsoft将匿名类型转换为json格式即可解决该问题。
使用NuGet引入Newtonsoft.Json包，然后修改代码如下：

public ActionResult Index()

{

    string json = JsonConvert.SerializeObject(new { UserName = "雪飞鸿", Age =  });

    //也可以直接序列化JSON格式的字符串

    //dynamic jsonObj = JsonConvert.DeserializeObject("{ UserName : \"雪飞鸿\", Age : 24 }");

    dynamic jsonObj = JsonConvert.DeserializeObject(json);

    return View(jsonObj);

}
程序执行结果如下：

ExpandoObject

上面提到，直接使用匿名类型向View中传递数据是行不通的，可以使用ExpandoObject类型对象来替代匿名类型

public ActionResult Index()

{

    dynamic user = new ExpandoObject();

    user.UserName = "雪飞鸿";

    user.Age = ;

    return View(user);

}
程序执行结果如下：

ViewBag、ViewData、TempData

public ActionResult Index()

{

    ViewBag.Title = "数据传递";

    ViewData["key"] = "传递数据";

    //默认情况下TempData中的数据只能使用一次

    TempData["temp"] = "tempdata";

    return View();

}
<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

</head>

<body>

    <p>@ViewData["key"]</p>

    <p>@TempData["temp"]</p>

</body>

</html>
程序执行结果如下：

ViewModel

通过视图模型将数据传递到前端

//视图模型

public class User

{

    public string UserName { set; get; }

    public int Age { set; get; }

}

//Action

public ActionResult Index()

{

    User user = new User() { UserName = "雪飞鸿", Age =  };

    return View(user);

}
@* 设置页面为强类型页面 *@

@model DataTransfer.Controllers.User

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

</head>

<body>

    <p>用户名：@Model.UserName</p>

    <p>年龄：@Model.Age</p>

</body>

</html>
程序执行结果如下：

Cookie

public ActionResult Index()

{

    Response.SetCookie(new HttpCookie("key", "cookie"));

    return View();

}
<body>

    <p id="message"></p>

    <script>

        $(function () {

            var message = $.cookie('key');

            $('#message').text(message);

        })

    </script>

</body>
程序执行结果如下：

版权声明

本文为作者原创，版权归作者雪飞鸿所有。 转载必须保留文章的完整性，且在页面明显位置处标明原文链接。

如有问题， 请发送邮件和作者联系。

ASP.NET MVC5中View-Controller间数据的传递的更多相关文章

  1. ASP.NET MVC5中View显示Html

    @Html.Raw(Model.Name) @(new HtmlString(Model.Name));

  2. ASP.NET MVC5中的数据注解

    ASP.NET MVC5中Model层开发,使用的数据注解有三个作用: 数据映射(把Model层的类用EntityFramework映射成对应的表) 数据验证(在服务器端和客户端验证数据的有效性) 数 ...

  3. ASP.NET MVC5中的数据注解(转载)

    ASP.NET MVC5中Model层开发,使用的数据注解有三个作用: 数据映射(把Model层的类用EntityFramework映射成对应的表) 数据验证(在服务器端和客户端验证数据的有效性) 数 ...

  4. MVC5中Model层开发数据注解 EF Code First Migrations数据库迁移 C# 常用对象的的修饰符 C# 静态构造函数 MSSQL2005数据库自动备份问题（到同一个局域网上的另一台电脑上） MVC 的HTTP请求

    MVC5中Model层开发数据注解   ASP.NET MVC5中Model层开发,使用的数据注解有三个作用: 数据映射(把Model层的类用EntityFramework映射成对应的表) 数据验证( ...

  5. MVC5中Model层开发数据注解

    ASP.NET MVC5中Model层开发,使用的数据注解有三个作用: 数据映射(把Model层的类用EntityFramework映射成对应的表) 数据验证(在服务器端和客户端验证数据的有效性) 数 ...

  6. asp.net mvc5中使用缓存依赖SqlCacheDependency

    缓存是用来提高应用性能,降低服务器压力.适用于数据不易变,数据易通用的情景, 对于动态查询数据,例如数据分析,最好放弃使用缓存.使用缓存最麻烦的就是保持源数据和缓存的中的数据一致. 缓存(Cache) ...

  7. ASP.NET MVC 中 View 的设计

    1. 前言  感觉有好长时间没有接触View 了,周末闲来无事,翻翻书桌上的书来回顾回顾ASP.NET MVC中View的相关内容. 2. View概述  View 通过应用程序在Action 中返回 ...

  8. asp.net mvc5中的过滤器重写

    asp.net mvc5中增加了一种过滤器类型叫过滤器重写,这种过滤器类型可以在操作或者控制器上忽略更高层次上设置的过滤器类型,它可以重写五种基本的过滤器接口类型:IAuthenticationFil ...

  9. Python多进程-进程间数据的传递

    两个进程间的数据是独立的,要进行数据传递的话可通过几个方法 Queue 通过队列来进行进程间数据的传递 # -*- coding:utf-8 -*- __author__ = "MuT6 S ...

  10. vue-cli中父子组件间的变量传递

    vue-cli中父子组件间的变量传递 在vue中每一个组件的作用域都是独立的,如果我们想实现父子组件间变量的传递就要另寻他法,而不能直接调用其中的变量. 父级组件向子级组件传递变量 要实现这种效果我们 ...

随机推荐

  1. HTML基础篇之内嵌框架和表单

    内嵌框架: <iframe src="http://www.baidu.com" name="d"></iframe> 网页会显示一个这 ...

  2. Quartz 2D在ios中的使用简述一：坐标体系

    Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境,官方文档:Quartz 2D Programming Guide. 一.坐标体系 这样的坐标体系就导致我们使用Quart ...

  3. PostgreSQL配置优化

    硬件和系统配置 操作系统 Ubuntu13.04 系统位数 64 CPU Intel(R) Core(TM)2 Duo CPU 内存 4G 硬盘 Seagate ST2000DM001-1CH164 ...

  4. ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步

    一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...

  5. JavaScript常见原生DOM操作API总结

    [TOC] 最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node ...

  6. Module Zero之用户管理

    返回<Module Zero学习目录> 用户实体 用户管理者 用户认证 用户实体 用户实体代表应用的一个用户,它派生自AbpUser类,如下所示: public class User : ...

  7. VS2013的 Browser Link 引起的问题

    环境:vs2013 问题:在调用一个WebApi的时候出现了错误: 于是我用Fiddler 4直接调用这个WebApi,状态码是200(正常的),JSon里却提示在位置9409处文本非法, 以Text ...

  8. .NET 基础 一步步 一幕幕 [注释、命名规则、访问修饰符、数据类型、常量、变量]

    注释.命名规则.访问修饰符.数据类型.常量.变量 话说一个不会写注释的程序猿的不是一个好吃货,我们本篇就从注释开始说起好了. 在C#中有三种注释: 第一种:单行注释  以//开头,后面的就是注释内容 ...

  9. 基于zipkin分布式链路追踪系统预研第一篇

    本文为博主原创文章,未经博主允许不得转载. 分布式服务追踪系统起源于Google的论文“Dapper, a Large-Scale Distributed Systems Tracing Infras ...

  10. Atitit 深入理解软件的本质 attilax总结 软件三原则"三次原则"是DRY原则和YAGNI原则的折

    Atitit 深入理解软件的本质 attilax总结 软件三原则"三次原则"是DRY原则和YAGNI原则的折 1.1.1. 软件的本质:抽象  1 1.2. 软件开发的过程就是不断 ...