ASP.NET MVC5中View-Controller间数据的传递

使用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参数中。

这里引用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(100);
}
<body>
 <p>@Model</p>
</body>

程序执行结果如下:

Json

public ActionResult Index()
{
    return View();
}

public JsonResult SendData()
{
    return Json(new { UserName = "雪飞鸿", Age = 24 });
}
<!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 = 24 });
}
<!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 = 24 });
    //也可以直接序列化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 = 24;
    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 = 24 };
    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>

程序执行结果如下:

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 MVC 的八个扩展点

版权声明

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

android 的android httpClient详解

AndroidHttpClient结构: public final class AndroidHttpClient extends Object imple...

24350
来自专栏

.NET 2.0 Web Services的bug?

今天测试.net 2.0的WebService,发现了一个大问题。就是无法获取参数,参数永远是null。当然了使用.net调用没有任何问题,web测试页也正常。...

9520
来自专栏大内老A

WCF技术剖析之十八:消息契约(Message Contract)和基于消息契约的序列化

在本篇文章中,我们将讨论WCF四大契约(服务契约、数据契约、消息契约和错误契约)之一的消息契约(Message Contract)。服务契约关注于对服务操作的描...

41350
来自专栏java工会

Java爬虫Get校花网所有美女图片,附源代码

作为一个宅男,每天看看美女图是必修课。那么——作为一个程序猿加宅男,如何收藏更多的美女图片呢?这就要用到爬虫了,哈哈,我仿佛看到了无穷无尽的美女在向我招手——怎...

21420
来自专栏逸鹏说道

c# 温故而知新: 线程篇(一) 下

Abort 方法: 其实 Abort 方法并没有像字面上的那么简单,释放并终止调用线程,其实当一个线程调用 Abort方法时,会在调用此方法的线程上引发一个异常...

27560
来自专栏跟着阿笨一起玩NET

C# 中参数验证方式的演变

一般在写方法的时候,第一步就是进行参数验证,这也体现了编码者的细心和缜密,但是在很多时候这个过程很枯燥和乏味,比如在拿到一个API设计文档的时候,通常会规定类型...

16020
来自专栏逸鹏说道

C#进阶系列——WebApi 接口参数不再困惑:传参详解上

前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料。如今,使用WebApi也有段时间了,今天就记录下API接口传参的一些方式方法,算...

55480
来自专栏JetpropelledSnake

Django学习笔记之Django Form表单

14540
来自专栏Unity

检测Unity客户端无效的预设资源

4、不被代码间接引用,如预设Anniver_01,在代码中是"Anniver_"+number,这种暂时没有好办法解决。

28140
来自专栏java工会

Java爬虫Get校花网所有美女图片

30790

扫码关注云+社区

领取腾讯云代金券