ASP.NET MVC——Razor视图引擎
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视图引擎的更多相关文章
- ASP.NET MVC Razor视图引擎攻略
--引子 看下面一段MVC 2.0的代码. <%if (Model != null){%> <p><%＝Model%></p><%}%>&l ...
- Asp.Net MVC Razor视图引擎与My97DatePicker插件的结合
using System; using System.Collections.Generic; using System.Runtime.CompilerServices; using System. ...
- Asp.net MVC Razor视图模版动态渲染PDF，Razor模版生成静态Html
Asp.net MVC Razor视图模版动态渲染PDF,Razor模版生成静态Html 1.前言 上一篇文章我开源了轮子,Asp.net Core 3.1 Razor视图模版动态渲染PDF,然后,很 ...
- ASP.NET WEB应用程序（.network4.5）MVC Razor视图引擎2 视图模板页
https://www.cnblogs.com/xlhblogs/archive/2013/06/09/3129449.html MVC Razor模板引擎 @RenderBody.@RenderPa ...
- ASP.NET WEB应用程序（.network4.5）MVC Razor视图引擎2
https://www.bbsmax.com/A/gAJG67OXzZ/ 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留下来的ASP ...
- ASP.NET Mvc Razor视图语法
在ASP.NET MVC中有两套模版引擎,一套是ASPX,一套是Razor,从事过WebForms开发的朋友们,对于ASPX模版已经很熟悉了,下面我说一下我所熟悉的Razor模版引擎的一些语法,供大家 ...
- ASP.NET MVC3 Razor视图引擎-基础语法
I:ASP.NET MVC3在Visual Studio 2010中的变化 在VS2010中新建一个MVC3项目可以看出与以往的MVC2发生了很明显的变化. 1.ASP.NET MVC3必要的运行环境 ...
- MvcMailer通过ASP.NET MVC Razor视图和基架发送邮件
MvcMailer是一个有趣的组件,您可以使用ASP.NET MVC框架在发送邮件.很重要的是,它使用Razor视图引擎的观点作为电子邮件模板和很容易安装和使用.在本文中你将看到如何安装,设置邮件模板 ...
- (转)ASP.NET MVC3 Razor视图引擎-基础语法
转自:http://kb.cnblogs.com/page/96883/ I:ASP.NET MVC3在Visual Studio 2010中的变化 在VS2010中新建一个MVC3项目可以看出与以往 ...
随机推荐
- .net windows Kafka 安装与使用入门(入门笔记)
完整解决方案请参考: Setting Up and Running Apache Kafka on Windows OS 在环境搭建过程中遇到两个问题,在这里先列出来,以方便查询: 1. \Jav ...
- Http请求
HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文. 请求报文 一个HTTP请求报文由请求行(request line ...
- WebGIS中等值线前端生成绘制简析
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 等值线是GIS制图中常见的功能,一般有两种思路:一种是先进行插 ...
- MongoDB备份(mongodump)和恢复(mongorestore)
MongoDB提供了备份和恢复的功能,分别是MongoDB下载目录下的mongodump.exe和mongorestore.exe文件 1.备份数据使用下面的命令: >mongodump -h ...
- appium+robotframework环境搭建
appium+robotframework环境搭建步骤(Windows系统的appium自动化测试,只适用于测试安卓机:ios机需要在mac搭建appium环境后测试) 搭建步骤,共分为3部分: 一. ...
- Web 项目杂记（一）
1.Tomcat 多实例部署 在Tomcat下多实例部署后,发现如下问题,采用etc/init.d/tomcat start方式无法启动,而需要采用startup.sh.查找原因发现,是因为多实例部署 ...
- ARM的栈指令
ARM的指令系统中关于栈指令的内容比较容易引起迷惑,这是因为准确描述一个栈的特点需要两个参数: 栈地址的增长方向:ARM将向高地址增长的栈称为递增栈(Descendent Stack),将向低地址增长 ...
- egret调用页面js的方法。
参考文献: http://bbs.egret-labs.org/thread-267-3-1.html http://docs.egret-labs.org/post/manual/threelibs ...
- 再次思考 classpath 环境变量 等
f:\aspectj1.8\lib\aspectjrt.jar;.;%JAVA_HOME%\lib;C:\Temp\IBM\SQLLIB\java\db2java.zip;C:\Temp\IBM\SQ ...
- 在 CSS 预编译器之后：PostCSS
提到css预编译器(css preprocessor),你可能想到Sass.Less以及Stylus.而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到. “ ...