总结ASP.NET MVC Web Application中将数据显示到View中的几种方式
当我们用ASP.NET MVC开发Web应用程序的时候,我们都是将需要呈现的数据通过"Controllers"传输到"View"当中,怎么去实现,下面我介绍一下我在实际工作当中用到过的几种方式。
创建一个ASP.NET MVC Web Application
在Visual Studio中创建ASP.NET Web Application应用程序,在向导的下一个窗口中选择空的模板。
创建Model
接着我们在Models文件夹下创建一个Product类,用来传递数据。
public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public decimal Price { get; set; }
public int Count { get; set; }
public string Description { get; set; }
}
创建Controller
接着在Controllers文件下创建一个Controller, 命名为"ProductController"。
创建View
然后我们在Views -> Product目录下创建一个View,命名为Index。
到此,我们创建好了Model,View,Controller,在开始运行之前,我们需要更改一下默认路由配置。打开App_Start目录下的RouteConfig.cs文件,并更改默认路由如下:
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Product", action = "Index", id = UrlParameter.Optional }
);
}
}
好了,下面我们就正式开始实现数据从"Controller"到"View"的实现。
1. 使用ViewData。
ViewData是一个字典,它存放的是键值对。
打开新建好的ProductController.cs,使用using引入Product类所在的命名空间,在Index的Action里创建一个Product对象并且赋值给一个ViewData。
using TransDataToView.Models;
public ActionResult Index()
{
Product product = new Product
{
ProductID = ,
ProductName = "BMW X5",
Price = ,
Count = ,
Description = "BMW SUV"
}; ViewData["Product"] = product; return View();
}
接着,我们打开新建好的Index View文件,对Controller里的ViewData数据进行接收处理。
@using TransDataToView.Models
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@{
var product = (Product)ViewData["Product"];
}
<h2>
Product ID: @product.ProductID <br />
Product Name: @product.ProductName <br />
Price: @product.Price <br />
Count: @product.Count <br />
Description: @product.Description
</h2>
</div>
</body>
</html>
因为我们需要将ViewData数据转换成需要的Product对象数据,所以这里要引入Produdct类所在的命名空间,使用@符号,也就是Razor语法来引入,定义,赋值等操作。
2. 使用ViewBag。
ViewBag它跟ViewData一样,都是字典值,但它存放的不是键值对,而是dynamic动态类型,这是ASP.NET MVC3新增的部分。
同样我们在Index Action里将Proudct对象赋值给一个ViewBag。
public ActionResult Index()
{
Product product = new Product
{
ProductID = ,
ProductName = "BMW X5",
Price = ,
Count = ,
Description = "BMW SUV"
}; ViewBag.Product = product; return View();
}
同样,我们打开Index View文件,对Controller里的ViewBag数据进行接收处理。
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h3>
Product ID: @ViewBag.Product.ProductID <br />
Product Name: @ViewBag.Product.ProductName <br />
Price: @ViewBag.Product.Price <br />
Count: @ViewBag.Product.Count <br />
Description: @ViewBag.Product.Description
</h3>
</div>
</body>
</html>
可以看到ViewBag不需要转型直接就可以使用里面的数据了。
3. 使用TempData。
TempData也是字典,它的使用完全等同于ViewData,两者之间最大的差异是TempData对数据的保存是临时性的。也就是它请求后,数据就被清除,也就是只能通过一次Controller传递。通常用于Action之间的一次性传递,所以它一般不直接用于传递到View中。
我们增加一个名为"TempDataIndex"的Action。
Controller:
public ActionResult Index()
{
ViewData["Message"] = "This is a View Data Message."; if (TempData["Message"] != null)
ViewData["Message"] = TempData["Message"]; return View();
} public ActionResult TempDataIndex()
{
TempData["Message"] = "This is a Temp Data Message."; return RedirectToAction("Index");
}
View:
<div>
<h3>
@ViewData["Message"]
</h3>
</div>
我们运行程序。结果如下:
此时TempData数据为null,我们导航到/Product/TempDataIndex下,结果如下:
我们看到通过TempDataIndex的Action里,TempData["Message"]有了数据,然后转向了Index的Action方法里,所以TempData的值赋给了ViewData。这是我们刷新一下页面,结果如下:
4. 使用View(object)。
通过直接传递object数据到View中。
public ActionResult Index()
{
Product product = new Product
{
ProductID = ,
ProductName = "BMW X5",
Price = ,
Count = ,
Description = "BMW SUV"
}; return View(product);
}
那么在View文件中需要绑定Controller里传递的对象。
@using TransDataToView.Models
@model TransDataToView.Models.Product
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h2>
Product ID: @Model.ProductID <br />
Product Name: @Model.ProductName <br />
Price: @Model.Price <br />
Count: @Model.Count <br />
Description: @Model.Description
</h2>
</div>
</body>
</html>
@model TransDataToView.Models.Product 意思就是绑定的是Product对象的Model,然后使用@Model.字段属性名来取值。
好了,本篇就先到此,希望对你有所帮助,谢谢!
总结ASP.NET MVC Web Application中将数据显示到View中的几种方式的更多相关文章
- 总结ASP.NET MVC视图页使用jQuery传递异步数据的几种方式
在ASP.NET MVC的视图页向控制器传递异步数据,可能是数组,JavaScript对象,json,表单数据,等等. 关于数据,JavaScript对象有时候和json长得一模一样,有么有? var ...
- MVC教程四:Controller向View传值的几种方式
一.通过ViewData传值 MVC从开始版本就一直支持使用ViewData将Controller里面的数据传递到View.ViewData定义如下: 从上面的截图中可以看出,ViewData里面存的 ...
- [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序
本文转自:http://www.skcode.cn/archives/281 本文演示ABP框架如何使用AngularJs,ASP.NET MVC,Web API 和EntityFramework构建 ...
- ASP.NET MVC Web API Post FromBody(Web API 如何正确 Post)
问题场景: ASP.NET MVC Web API 定义 Post 方法,HttpClient 使用 JsonConvert.SerializeObject 传参进行调用,比如 Web Api 中定义 ...
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...
- 实战 ASP.NET MVC Web API
实战 ASP.NET MVC Web API Web API 框架基于 ASP.NET MVC 框架开发,是一个面向 Http 协议的通信框架.相对于 WCF 而言,Web API 只面向于 Http ...
- ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework(官方教程翻译版 版本3.2.5)含学习资料
本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/ 谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...
- [转]ASP.NET MVC 3 Application Upgrader
本文转自:http://aspnet.codeplex.com/releases/view/59008 Recommended Download ASP.NET MVC 3 Applicat ...
- ASP.NET MVC Web API For APP
近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过在浏览器中使用 JavaScr ...
随机推荐
- 《算法导论》习题2.3-5 二分搜索 Binary Search
地球人都知道“二分查找”,方法也非常简单,但是你能不能在10分钟内写出一个没有bug的程序呢? 知易行难,自己动手写一下试一试吧. public class BinarySearch { public ...
- python and or用法
and 和 or 是python的两个逻辑运算符,可以使用and , or来进行多个条件内容的判断.下面通过代码简单说明下and or的用法: 1. or:当有一个条件为真时,该条件即为真.逻辑图如 ...
- Windows 10安裝在USB外接硬碟(使用命令模式)
微軟公司已經在2015年7月29日發佈Windows 10正式版,這個版本在使用介面上就像是Windows 7加上Windows 8的組合, 開始鍵與功能列回來了.微軟提供Windows 7與Wind ...
- Delphi中String类型原理介绍
Delphi中字符串的操作很简单,但幕后情况却相当复杂.Pascal传统的字符串操作方法与Windows不同,Windows吸取了C语言的字符串操作方法.32位Delphi中增加了长字符串类型,该类型 ...
- HDU-1430-素数回文
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1431 这题之前做过,又不会做了, 思路先直接暴力,输入a=5 b=500000000得到最大的值为9 ...
- 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景(三)
[前言和思路整理] 千呼万唤Shi出来啊(好像也没人呼唤),最近公司项目紧,闲暇时间少更得慢,请见谅. 上一章我们分析并实现了打击物件类BeatObject,和它的父节点BeatObjectColum ...
- Bootstrap入门(二十二)组件16:列表组
Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...
- 个人对现在大众对perl的偏见的一些见解
最近我都在一些论坛和交流社区学习,发现很多人对perl有很大的偏见. 以我学习那么久的Perl来说吧,也算是有一些小经验了,所以我总结了大家对perl的偏见的原因,无非就是是下面两个的两个原因: 1. ...
- sublime text 添加到鼠标右键功能
安装sublime text的同学可能在安装的时候忘了设置sublime text的右键功能.那我们介绍如何添加. 我们要创建一个.reg为后缀的文件sublime_addright.reg.那么…… ...
- 只为粗暴看一下ES6的字符串模板的性能
网上查找"ES6 字符串模板 +性能"5分钟无果遂写了一个暴力测试. 测试对象: +=方式,字符串累加计算方式 +s1+s2...+sn方式,即传统连加拼接字符串方式 s.push ...