摘要:

视图引擎处理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的更多相关文章

  1. 转发-基于ASP.NET MVC 4/5 Razor的模块化/插件式架构实现

    基于ASP.NET MVC 4/5 Razor的模块化/插件式架构实现   概述 在日常开发中, 我们经常谈起模块化/插件化架构,这样可既可以提高开效率,又可以实现良好的扩展性,尤其对于产品化的系统有 ...

  2. (转)Asp.Net Mvc视图引擎Razor介绍

    Asp.Net Mvc视图引擎Razor介绍 1.Razor介绍 程序园原创,转载请注明:http://www.kwstu.com/ArticleView/dabaomvc_2014082408205 ...

  3. 跟我学ASP.NET MVC之五:SportsStrore开始

    摘要: 这篇文章将介绍一个ASP.NET应用程序SportsStore的开发过程. 开始 创建解决方案 创建工程 在New ASP.NET Project - SportsStore窗口中,选择Emp ...

  4. 跟我学ASP.NET MVC之三:完整的ASP.NET MVC程序-PartyInvites

    摘要: 在这篇文章中,我将在一个例子中实际地展示MVC. 场景 假设一个朋友决定举办一个新年晚会,她邀请我创建一个用来邀请朋友参加晚会的WEB程序.她提出了四个注意的需求: 一个首页展示这个晚会 一个 ...

  5. 跟我学ASP.NET MVC之二:第一个ASP.NET MVC程序

    摘要: 本篇文章带你一步一步创建一个简单的ASP.NET MVC程序.  创建新ASP.NET MVC工程 点击“OK”按钮后,打开下面的窗口: 这里选择“Empty”模板以及“MVC”选项.这次不创 ...

  6. 跟我学ASP.NET MVC之一:开篇有益

    摘要: ASP.NET MVC是微软的Web开发框架,结合了模型-视图-控制器(MVC)架构的有效性和整洁性,敏捷开发最前沿的思想和技术,以及现存的ASP.NET平台最好的部分.它是传统ASP.NET ...

  7. [转]我要学ASP.NET MVC 3.0(十二): MVC 3.0 使用自定义的Html控件

    本文转自:http://www.cnblogs.com/lukun/archive/2011/08/05/2128693.html 概述   在ASP.NET MVC框架中已经封装了很多基于Html标 ...

  8. 跟我学ASP.NET MVC之十一:URL路由

    摘要: 在MVC框架之前,ASP.NET假定在请求的URLs和服务器硬盘文件之间有直接的关系.服务器的职责是接收浏览器请求,从相应的文件发送输出. 这种方法只能工作于Web表单,每一个ASPX页面既是 ...

  9. ASP.NET MVC 3和Razor中的@helper 语法

    原文:http://kb.cnblogs.com/page/102191/ ASP.NET MVC 3支持一项名为"Razor"的新视图引擎选项(除了继续支持/加强现有的.aspx ...

随机推荐

  1. unix下各种查看“变量”的命令比较

    子程序只会继承父程序的环境变量,而不继承其自定义变量. env 查看所有环境变量 set 查看所有变量,包括环境变量和自定义变量 set 还可以给程序位置参数赋值: set 1 2 3 将1赋值给$1 ...

  2. jasper(二):制作饼状图和柱状图

    在新建一个框架之后 我们也是要执行 add dataset,来添加一个链接数据库的语句,因为这是个饼状图,所以要用group by 全部放入右边的框架 点完成 接下来,就是要创建饼状图,就要点击 窗口 ...

  3. 百度java开发面试题

    第一面  项目:  1.找一个项目,介绍下情况.其中遇到了什么问题,每种问题怎么样的解决方案.  算法题:  2.一个排好序的数组,找出两数之和为m的所有组合  3.自然数序列,找出任意连续之和等于n ...

  4. 8.2 Query 语句优化基本思路和原则

    在分析如何优化MySQL Query 之前,我们需要先了解一下Query 语句优化的基本思路和原则.一般来说,Query 语句的优化思路和原则主要提现在以下几个方面: 1. 优化更需要优化的Query ...

  5. 前端mv框架下(目前写的是vue),对组件抽象的思考

    前沿: 抽象是门大学问.前端mv框架中,以组件化的概念为主.经常会考虑抽象到组件级别,进行复用.合理的抽象,能提高效率,减少业务逻辑视图的耦合程度.不合理的抽象,则会增加代码的复杂程度. 遇到的问题 ...

  6. Python--简单接口测试实例(一)

    适用人员:初学python的测试人员,若对抓包不太清楚的可先学习抓包的知识 接口测试流程:发送请求-->返回响应-->结果判定-->生成报告 案例:下面以[今目标]新建客户为例来进行 ...

  7. vfd with stm8

    2018-01-14 22:50:26 之前写了pt6311的驱动,要做时钟考虑使用stm8做主控,于是乎将之前的驱动移植到stm8上. 顺带熟悉了stm8的操作2333. 上源码: #ifndef ...

  8. Mysql研磨之InnoDB行锁模式

    事务并发带来的一些问题 (1)更新丢失(LostUpdate):当两个或多个事务选择同一行,然后基于最初选定的值更新该行时,由于每个事务都不知道其他事务的存在,就会发生丢失更新问题最后的更新覆盖了由其 ...

  9. WebApi PUT、DELETE请求时出现405 - 不允许用于访问此页的 HTTP 谓词。

    开发时,新建WebApi项目需要用到Restful规范,此时请求有POST\PUT\DELETE\GET等请求 此时需要在web.config中加入 <system.webServer> ...

  10. laravel 5.5 安装

    PHP要求 PHP> = 7.0.0 OpenSSL PHP扩展 PDO PHP扩展 Mbstring PHP扩展 Tokenizer PHP扩展 XML PHP扩展 通过Composer创建项 ...