ASP.NET MVC Razor视图引擎攻略
--引子
看下面一段MVC 2.0的代码。
<%if (Model != null)
{%>
<p><%＝Model%></p>
<%}%>
<%else
{%>
//Do something
<%}%>
我们站在一个读者的立场上来看，”<% %>“这种标记C#代码的方法是十分蛋疼的。
如果写这段代码的人没有良好的缩进和对齐习惯的话，一段逻辑较为复杂的代码就会堆砌着杂乱无章的"<%“和"%>"--匹配它们就是一件头疼的事情，会让读者望而生畏。
即使是写代码的本人，闭合也是一件麻烦的事情，并且VS对”<% %>“的自动缩进和对齐支持不很友好，看惯了整齐的代码，面对自己写出的凌乱的东西会很不爽。
随着MVC 3.0的发布，新的Razor视图引擎解决了这个问题。
Razor的意思的就是 剃刀，可见它灰常犀利。引言中的代码，我们用Razor的语法来写的话:
@if (Model != null)
{
<p>@Model</p>
}
else
{
//Do something
}
Razor使用了"@"来标记一段C#代码，并帮我们进行了内部的闭合，是不是感觉清爽多了?
Razor在减少代码冗余、增强代码可读性和vs 智能感知方面，都有着很大的优势。下面我们来具体的介绍如何在ASP.NET MVC 3.0中使用Razor。
---------------------------------------------引言End----------------------------------------------
一，创建基于Razor的Web程序
首先你的开发环境必须安装.NET Framework4.0，然后在VS中新建项目时选择ASP.NET MVC 3 应用程序，在选项页面中选择视图引擎为Razor，如图1:
图1
然后创建项目，就会得到一个基于Razor的Web项目了，如图2。
图2
相信熟悉MVC的看官们对此结构并不陌生。注意红框部份，Razor的页面是以cshtml为后缀的，下面我们来讲下如何使用Razor来进行页面布局。
二，使用Razor来进行页面布局
UI设计师们现在也讲究页面设计的语义化和结构化，把一个页面分成很多个模块，使用语义化的类名或id来标识这些模块。Razor推出了新的布局解决方案来迎合这一潮流。
这里涉及到Razor的一些语法，大家可以不深究"@"后面的内容，讲到页面布局，你只要专注与HTML代码就可以了。语法会在后面补充。
1.指定母版与加载机制
首先我们来看_ViewStart.chhtml页面，它的内容很简单:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
这句代码指定了默认的母版的位置: 当前应用程序根目录下<"~"的含义>的Views/Shared/_Layout.cshtml
除非特殊情况，比如视图是Partial视图，或显示的在视图中添加以下代码指示不使用母版:
@{
Layout = null;
}
其他情况下，该指定页就是视图的母版页。
然后我们来看看Razor母版页_Layout.cshtml的内容:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>我的 MVC 应用程序</h1>
</div>
<div id="logindisplay">
欢迎 <strong>@User.Identity.Name</strong>!
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
@RenderBody()<!--一般视图内容的占位符-->
</div>
<div id="footer">
</div>
</div>
</body>
</html>
注意@RenderBody()这个方法相当于一个占位符，假如我们的首页视图Index.cshtml是这样，
@{
ViewBag.Title = "主页";
}
<h2>@ViewBag.Message</h2>
<p>
若要了解有关 ASP.NET MVC 的更多信息，请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC 网站">http://asp.net/mvc</a>。
</p>
一般的视图处理，比如当服务器响应一个HomeController.Index()请求的时候,需要返回Index视图，
• 首先会加载母版页_Layout.cshtml的内容，
• 遇到@RenderBody()时，就用首页视图的内容置换到这里，最后处理完成返回静态页面。
2.使用Partial视图 www.2cto.com
MVC 2.0中，你需要使用<asp:Content></asp:Content>标签来进行页面分割，太多的话自己都忘记了哪个对应的是哪个部份。
在Razor中，可以将需要剥离出来的部份作为一个单独的Partial视图，比如网站的头部(Logo，导航等等..)，底部(友情链接，版权声明等等..)，或是某个功能模块(登陆框等等..)。
比如上面的母版页，我们可以把它的头部和底部剥离出来，在Share文件夹下右键添加/视图,选择创建为分部视图，如图3:
图3
依照上述步骤创建”_HeaderPartial.cshtml“和"_FooterPartial.cshtml"两个视图:
<!--_HeaderPartial.cshtml-->
<div id="header">
<div id="title">
<h1>我的 MVC 应用程序</h1>
</div>
<div id="logindisplay">
欢迎 <strong>@User.Identity.Name</strong>!
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
</ul>
</div>
</div>
<!--_FooterPartial.cshtml-->
<div id="footer">
© 2008-2012 John Connor All rights reserved.
</div>
可以看出，提取Partial视图很简单，就是把需要的内容提取出来，放在新建的Partial视图中。然后，我们还需要干一件事情，
类似于一般视图，Partial视图使用自己特有的占位符来替换原内容。我们这么干之后，原_Layout.cshtml页就变成了这样:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<body>
<div class="page">
@Html.Partial("_HeaderPartial")<!--_HeaderPartial视图占位符-->
<div id="main">
@RenderBody()
</div>
@Html.Partial("_FooterPartial")<!--_FooterPartial视图占位符-->
</div>
</body>
</html>
这样，页面的布局是不是更清爽简洁了?如同一般视图，返回请求时会先加载母版页然后遇到占位符时加载相应的Partial视图，最后返回处理完成的静态页面。
三，Razor语法简介与应用
1.语法简介
如果我们希望在HTML代码中绑定数据，比如说我们有一个产品的对象Product，需要绑定产品的名称Product.Name，只需要在变量前面加"@"即可，
也可以使用"@(expression)"绑定一个表达式:
<p>@Product.Name</p>
<p>@(Product.Price*0.8)</p>
Razor中使用”@{code}“来标识一段C#代码,代码段可以出现在任何位置，并且支持与HTML混写:
@｛
var product=new product();
product.Name="pen";
product.Price=1.00;
<p>@product.Name</p>
<p>@product.Price</p>
｝
使用循环或条件语句时直接加"@"前缀，可以控制页面逻辑:
@foreach(var product in products)
｛
<p>@item.Name</p>
｝
Razor中注释是"@**@",即可以注释Html代码，也可以注释C#代码,在代码块中仍可使用C#的注释方式:
@{
var product=new product();
product.Name="pen";
//product.Price=1.00;
<p>@product.Name</p>
@*<p>@product.Price</p>*@
}
2.ASP.NET MVC3.0 Web中的应用
假设我们有一个Product类位于JohnConnor.Data命名空间下,有Name和Price两个属性，HomeController.Index()方法返回一个List<Product>对象给Index视图，
打印所有产品名称，并且点击产品名称时，弹出产品价格。
HomeController.Index()方法如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using JohnConnor.Data;
namespace JohnConnor.Web.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var products = new List<Product>()
{
new Product{ Name="钢笔", Price=11.55M},
new Product{ Name="铅笔", Price=2.17M},
new Product{ Name="圆珠笔", Price=5.98M},
};
return View(products);
}
}
}
我们来改一下Index视图演示一下Razor的简单应用。
@using JohnConnor.Data;
@model List<Product>
@{
ViewBag.Title = "主页";//母版中ViewBag.Title用于绑定Title标签，这里进行赋值。
}
<h2>Razor</h2>
@foreach (var product in Model)
{
//遍历所有的产品
<input type="button" name="@product.Name" value="@product.Name" onclick="alert(@product.Price)" />
}
在一般视图中，首先声明视图模型，即Action返回的ViewResult对象的类型<也可以不声明，如果有返回对象建议声明>。
这里的视图模型是一个List<Product>集合，因为Product位于using JohnConnor.Data命名空间，所以先添加了引用。
在母版中ViewBag.Title用于绑定Title标签，在一般视图中就可以进行赋值来绑定页面的Title 。
如果你不想使用母版，就在代码块中添加"Layout = null;"。
最后是就是一些数据绑定，或者是逻辑的处理。
Razor的基本内容大概就讲这些了，当然它还有很丰富的底蕴，需要在实际的运用过程中去学习，一篇短文是无法涵盖所有信息的。
最后提一点，Razor暂时没有设计视图，这是比较悲摧的一点。相信之后会有的。如果对Razor的使用有任何问题，可以在此提出，能力范围内的问题我都可以提供帮助。
希望大家多多支持。
ASP.NET MVC Razor视图引擎攻略的更多相关文章
- ASP.NET MVC——Razor视图引擎
Razor是MVC框架视图引擎,我们今天就来说一说Razor视图引擎. 首先还是来创建一个基础项目叫Razor来演示. 先来定义一个Model叫Product public class Product ...
- Asp.Net MVC Razor视图引擎与My97DatePicker插件的结合
using System; using System.Collections.Generic; using System.Runtime.CompilerServices; using System. ...
- ASP.NET MVC IOC 之Ninject攻略
ASP.NET MVC IOC 之Ninject攻略 一.为什么要使用Ninject? 很多其它类型的IOC容器过于依赖配置文件,老是配置,总感觉有点不爽,而且要使用assembly-qualifie ...
- ASP.NET MVC IOC之Unity攻略
ASP.NET MVC IOC之Unity攻略 一.你知道IOC与DI吗? 1.IOC(Inversion of Control )——控制反转 即依赖对象不在被依赖模块的类中直接通过new来获取 先 ...
- 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必要的运行环境 ...
随机推荐
- 阿里Druid数据库连接池使用
阿里巴巴推出的国产数据库连接池,据网上测试对比,比目前的DBCP或C3P0数据库连接池性能更好 可以监控连接以及执行的SQL的情况. 加入项目的具体步骤: 1.导入jar <parent> ...
- 重置mysql的root密码
由于本人记性比较差,今天的mysql的root密码又忘记了,咋办呢?只能重置root的密码了.具体的操作步骤如下: 1. 首先检查mysql服务是否启动,若已启动则先将其停止服务,可在开始菜单的运行, ...
- Data Base 关于nosql的讲解
Data Base 关于nosql的讲解 nosql非关系型数据库. 优点: 1.可扩展 2.大数据量,高性能 3.灵活的数据模型 4.高可用 缺点: 1.不正式 2.不标准 非关系型数据库有哪些: ...
- Java 全角字符转半角字符
1.java代码里有时候会遇到代码注入的安全问题,为了防止这种问题,增加了一个过滤功能.主要是过滤全角字符,把url不能识别的全角字符转换成半角字符 public class Test { publi ...
- Codeforces Round #206 div1 C
CF的专业题解 : The problem was to find greatest d, such that ai ≥ d, ai mod d ≤ k holds for each i. Let ...
- hdu3270Arranging Your Team(dfs)
http://acm.hdu.edu.cn/showproblem.php?pid=3720 #include <iostream> #include<cstdio> #inc ...
- Debian 如何更改hdmi接口输出的分辨率
1. 先删除无用的文件: a) Boot/boot.src b) Boot/script.bin 2. 打开boot/script.fex,找到disp_init节点 a) 将screenX_outp ...
- HDU 1525 (博弈) Euclid's Game
感觉这道题用PN大法好像不顶用了,可耻地看了题解. 考虑一下简单的必胜状态,某一个数是另一个数的倍数的时候是必胜状态. 从这个角度考虑一下:游戏进行了奇数步还是偶数步决定了哪一方赢. 如果b > ...
- hdu4638 group 树状数组
连接:http://acm.hdu.edu.cn/showproblem.php?pid=4638 题意:就给给你n个数(大小在1-n里),然后给你连续的可以构成一个块,再给你N个询问,每个询问一个l ...
- 安装CouchbaseClient的过程中提示 Error 1935.An error occurred during the installation of assembly;Error:-1603 fatal error during installation
安装过程中提示报错 点击确定后 安装程序会接着回滚,又提示报错如下 Error 1935的解决方法是下载一个微软的补丁. http://support.microsoft.com/de ...