出处:http://www.cnblogs.com/willick/p/3224144.html

Razor是MVC3中才有的新的视图引擎。我们知道,在ASP.NET中,ASPX的视图引擎依靠<%和%>来调用C#指令。而MVC3以后有了一套新的使用@标记的Razor语法,使用起来更灵活更简洁。下面通过一些简单示例让大家快速撑握Razor语法的使用。

本文目录

准备工作

在演示Razor语法的使用之前,我们需要做一些准备工作。

1.打开VS创建一个ASP.NET MVC空项目,很简单,就不具体演示了。

2.添加一个Model。在项目的Models文件夹中添加一个名为Product的类。在这我们把前一篇C#知识点提要用到的Product类搬过来用。代码如下:

  1. namespace MvcApplication1.Models {
  2. public class Product {
  3. public int ProductID { get; set; }
  4. public string Name { get; set; }
  5. public string Description { get; set; }
  6. public decimal Price { get; set; }
  7. public string Category { set; get; }
  8. }
  9. }

3.添加一个Controller。右击项目中的Controllers文件夹,选择添加控制器,命名如下图所示:

点添加后,对ProdcutController中的代码进行如下编辑:

  1. using System.Web.Mvc;
  2. using MvcApplication1.Models;
  3.  
  4. namespace MvcApplication1.Controllers
  5. {
  6. public class ProductController : Controller
  7. {
  8. public ActionResult Index()
  9. {
  10. Product myProduct = new Product {
  11. ProductID = 1,
  12. Name = "苹果",
  13. Description = "又大又红的苹果",
  14. Category = "水果",
  15. Price = 5.9M
  16. };
  17. return View(myProduct);
  18. }
  19. }
  20. }

4.添加一个View。右击Index方法,选择添加视图,在弹出的窗口进行如下配置:

点添加后,系统自动帮我们创建一个Product文件夹和一个Index.cshtml文件,Index.cshtml内容如下:

  1. @model MvcApplication1.Models.Product
  2.  
  3. @{
  4. ViewBag.Title = "Index";
  5. }
  6.  
  7. <h2>Index</h2>

5.修改默认路由。为了方便,我们应该让应用程序启动时直接导向我们需要的请求处理(此处是Product/Index)。打开Global.asax文件,找到注册路由RegisterRoutes方法下的routes.MapRoute方法,把controller的值改为“Product”,如下所示:

  1. routes.MapRoute(
  2. "Default", // 路由名称
  3. "{controller}/{action}/{id}", // 带有参数的 URL
  4. new { controller = "Product", action = "Index", id = UrlParameter.Optional } // 参数默认值
  5. );

先不管这些是什么意思,我会在后面的文章中专门介绍路由。到这,我们可以按F5,程序能正常运行,准备工作就做好了。

使用Model对象

介绍Razor语法,让我们从Index.cshtml文件的第一行开始:

  1. @model MvcApplication1.Models.Product

Razor语句都是以@符号开始的。每个视图都有自己的Model属性(通过@Model调用)。上面这句代码的意思是将本视图的Model属性的类型指向MvcApplication1.Models.Product类型,这就实现了强类型。强类型的好处之一是类型安全,如果写错了Model对象的某个成员名,编译器会报错;另一个好处是在VS中可以使用VS中的代码智能提示自动完成类型成员调用的代码编写。 当然这句代码不要程序也可以正常运行,只是给编写代码造成了一定的困难。

视图中的Model属性用于存放控制器(Controller)传递过来的model实例对象(本示例中ProductController通过“return View(myProduct)”传递给Index视图),下面的代码演示了如何调用该model对象:

  1. @model MvcApplication1.Models.Product
  2.  
  3. @{
  4. ViewBag.Title = "Index";
  5. }
  6. <!-- 调用Product实例的Name属性 -->
  7. <h2>名称:@Model.Name</h2>

注意,第一行代码用于声名Model属性类型用的是@model <Model类型名>(小写m),而调用控制器传递过来的Model对象用的是@Model.<属性名>(大写M)。按F5运行效果如下:

使用表达式

上面讲的使用Model对象是很常用的一种Razor代码。其实上面示例中的@Model.Name就是一个简单的表达式,表示向Web页面呈现Model.Name的文本值。Razor语法中的表达式除了可以使用Model对象,也可以使用几乎任何一个其他可访问权限范围内的对象,来向Web面面输出该对象成员的文本值。如下代码所示:

  1. @model MvcApplication1.Models.Product
  2.  
  3. @{
  4. ViewBag.Title = "Index";
  5. }
  6.  
  7. 现在的时间是: @DateTime.Now.ToShortTimeString()

运行效果如下:

这种使用对象的简单表达式(@DateTime.Now.ToShortTimeString()和@Model.Name),在这我们不防称之为对象表达式。

除了对象表达式,还可以是其他任意的有返回值的表达式,如条件表达式。如下面代码所示:

  1. @model MvcApplication1.Models.Product
  2.  
  3. @{
  4. ViewBag.Title = "Index";
  5. }
  6.  
  7. 现在的时间是: @DateTime.Now.ToShortTimeString()
  8.  
  9. <br/>@(DateTime.Now.Hour>22 ? "还早,再写一会吧!" : "该睡觉咯!")

运行效果如下:

注意,一般使用非对象表达式时都需要用小括号括起来。

使用代码块

和表达式的使用方式一样,Razor语法中也可以使用由{}括起来的单个C#过程控制代码块(如if、switch、for等)。使用方式如下:

  1. @model MvcApplication1.Models.Product
  2.  
  3. @{
  4. ViewBag.Title = "Index";
  5. }
  6.  
  7. @if (Model.Price > 5M) {
  8. string test = "买不起!";
  9. <p>@Model.Name <b>太贵了!</b> @test </p>
  10. }

效果如下:

由{}括起来的代码块内可以写任何C#代码,也可以使用任何HTML标签。但需注意的是,当控制语句内只有一句代码时不能像写C#后台代码一样省略大括号。

还有一种更常用的使用代码块的方式。你也可以通过以@{开始,以}闭合的方式来使用代码块,它可以把多个代码块放在一起,开成一个更大的代码块。如下代码所示:

  1. @model MvcApplication1.Models.Product
  2.  
  3. @{
  4. ViewBag.Title = "Index";
  5. }
  6. @{
  7. if(Model.Category=="水果"){
  8. string test="是一种水果。";
  9. @Model.Name @test
  10. }
  11. if (Model.Price > 5M) {
  12. string test = "买不起!";
  13. <p>@Model.Name <b>太贵了!</b> @test </p>
  14. }
  15. }

运行结果如下:

使用@:和text标签

我们注意到,在代码块中,要么是C#代码,要么是HTML标签,不能直接写纯文字,纯文字须包裹在HTML标签内。但如果需要在代码块中直接输出纯文字而不带HTML标签,则可以使用@:标签,在代码块中输出纯文本文字非常有用。如下代码所示:

  1. ...
  2.  
  3. @if (Model.Price > 5M) {
  4. @Model.Name@:太贵了
  5. <br />
  6. @: @@:后面可以是一行除@字符以外的任意文本,包括<、>和空格,怎么写的就怎么输出。
  7. <br />
  8. @: 如果要输出@符号,当@符号前后都有非敏感字符(如<、{、和空格等)时,可以直接使用@符号,否则需要使用两个@符号。
  9. }

注意@符号的使用。上面代码运行效果如下:

使用@:标签在代码块中输出一行不带html标签的文本非常方便,但如果需要在代码块中输出续或不连续的多行纯文本,则使用text标签较为方便,如下代码所示:

  1. ...
  2.  
  3. @if (Model.Price > 5M) {
  4. <text>
  5.  
  6. 名称:<b>@Model.Name</b><br />
  7. 分类:<b>@Model.Description</b><br />
  8. 价钱:<b>@Model.Price</b><br />
  9.  
  10. <pre>
  11. 测试行一: <a>aaaa</a>
  12. 测试行二: @@ fda@aaa
  13. </pre>
  14.  
  15. </text>
  16. }

运行结果:

使用ViewBag

上面讲了通过Model对象来从Controller传递数据到View。和Model对象一样,ViewBag对象也可以用来从Controller传递数据到View。下面代码演示了如何在ProductController中使用ViewBag:

  1. public ActionResult Index()
  2. {
  3. Product myProduct = new Product {
  4. ProductID = 1,
  5. Name = "苹果",
  6. Description = "又大又红的苹果",
  7. Category = "水果",
  8. Price = 5.9M
  9. };
  10. ViewBag.TestString = "这是一行测试文字!";
  11. return View(myProduct);
  12. }

不一样的是,ViewBag是动态类型,其中TestString是自己定义的。ViewBag在View中的使用方式是和Model一样,如下:

  1. ...
  2.  
  3. 动态表达式解析的时间是:@ViewBag.TestString

运行结果就不贴图了。

使用Layuot

前面我们创建一个视图的时候,我们勾选了使用布局和母版页,但没有告诉VS使用哪一个。请仔细看下图:

这个对话框告诉我们“如果在Razor _viewstart中设置了此选项,则留空”。在项目的Views文件夹中,我们可以看到一个_ViewStart.cshtml文件,里面的内容是:

  1. @{
  2. Layout = "~/Views/Shared/_Layout.cshtml";
  3. }

MVC呈现视图的时候,默认情况下会自动查找_ViewStart.cshtml文件,以它作为母版来呈现用户请求的视图。母版的呈现是MVC内部处理的,这种以下划线(_)开头的视图文件,一般是不能直接返回给用户。

使用布局或母版页的好处是,我们不需要在每个视图中都设置一份相同的内容。按照_ViewStart.cshtml文件内容指示的路径,我们找到_Layout.cshtml文件,打开它会发现我们在Index视图中定义的 ViewBag.Title = "Index" 就是在这里调用的:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>@ViewBag.Title</title>
  5. <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  6. <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
  7. </head>
  8.  
  9. <body>
  10. @RenderBody()
  11. </body>
  12. </html>

类似于ASP.NET母版页中的ContentPlaceHolder服务器控件,在MVC中使用@RenderBody()来呈现子Web页面的内容,它可以省去我们在每个视图文件中写相同的html元素、JS和样式等的工作。

如果创建一个视图不想使用Layout,则可以在创建视图的对话框取消“使用布局和母版页”选项,创建后会生成如下代码:

  1. @{
  2. Layout = null;
  3. }
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <html>
  8. <head>
  9. <title>About</title>
  10. </head>
  11. <body>
  12. <div>
  13.  
  14. </div>
  15. </body>
  16. </html>

由于没有使用Layout,视图中必须包含用于呈现HTML页面每个基本元素,而且必须指定Layout=null。

参考:
《Pro ASP.NET MVC 3 Framework》

作者:Liam Wang

出处:http://www.cnblogs.com/willick/

联系:liam.wang@live.com

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有问题或建议,请多多赐教,非常感谢。

[ASP.NET MVC 小牛之路]03 - Razor语法(转)的更多相关文章

  1. [ASP.NET MVC 小牛之路]03 - Razor语法

    本人博客已转移至:http://www.exblr.com/liam  Razor是MVC3中才有的新的视图引擎.我们知道,在ASP.NET中,ASPX的视图引擎依靠<%和%>来调用C#指 ...

  2. 【ASP.NET MVC 学习笔记】- 03 Razor语法

    本文参考:http://www.cnblogs.com/willick/p/3224144.html 1.Razor语句以@开头. 2.每个View都有自己的Model属性,可通过@Model调用.语 ...

  3. [ASP.Net] 转 > ASP.NET MVC 小牛之路

    URL: http://www.cnblogs.com/willick/ 看到了不错的学习笔记,MVC.Net学习之路展开   [ASP.NET MVC 小牛之路]18 - Web API [ASP. ...

  4. [ASP.NET MVC 小牛之路]13 - Helper Method

    我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 System.Web.Mvc 命名空间下的 HtmlHelper,习惯上我们把 ...

  5. [ASP.NET MVC 小牛之路]17 - 捆绑(Bundle)

    本文介绍 MVC 4 提供的一个新特性:捆绑(Bundle),一个在  View 和 Layout 中用于组织优化浏览器请求的 CSS 和 JavaScript 文件的技术. 本文目录 了解VS默认加 ...

  6. [ASP.NET MVC 小牛之路]04 - 依赖注入(DI)和Ninject

    本人博客已转移至:http://www.exblr.com/liam  为什么需要依赖注入 在[ASP.NET MVC 小牛之路]系列的理解MVC模式文章中,我们提到MVC的一个重要特征是关注点分离( ...

  7. [ASP.NET MVC 小牛之路]05 - 使用 Ninject

    在[ASP.NET MVC 小牛之路]系列上一篇文章(依赖注入(DI)和Ninject)的末尾提到了在ASP.NET MVC中使用Ninject要做的两件事情,续这篇文章之后,本文将用一个实际的示例来 ...

  8. [ASP.NET MVC 小牛之路]06 - 使用 Entity Framework

    在家闲着也是闲着,继续写我的[ASP.NET MVC 小牛之路]系列吧.在该系列的上一篇博文中,在显示书本信息列表的时候,我们是在程序代码中手工造的数据.本文将演示如何在ASP.NET MVC中使用E ...

  9. [ASP.NET MVC 小牛之路]10 - Controller 和 Action (2)

    继上一篇文章之后,本文将介绍 Controller 和 Action 的一些较高级特性,包括 Controller Factory.Action Invoker 和异步 Controller 等内容. ...

随机推荐

  1. Big Water Problem

    链接:https://www.nowcoder.com/acm/contest/77/B来源:牛客网 Big Water Problem 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ ...

  2. 使用SLF4J和LOGBACK (一 : 基本使用)

    1.SLF4J是什么? slf4j是一个日志门面,它不是具体的日志实现框架,而是提供了通用的日志接口,按个人理解来说,是通过接口实现多态,来满足应用在不同日志框架间切换的需求. 例如在程序中我们需要记 ...

  3. 超详细的php用户注册页面填写信息完整实例(附源码)

    这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配.密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家. 注册页面是大多数网站必备的页面,所以很有必要 ...

  4. web 服务基础

    用户通过网站访问浏览器都发生了什么 如图,用户请求www.joker.com发生 1. 用户访问网站流程框架2. dns解析原理3. tcp/ip三次握手过程原理4. http协议原理(www服务的请 ...

  5. user

    test|123456 raolan|123456 test2|456123

  6. 写一个trim函数,兼容IE firefox chrome(正则)

    因为在获取输入框内容时,常常trim下多余的空格.而IE部分低端浏览器里的JavaScript版本不内置trim()这个清楚空格函数,而流行的浏览器里都兼容了,比如chrome,FF等.为了不让IE下 ...

  7. canvas绘制矩形

    canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...

  8. SQLite的基本用法

    SQLite是Android自带的轻量级数据库,接口封装的很好,不会SQL的也能很好的使用. 接下来讲一下怎么创建数据库.通过adb查看数据表和数据.增删查改. 一.创建数据库 Android封装了S ...

  9. leetcode535

    public class Codec { const string alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW ...

  10. django模版 常用变量

    在request中有很多有用的东西,如下: 获取当前用户: 1 {{ request.user }} 如果登陆就显示内容,不登陆就不显示内容: 1 2 3 4 5 {% if request.user ...