跟我学ASP.NET MVC之四：使用Razor
摘要：
视图引擎处理ASP.NET内容，并查找指令，典型情况是向浏览器输出插入动态内容。MVC框架视图引擎的名字是Razor。
在本文中，我将带领读者快速认识Razor，以后你们看到他们的时候能够认识它。
工程准备
定义Model
namespace Razor.Models
{
public class Product
{
public int ProductID { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
public string Category { set; get; }
}
}
定义Controller
using Razor.Models;
using System.Web.Mvc; namespace Razor.Controllers
{
public class HomeController : Controller
{
Product myProduct = new Product
{
ProductID = ,
Name = "Kayak",
Description = "A boat for one person",
Category = "Watersports",
Price = 275M
};
public ActionResult Index()
{
return View(myProduct);
}
}
}
创建Index视图
@model Razor.Models.Product
@{
Layout = null;
} Product Name: @Model.Name
Razor语句以@字符开始。在这个页面，@model语句声明了我将传给视图action方法的model类型。这让我能够通过@Model访问视图模型对象的方法、字段和属性。
运行程序，得到运行结果：
使用Layout
Index.cshtml视图文件的另一个Razor表达式是：
@{
Layout = null;
}
这是Razor代码块的一个例子，让我可以在视图里面包含C#语句。这个代码块以 @{ 开始，以 } 结束。当视图被渲染的时候语句被执行。
这行代码设置Layout属性值为null。在MVC应用程序里，Razor视图被编译到C#类，在基类里面定义了Layout属性。设置Layout属性为null，将告诉MVC框架视图是自包含的，它将向客户端提交所有内容。
自包含的视图在简单例子程序里还行，但是一个真实的工程可能含有大量的视图。Layout是有效的模板，模板中包含应用于整个app的那些标记。以保证正确的JavaScript库被包含进来，或者保持一致的页面布局。
创建_BasicLayout.cshtml
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<h1>Product Information</h1>
<div style="padding: 20px; border: solid medium black; font-size:20pt">
@RenderBody()
</div>
<h2>Visit <a href="http://apress.com">Apress</a></h2>
</body>
</html>
Layout是一种特殊的视图。
@RenderBody()方法在layout标记中插入action方法得到的视图内容。
@ViewBag.Title设置页面标题。
使用layout的视图将呈现layout视图中所有的元素，这也是layout是重要模板的原因。
改变Index.cshtml使用Layout：
@model Razor.Models.Product
@{
Layout = Url.Content("~/Views/_BasicLayout.cshtml");
} @{
ViewBag.Title = "Product Name";
} Product Name: @Model.Name
Url.Content方法，得到视图的url路径字符串，赋值给Layout属性。
ViewBag.Title = "Product Name";给ViewBag.Title动态属性赋值，Layout页面的title标记上显示这个值。
运行程序，得到运行结果：
使用_ViewStart.cshtml文件
如果没有_ViewStart.cshtml文件，我将要给所有的视图都指定layout文件。_ViewStart.cshtml将在所有视图（如果没有指定Layout属性值）呈现之前执行。
_ViewStart.cshtml文件代码：
@{
Layout = Url.Content("~/Views/_BasicLayout.cshtml");
}
修改Index.cshtml文件，删除代码行
Layout = Url.Content("~/Views/_BasicLayout.cshtml");
@model Razor.Models.Product
@{
ViewBag.Title = "Product Name";
}
Product Name: @Model.Name
运行程序，将得到上面一样的结果。
使用Razor表达式
在HomeController里创建DemoExpression方法：
public ActionResult DemoExpression()
{
ViewBag.ProductCount = ;
ViewBag.ExpressShip = true;
ViewBag.ApplyDiscount = false;
ViewBag.Supplier = null;
return View(myProduct);
}
添加DemoExpression视图：
@model Razor.Models.Product
@{
ViewBag.Title = "DemoExpression";
}
<table>
<thead>
<tr><th>Property</th><th>Value</th></tr>
</thead>
<tbody>
<tr><td>Name</td><td>@Model.Name</td></tr>
<tr><td>Price</td><td>@Model.Price</td></tr>
<tr><td>Stock Level</td><td>@ViewBag.ProductCount</td></tr>
</tbody>
</table>
运行程序，得到运行结果：
View视图不但能够通过@Model呈现传给View方法model定义的类型的对象，还可以使用ViewBag呈现ViewBag的动态属性。
使用条件语句
在视图里还可以包含C#语句。修改视图代码：
@model Razor.Models.Product
@{
ViewBag.Title = "DemoExpression";
}
<table>
<thead>
<tr><th>Property</th><th>Value</th></tr>
</thead>
<tbody>
<tr><td>Name</td><td>@Model.Name</td></tr>
<tr><td>Price</td><td>@Model.Price</td></tr>
<tr><td>Stock Level</td>
<td>
@switch ((int)ViewBag.ProductCount)
{
case 0:
@: Out of Stock
break;
case 1:
<b>Low Stock (@ViewBag.ProductCount)</b>
break;
default:
@ViewBag.ProductCount
break;
}
</td>
</tr>
</tbody>
</table>
<div data-discount="@ViewBag.ApplyDiscount" dataexpress="@ViewBag.ExpressShip" data-supplier="@ViewBag.Supplier">
The containing element has data attributes
</div>
运行程序，得到运行结果：
以@字符开头开始一个C#代码块，在这个例子里是@switch。以字符 } 结束一个C#代码块，就像你写常规C#代码块一样。
在Razor代码块里，你可以包含HTML元素以及数据值，就像你在写HTML代码和Razor表达式一样。
例如：
<b>Low Stock (@ViewBag.ProductCount)</b>
@ViewBag.ProductCount
遍历数组和集合
当写MVC应用时，你将会经常遍历数组的内容，或者遍历一些集合的对象，来呈现它们的内容。
在HomeController类里添加DemoArray方法：
public ActionResult DemoArray()
{
Product[] array = {
new Product {Name = "Kayak", Price = 275M},
new Product {Name = "Lifejacket", Price = 48.95M},
new Product {Name = "Soccer ball", Price = 19.50M},
new Product {Name = "Corner flag", Price = 34.95M}
};
return View(array);
}
为DemoArray方法添加视图：
@model Razor.Models.Product[]
@{
ViewBag.Title = "DemoArray";
} @if (Model.Length > 0)
{
<table>
<thead><tr><th>Product</th><th>Price</th></tr></thead>
<tbody>
@foreach (Razor.Models.Product p in Model)
{
<tr>
<td>@p.Name</td>
<td>$@p.Price</td>
</tr>
}
</tbody>
</table>
}
else {
<h2>No product data</h2>
}
- @model Razor.Models.Product[]指定这个视图的模型是Razor.Models.Product数组。
- @if(Model.Length > 0)是 @ 开始的C#代码块，Model.Length使用Model访问传给视图的数组长度。
- @foreach (Razor.Models.Product p in Model)遍历Model表示的数组。
运行程序得到运行结果：
这个视图还可以使用using namespace语句进行改进：
@using Razor.Models
@model Razor.Models.Product[] @{
ViewBag.Title = "DemoArray";
} @if (Model.Length > 0)
{
<table>
<thead><tr><th>Product</th><th>Price</th></tr></thead>
<tbody>
@foreach (Product p in Model)
{
<tr>
<td>@p.Name</td>
<td>$@p.Price</td>
</tr>
}
</tbody>
</table>
}
else {
<h2>No product data</h2>
}
改进后，不需要在Product类型上指定名称空间了。
跟我学ASP.NET MVC之四：使用Razor的更多相关文章
- 转发-基于ASP.NET MVC 4/5 Razor的模块化/插件式架构实现
基于ASP.NET MVC 4/5 Razor的模块化/插件式架构实现 概述 在日常开发中, 我们经常谈起模块化/插件化架构,这样可既可以提高开效率,又可以实现良好的扩展性,尤其对于产品化的系统有 ...
- （转）Asp.Net Mvc视图引擎Razor介绍
Asp.Net Mvc视图引擎Razor介绍 1.Razor介绍 程序园原创,转载请注明:http://www.kwstu.com/ArticleView/dabaomvc_2014082408205 ...
- 跟我学ASP.NET MVC之五：SportsStrore开始
摘要: 这篇文章将介绍一个ASP.NET应用程序SportsStore的开发过程. 开始 创建解决方案 创建工程 在New ASP.NET Project - SportsStore窗口中,选择Emp ...
- 跟我学ASP.NET MVC之三：完整的ASP.NET MVC程序-PartyInvites
摘要: 在这篇文章中,我将在一个例子中实际地展示MVC. 场景 假设一个朋友决定举办一个新年晚会,她邀请我创建一个用来邀请朋友参加晚会的WEB程序.她提出了四个注意的需求: 一个首页展示这个晚会 一个 ...
- 跟我学ASP.NET MVC之二：第一个ASP.NET MVC程序
摘要: 本篇文章带你一步一步创建一个简单的ASP.NET MVC程序. 创建新ASP.NET MVC工程 点击“OK”按钮后,打开下面的窗口: 这里选择“Empty”模板以及“MVC”选项.这次不创 ...
- 跟我学ASP.NET MVC之一：开篇有益
摘要: ASP.NET MVC是微软的Web开发框架,结合了模型-视图-控制器(MVC)架构的有效性和整洁性,敏捷开发最前沿的思想和技术,以及现存的ASP.NET平台最好的部分.它是传统ASP.NET ...
- [转]我要学ASP.NET MVC 3.0（十二）： MVC 3.0 使用自定义的Html控件
本文转自:http://www.cnblogs.com/lukun/archive/2011/08/05/2128693.html 概述 在ASP.NET MVC框架中已经封装了很多基于Html标 ...
- 跟我学ASP.NET MVC之十一：URL路由
摘要: 在MVC框架之前,ASP.NET假定在请求的URLs和服务器硬盘文件之间有直接的关系.服务器的职责是接收浏览器请求,从相应的文件发送输出. 这种方法只能工作于Web表单,每一个ASPX页面既是 ...
- ASP.NET MVC 3和Razor中的@helper 语法
原文:http://kb.cnblogs.com/page/102191/ ASP.NET MVC 3支持一项名为"Razor"的新视图引擎选项(除了继续支持/加强现有的.aspx ...
随机推荐
- Android特效专辑(五)——自定义圆形头像和仿MIUI卸载动画—粒子爆炸
Android特效专辑(五)--自定义圆形头像和仿MIUI卸载动画-粒子爆炸 好的,各位亲爱的朋友,今天讲的特效还是比较炫的,首先,我们会讲一个自定义圆形的imageView,接着,我们会来实现粒子爆 ...
- UITabbar的一些常规用法(总结）
往往系统自带的UITabbar 不能满足我们的样式或者颜色设计,所以需要调整UITabbar. 1.自定义UITabbar,也是我学到的第一种方式(简单暴力). 先记录一下思路: 首先,隐藏系统自带的 ...
- [Zabbix3.0] 添加MySQL监控
zabbix3.0 server已经自带MySQL的模板了,只要修改agent端,然在web端给主机添加模板就好了. Agent端操作 /etc/zabbix/zabbix_agentd.d/user ...
- ubuntu14.04使用rails连接mysql数据库
rails自带的sqlite3各方面都不错,但是免费版缺少一个致命功能:加密码!虽说第三方有编译好的二进制版的加密版,但咱先不折腾鸟;直接上mysql吧. ubuntu安装mysql非常简单,先不聊; ...
- Android studio 项目(Project)依赖（非Module）
Android studio 项目(Project)依赖(非Module) 0. 前言 对于Module 级别的依赖大家都知道,今天说下Android Studio下的项目依赖. 场景: A Proj ...
- mysql 2003错误
mysql安装好经常发现无法正常启动碰到最多的是error 2003的错误,以下为解决方法: mysqld -nt -remove mysqld -nt -install 重新启动mysql net ...
- 学习jQuery必须知道的几种常用方法
jQuery事件处理 ready(fn) 代码: $(document).ready(function(){ // Your code here...}): 作用:它可以极大地提高web应用程序的响 ...
- Golang中WaitGroup使用的一点坑
Golang中WaitGroup使用的一点坑 Golang 中的 WaitGroup 一直是同步 goroutine 的推荐实践.自己用了两年多也没遇到过什么问题.直到一天午睡后,同事扔过来一段奇怪的 ...
- ffmpeg 时间戳处理
视频的显示和存放原理 对于一个电影,帧是这样来显示的:I B B P.现在我们需要在显示B帧之前知道P帧中的信息.因此,帧可能会按照这样的方式来存储:IPBB.这就是为什么我们会有一个解码时间戳和一个 ...
- Sending forms through JavaScript
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript As in the ...