ASP.NET MVC教程四：ASP.NET MVC中页面传值的几种方式
一、准备工作
创建一个ASP.NET MVC程序，然后在Models文件夹里面新添加Student实体类，用来模拟从Controller向View传递数据，Student类定义如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace MVCStudyDemo.Models
{
public class Student
{
public int ID { get; set; } public string Name { get; set; } public int Age { get; set; } public string Sex { get; set; } public string Email { get; set; }
}
}
二、通过ViewData传值
MVC从开始版本就一直支持使用ViewData将Controller里面的数据传递到View。ViewData定义如下：
从上面的截图中可以看出，ViewData里面存的是字典类型的数据，在查看ViewDataDictionary的定义：
注意：ViewDataDictionary继承自IDictionary等接口，所以ViewData里面的Value值类型是object的，使用的时候需要进行类型转换。
新建Controller，并命名为ViewDataDemo，该Controller用来模拟通过ViewData向View传递数据
Controller代码如下：
using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCStudyDemo.Controllers
{
public class ViewDataDemoController : Controller
{
// GET: ViewDataDemo
/// <summary>
/// 通过ViewData向对应的View传递数据
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
// 1、将字符串传递到View
ViewData["Other"] = "通过ViewData向View传递字符串";
// 2、通过KeyValuePair添加
ViewData.Add(new KeyValuePair<string, object>("name","tom"));
// 3、直接添加
ViewData.Add("age", 23);
// 4、传递集合到View
ViewData["Data"] = new List<Student>()
{
new Student
{
ID = ,
Name = "唐僧",
Age = ,
Sex = "男",
Email = "747976523@qq.com"
},
new Student
{
ID = ,
Name = "孙悟空",
Age = ,
Sex = "男",
Email = "sunwukong@163.com"
},
new Student
{
ID = ,
Name = "白骨精",
Age = ,
Sex = "女",
Email = "74345523@qq.com"
}
}; // 返回同名的视图
return View();
}
}
}
对应的View视图代码如下：
@*引入Student的命名空间*@
@using MVCStudyDemo.Models;
@{
ViewBag.Title = "Index";
// 这里使用的是Razor语法，写的是后台C#代码
// ViewData的Value值是Object类型的，需要进行类型转换
// 常规写法是先在这里进行类型转换
var list = ViewData["Data"] as List<Student>;
} <h2>通过ViewData向View传递数据</h2>
<div class="jumbotron">
<div>
<div>
、传递字符串 other:@ViewData["Other"];
</div>
<div>
、传递字符串 name:@ViewData["name"];
</div>
<div>
、传递字符串 age:@ViewData["age"];
</div>
<div>
、传递集合方式一
@foreach (var item in list)
{
<div>
ID:@item.ID Name:@item.Name Age:@item.Age Sex:@item.Sex Email:@item.Email
</div>
}
</div>
<div>
、传递集合方式二
@foreach (var item in ViewData["Data"] as List<Student>)
{
<div>
ID:@item.ID Name:@item.Name Age:@item.Age Sex:@item.Sex Email:@item.Email
</div>
}
</div>
</div>
</div>
运行结果：
三、通过ViewBag传值
ViewBag是在MVC3中出现的，ViewBag是动态（dynamic）类型的。
新建Controller，并命名为ViewBagDemo，该Controller用来模拟通过ViewBag向View传递数据。
Controller代码：
using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCStudyDemo.Controllers
{
public class ViewBagDemoController : Controller
{
// GET: ViewBagDemo
/// <summary>
/// 通过ViewBag向View传递数据
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
// 通过ViewData传值
ViewData["name"] = "ViewData";
// 传递集合到View
ViewData["Data"] = new List<Student>()
{
new Student
{
ID = ,
Name = "唐僧",
Age = ,
Sex = "男",
Email = "747976523@qq.com"
},
new Student
{
ID = ,
Name = "孙悟空",
Age = ,
Sex = "男",
Email = "sunwukong@163.com"
},
new Student
{
ID = ,
Name = "白骨精",
Age = ,
Sex = "女",
Email = "74345523@qq.com"
}
}; // 通过ViewBag传值
ViewBag.Name = "ViewBag";
ViewBag.StudentData = new Student()
{
ID = ,
Name = "沙悟净",
Age = ,
Sex = "男",
Email = "4567890345@qq.com"
};
// 返回同名视图
return View();
}
}
}
对应的Index视图代码：
@*引入Student的命名空间*@
@using MVCStudyDemo.Models;
@{
ViewBag.Title = "Index";
// ViewBag是dynamic类型的，使用的时候不需要进行类型转换
var stu = ViewBag.StudentData;
var stuList = ViewBag.Data;
} <h2>通过ViewBag向View传递数据</h2>
<div class="jumbotron">
<div>
<div>
Controller通过ViewBag向View传递数据
</div>
<div>
、通过ViewData传递字符串 ViewData["name"]:@ViewData["name"];
</div>
<div>
、通过ViewBag传递字符串 ViewBag.name:@ViewBag.Name;
</div>
<div>
、输出stu
<div>
ID:@stu.ID Name:@stu.Name Age:@stu.Age Sex:@stu.Sex Email:@stu.Email
</div>
、输出stuList
@foreach (var item in stuList)
{
<div>
ID:@item.ID Name:@item.Name Age:@item.Age Sex:@item.Sex Email:@item.Email
</div>
}
</div>
</div>
</div>
运行结果；
看了上面的运行结果，你可能会提出如下的两个疑问：
1、Controller里面没有定义ViewBag.Data，为什么在这里可以使用呢？
这是因为ViewBag是从MVC3版本才开始出现的，为了兼容以前的ViewData，所以这里虽然没有定义ViewBag.Student，但是ViewBag可以使用ViewData里面定义的Data数据。
2、ViewData["name"]和ViewBag.name的值是一样的
在控制器里面明明设置的两个值是不同的，但是为什么这里都变成一样的了呢？这是因为ViewData和ViewBag的属性是重叠的，两者都是字典类型的，一切以后面定义的属性为准，即后面定义的会覆盖前面定义的。
修改Controller代码，将ViewData的顺序放到ViewBag后面：
using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCStudyDemo.Controllers
{
public class ViewBagDemoController : Controller
{
// GET: ViewBagDemo
/// <summary>
/// 通过ViewBag向View传递数据
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
// 通过ViewData传值
//ViewData["name"] = "ViewData";
// 传递集合到View
ViewData["Data"] = new List<Student>()
{
new Student
{
ID = ,
Name = "唐僧",
Age = ,
Sex = "男",
Email = "747976523@qq.com"
},
new Student
{
ID = ,
Name = "孙悟空",
Age = ,
Sex = "男",
Email = "sunwukong@163.com"
},
new Student
{
ID = ,
Name = "白骨精",
Age = ,
Sex = "女",
Email = "74345523@qq.com"
}
}; // 通过ViewBag传值
ViewBag.Name = "ViewBag";
ViewBag.StudentData = new Student()
{
ID = ,
Name = "沙悟净",
Age = ,
Sex = "男",
Email = "4567890345@qq.com"
};
// 把ViewData的顺序放到ViewBag后面
ViewData["name"] = "ViewData";
// 返回同名视图
return View();
}
}
}
在查看Index视图显示效果：
这时会发现，Index视图里面显示的都是ViewData的值了。
四、通过TempData传值
查看TempData的定义：
我们发现TempData也是字典类型的。
新建Controller，并命名为TempDataDemo，该Controller用来模拟通过TempData向View传递数据。
Controller代码：
using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCStudyDemo.Controllers
{
public class TempDataDemoController : Controller
{
// GET: TempDataDemo
public ActionResult Index()
{
// ViewData
ViewData["Name"] = "tom";
// ViewBage
ViewBag.Name = "Jon";
// TempData
TempData["Name"] = "Andi";
TempData["Stu"] = new Student()
{
ID = ,
Name = "沙悟净",
Age = ,
Sex = "男",
Email = "4567890345@qq.com"
}; // 返回同名视图
return View();
}
}
}
对应的Index视图代码，TempData也是字典类型的，所以在View页面中使用的时候也需要进行类型转换：
@*引入Student的命名空间*@
@using MVCStudyDemo.Models;
@{
ViewBag.Title = "Index";
}
@{
// 类型转换
var stu = TempData["Stu"] as Student;
} <h2>通过TempData向View传递数据</h2>
<div class="jumbotron">
<p>
<div>
<div>
通过ViewData传递字符串 ViewData["Name"]:@ViewData["Name"];
</div>
</div>
</p> <p>
<div>
<div>
通过ViewBag传递字符串 ViewBag.Name:@ViewBag.Name;
</div>
</div>
</p>
<p>
<div>
<div>
、传递字符串 TempData["Name"]:@TempData["Name"];
</div>
、输出stu
<div>
ID:@stu.ID Name:@stu.Name Age:@stu.Age Sex:@stu.Sex Email:@stu.Email
</div>
</div>
</p>
</div>
运行结果：
从上面的结果中可以看出：TempData的属性值不会覆盖上面定义的属性值。那TempData还有什么作用呢？在看下面的代码：
using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCStudyDemo.Controllers
{
public class TempDataDemoController : Controller
{
// GET: TempDataDemo
public ActionResult Index(int? id)
{
// ViewData
ViewData["Name"] = "tom";
// ViewBage
ViewBag.Name = "Jon";
// TempData
TempData["Name"] = "Andi";
TempData["Stu"] = new Student()
{
ID = ,
Name = "沙悟净",
Age = ,
Sex = "男",
Email = "4567890345@qq.com"
}; if(id==null)
{
// 跳转到TempDataTest方法
return RedirectToAction("TempDataTest");
}
else
{
// 返回同名视图
return View();
}
} public ActionResult TempDataTest()
{
// 返回同名视图
return View();
}
}
}
TempDataTest视图代码：
@*引入Student的命名空间*@
@using MVCStudyDemo.Models;
@{
ViewBag.Title = "TempDataTest";
// 类型转换
var stu = TempData["Stu"] as Student;
} <h2>TempDataTest</h2>
<h3>ViewData["Name"]:@ViewData["Name"]</h3>
<h3>ViewBage.Name:@ViewBag.Name</h3>
<h3>TempData["Name"]:@TempData["Name"];</h3>
<h3>ID:@stu.ID Name:@stu.Name Age:@stu.Age Sex:@stu.Sex Email:@stu.Email</h3>
我们先在浏览器里面输入下面的地址：http://localhost:1098/TempDataDemo/index/12 ，这里给id传值12，根据代码，会显示Index视图：
我们看到：ViewData、ViewBag和TempData都可以取到值。
在浏览器里面输入下面的URL地址：http://localhost:9080/TempDataDemo/index，这就表示传递的id是null值，根据代码，会返回TempDataTest视图，运行结果：
从结果会发现这时ViewData和ViewBag都取不到数据了，只有TempData可以取到数据，可以得出TempData和ViewData、ViewBag的区别：
- ViewData和ViewBag不能跨Action方法使用，TempData可以跨Action方法使用，因为TempData是基于session存储的。
- TempData只能跨Action方法访问一次，再次访问数据也会丢失。
五、Model传值
在Action放过里面的View上面F12转到定义：
可以看到View有很多重载，其中一种可以直接传递model，如上面截图中红框所示。
新建Controller，并命名为ModelDemo，该Controller用来模拟通过Model向View传递数据。
对应的controller代码：
using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCStudyDemo.Controllers
{
public class ModelDemoController : Controller
{
// GET: ModelDemo
public ActionResult Index()
{
Student student = new Student()
{
ID = ,
Name = "沙悟净",
Age = ,
Sex = "男",
Email = "4567890345@qq.com"
};
// 返回model
return View(student);
// 或者直接返回
//return View(new Student()
//{
// ID = 5,
// Name = "沙悟净",
// Age = 567,
// Sex = "男",
// Email = "4567890345@qq.com"
//});
}
}
}
Index视图代码：
@{
ViewBag.Title = "Index";
}
@*不需要进行类型转换*@
<h2>通过Model向View传值</h2>
<h3>ID:@Model.ID</h3>
<h3>Name:@Model.Name</h3>
<h3>Age:@Model.Age</h3>
<h3>Sex:@Model.Sex</h3>
<h3>Email:@Model.Email</h3>
运行结果：
六、总结
最后总结一下ViewData和ViewBag的区别：
ASP.NET MVC教程四：ASP.NET MVC中页面传值的几种方式的更多相关文章
- ASP.Net中页面传值的几种方式
开篇概述 对于任何一个初学者来说,页面之间传值可谓是必经之路,却又是他们的难点.其实,对大部分高手来说,未必不是难点. 回想2016年面试的将近300人中,有实习生,有应届毕业生,有1-3年经验的,有 ...
- ASP.NET页面传值的几种方式
页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值. 存储对象传值.ajax.类.model.表单等!下面欧柏泰克和大家一起来看看asp.net页面传值方式一般有哪些?常用的较简单 ...
- MVC中页面传值方式总结
MVC中的页面传值,通常指Controller和view之间的数据传递,经常用到的有几种方式,总结如下: 一.Controller----------->View(控制器传到视图) 1.View ...
- 【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 【ASP.NET实战教程】ASP.NET实战教程大集合，各种项目实战集合
[ASP.NET实战教程]ASP.NET实战教程大集合,各种项目实战集合,希望大家可以好好学习教程中,有的比较老了,但是一直很经典!!!!论坛中很多小伙伴说.net没有实战教程学习,所以小编连夜搜集整 ...
- 2017.3.31 spring mvc教程（八） <mvc:annotation-driven />所做的工作
学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...
- ASP.NET 页面之间传值的几种方式
开篇概述 对于任何一个初学者来说,页面之间传值可谓是必经之路,却又是他们的难点.其实,对大部分高手来说,未必不是难点. 回想2016年面试的将近300人中,有实习生,有应届毕业生,有1-3年经验的,有 ...
- c#ASP.NET中页面传值共有这么几种方式
一.目前在ASP.NET中页面传值共有这么几种方式: 1.Response.Redirect("http://www.hao123.com",false); 目标页面和原页面可以在 ...
- ASP.NET中页面传值
一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交, <form action= "target.aspx" method = "post&q ...
随机推荐
- django基础之day04知识点----查询相关
from django.test import TestCase # Create your tests here. ''' 当你想单独测试django中某一个py文件时,你需要手动配置测试文件 在m ...
- linux指令-date
1.在linux中要显示日期,则可以直接输入指令date 2.如果想以这样2016/12/26的方式输出呢,那就是,Y是年份,m是月份,d是日 date +%Y/%m/%d 3.如果要显示时间,则da ...
- Linux服务器可以ping，但是telnet端口超时，网站wget超时，访问超时的解决办法
最近无法通过SSH连接Linux服务器,访问该服务器上的HTTP服务也出现异常.可以ping,但是telnet端口超时,网站wget超时,访问超时. 最后排查是内核配置问题 原来是 net.ipv4. ...
- 前端开发必备：nvm与npm与nrm
nvm Node.js version manager ,推荐使用它来安装 node.js . Mac 版项目地址 Windows 版项目地址 windows 版安装 进入 下载页 找到安装包: 跟着 ...
- PMBOK 指南 第四章 项目整合管理（4.1-4.3）
项目整合管理 包括对隶属于项目管理过程组的各个过程和项目管理活动进行识别.定义.组合.统一和协调的各个过程. 资源分配.平衡竞争性需求.研究各种备选方法.为实现项目目标而裁剪过程.管理各个项目管理知识 ...
- RMAN 下NOARCHIVELOG和ARCHIVE模式的恢复
恢复处于NOARCHIVELOG模式的数据库 当数据库处于NOARCHIVELOG模式时,如果出现介质故障 ,则最后一次备份之后对数据库所做的任何操作都将丢失.通过RMAN执行恢复时,只需要执行res ...
- java之枚举和注解
JDK1.5新增的enum关键字用于定义枚举类. 枚举类和普通类的区别: 使用enum定义的枚举类默认继承了java.lang.Enum类: 枚举类的构造器只能使用private修饰符: 枚举类的所有 ...
- strcmp函数和memcmp函数的用法区别及联系
前言: C语言中有很多东西容易搞混,最近笔者就遇到了一个问题.这里做个记录.就是memcmp和strcmp两者的用法,这里做个对比: 功能对比: A memcmp: 函数原型: int memcmp( ...
- 推荐一种非常好的新版DSP库源码移植方式，含V7，V6和V5的IAR以及MDK5的AC5和AC6版本
说明: 1.新版CMSIS V5.6里面的DSP库比以前的版本人性化了好多. 2.本帖为大家分享一种源码的添加方式,之前一直是用的库方便,不方便查看源码部分. 3.DSP教程可以还看第1版的,在我们的 ...
- IT兄弟连 HTML5教程 W3C盒子模型
日常生活中所见的盒子也就是能装东西的一种箱子,如果家里的东西很多,那么就需要按类别装到不同的箱子中.网页中的内容表现也是一样的,如果页面内容比较多,又想让页面更整洁.更美观.有很好的用户体验,则也需要 ...