Razor是MVC框架视图引擎,我们今天就来说一说Razor视图引擎。

首先还是来创建一个基础项目叫Razor来演示。

先来定义一个Model叫Product

    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; }
}

接着,来定义一个控制器。

    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);
}
}

最后,在Views/Home文件夹中创建Index.cshtml文件。

1. 使用模型对象

我们在视图的第一行使用这样的语法 @model Razor.Models.Product ,Razor语句以@字符开始,@model语句声明了通过动作方法传递给该视图模型对象的类型,这能让我们以 @Model这样的方法来引用视图模型对象的方法、字段、属性。代码如下:

@model Razor.Models.Product

@{
Layout = null
}
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@Model.Name
</div>
</body>
</html>

2. 使用布局

为了创建一个布局,右击View是文件夹,添加-> MVC 5布局页(Razor),将文件名设置为_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>

布局是特殊形式的视图。@RenderBody方法的调用会将动作方法所指定的视图插入到布局标记中。

为了使用布局,只需要我们设置前面Index视图的Layout。并且所创建的布局中已经有一些Html元素,所以在视图中可以将这些元素去除。Index视图代码修改如下:

@model Razor.Models.Product

@{
ViewBag.Title = "Product Name";
Layout = “~/Views/-BasicLayout.cshtml”;
} Product Name: @Model.Name

来看看效果。

还有一个问题需要解决,每个视图都需要指定布局,这就很麻烦了。我们可以使用视图起始文件,在渲染视图时,MVC框架会查找一个叫做_ViewStart.cshtml文件。框架会将此文件的内容视为视图的一部分,我们就可以利用这一特性为Layout属性设置一个值。为了创建视图起始文件,在Views文件夹添加一个新的布局文件,并将文件名设置为_ViewStart.cshtml。代码如下:

@{
Layout = "~/Views/_BasicLayout.cshtml";
}

再次修改Index视图代码:

@model Razor.Models.Product

@{
ViewBag.Title = "Product Name";
} Product Name: @Model.Name

3. 使用Razor表达式

Razor可以做的事情很多,包括使用C#语句(但是应该不用Razor执行业务逻辑)。

用Razor表达式能做的最简单的事就是将数据值插入到标记中,我们可以用之前说的@Model表达式来做这件事。我们也可以@ViewBag表达式。

修改Home控制器,添加DemoExpression。

        public ActionResult DemoExpression()
{
ViewBag.ProductCount = ;
ViewBag.ExpressShip = true;
ViewBag.ApplyDiscount = false;
ViewBag.Supplier = null; return View(myProduct);
}

我们在Views/Home文件夹中创建DemoExpression.cshtml视图文件,代码如下:

@model Razor.Models.Product

@{
ViewBag.Title = "DemoExpression";
Layout = "~/Views/_BasicLayout.cshtml";
} <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>

效果如下:

我们也可以使用条件语句。修改DemoExpression.cshtml如下:

@model Razor.Models.Product

@{
ViewBag.Title = "DemoExpression";
Layout = "~/Views/_BasicLayout.cshtml";
} <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>
@if (ViewBag.ProductCount == 0) {
@:Out of Stock
} else if (ViewBag.ProductCount == 1) {
<b>Low Stock (@ViewBag.ProductCount)</b>
} else {
@ViewBag.ProductCount
}
</td>
</tr>
</tbody>
</table>

为了开始一个条件语句,需要在C#的条件关键字前放一个@。

我们也可以使用枚举数组和集合。

继续在Home控制器创建一个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.cshtml,代码如下:

@using Razor.Models
@model Product[] @{
ViewBag.Title = "DemoArray";
Layout = "~/Views/_BasicLayout.cshtml";
} @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>
}

ASP.NET MVC——Razor视图引擎的更多相关文章

  1. ASP.NET MVC Razor视图引擎攻略

    --引子 看下面一段MVC 2.0的代码. <%if (Model != null){%> <p><%=Model%></p><%}%>&l ...

  2. Asp.Net MVC Razor视图引擎与My97DatePicker插件的结合

    using System; using System.Collections.Generic; using System.Runtime.CompilerServices; using System. ...

  3. Asp.net MVC Razor视图模版动态渲染PDF,Razor模版生成静态Html

    Asp.net MVC Razor视图模版动态渲染PDF,Razor模版生成静态Html 1.前言 上一篇文章我开源了轮子,Asp.net Core 3.1 Razor视图模版动态渲染PDF,然后,很 ...

  4. ASP.NET WEB应用程序(.network4.5)MVC Razor视图引擎2 视图模板页

    https://www.cnblogs.com/xlhblogs/archive/2013/06/09/3129449.html MVC Razor模板引擎 @RenderBody.@RenderPa ...

  5. ASP.NET WEB应用程序(.network4.5)MVC Razor视图引擎2

    https://www.bbsmax.com/A/gAJG67OXzZ/ 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留下来的ASP ...

  6. ASP.NET Mvc Razor视图语法

    在ASP.NET MVC中有两套模版引擎,一套是ASPX,一套是Razor,从事过WebForms开发的朋友们,对于ASPX模版已经很熟悉了,下面我说一下我所熟悉的Razor模版引擎的一些语法,供大家 ...

  7. ASP.NET MVC3 Razor视图引擎-基础语法

    I:ASP.NET MVC3在Visual Studio 2010中的变化 在VS2010中新建一个MVC3项目可以看出与以往的MVC2发生了很明显的变化. 1.ASP.NET MVC3必要的运行环境 ...

  8. MvcMailer通过ASP.NET MVC Razor视图和基架发送邮件

    MvcMailer是一个有趣的组件,您可以使用ASP.NET MVC框架在发送邮件.很重要的是,它使用Razor视图引擎的观点作为电子邮件模板和很容易安装和使用.在本文中你将看到如何安装,设置邮件模板 ...

  9. (转)ASP.NET MVC3 Razor视图引擎-基础语法

    转自:http://kb.cnblogs.com/page/96883/ I:ASP.NET MVC3在Visual Studio 2010中的变化 在VS2010中新建一个MVC3项目可以看出与以往 ...

随机推荐

  1. Mysql命令大全

    格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root -p,回车后提示你输 ...

  2. “风投云涌”:那些被资本看中的IT企业的风光与辛酸

         进入七月份以来,纷享销客获得D轮融资1亿美元,撼动业界,资本与IT联姻令一部分创业者眼红的同时,没有人注意到背后的风险. 科技与资本的结合,是当今经济社会前行的宏大主题.相关统计显示,软件行 ...

  3. Xcode 锁终端

    锁终端 输入: <1>cd /Applications/Xcode.app 回车 结果显示: Xcode.app 输入: <2>sudo chown -hR root:whee ...

  4. NDK开发_笔记0

    自谷歌搜索退出中国以来,谷歌对全球第二大市场中国的态度一直保持冷淡.可是北京时间12月8日,谷歌2016开发者大会在北京召开,同时专门针对中国的谷歌开发者网站已经上线:https://develope ...

  5. Ubuntu设置root用户登录图形界面

    Ubuntu默认的是root用户不能登录图形界面的,只能以其他用户登录图形界面.这样就很麻烦,因为权限的问题,不能随意复制删除文件,用gedit编辑文件时经常不能保存,只能用vim去编辑. 解决的办法 ...

  6. Xamarin.Android活动的生命周期

    一.前言 用过Android手机的人一定会发现一种现象,当你把一个应用置于后台后,一段时间之后在打开就会发现应用重新打开了,但是之前的相关的数据却没有丢失.可以看出app的“生命”是掌握在系统手上的, ...

  7. ReactNative入门 —— 动画篇(下)

    在上篇动画入门文章中我们了解了在 React Native 中简单的动画的实现方式,本篇将作为上篇的延续,介绍如何使用 Animated 实现一些比较复杂的动画. 动画组合 在 Animated 中提 ...

  8. web音乐播放器总结

    前言 项目暂时告一段落,胸中有股炽热之气望喷涌而出!忍不住吐槽,为什么程序员要加班啊,为什么产品下达deadline,就得把这生死剑架在程序员的脖子上.卧槽,听说程序员在国外是叫工程师的.最近看了很多 ...

  9. clang_intprt_t类型探究

    作者:玄魂工作室-钱海龙 问题 这篇手把手教你构建 C 语言编译器,里面有着这样的代码 void eval() { int op, *tmp; while (1) { if (op == IMM) { ...

  10. C#开发奇技淫巧三:把dll放在不同的目录让你的程序更整洁

    系列文章 C#开发奇技淫巧一:调试windows系统服务 C#开发奇技淫巧二:根据dll文件加载C++或者Delphi插件 C#开发奇技淫巧三:把dll放在不同的目录让你的程序更整洁 程序目录的整理 ...