背景:因为项目的原因,需要用到MVC。所以,在急忙之中,就开始了MVC的学习。刚开始接触MVC的时候,是由别人给的几集视频开始的。可能视频的年代有些久远,所以里边的东西跟项目中有些不同。其中之一就是“视图引擎”,视频中用的是ASPX,可是做项目时用的是Razor。好吧,本着不将就的精神(其实就是有点强迫症),稍微的了解了一下这里。
一、Razor视图引擎
首先,我们先看一段代码:
<span style="font-family:Microsoft YaHei;font-size:18px;"><%if (Model != null)
{%>
<p><%=Model%></p>
<%}%>
<%else
{%>
//Do something
<%}%></span>
这是采用ASPX视图引擎时,View中所写的代码。这段代码给我们的第一印象可能就是<%%>这东西太多了,看着有点眼晕。好吧,接着下一段:
<span style="font-family:Microsoft YaHei;font-size:18px;">@if (Model != null)
{
<p>@Model</p>
}
else
{
//Do something
}</span>
这段代码看着感觉应该好一些了,这就是采用Razor视图引擎所撰写的。
当时看到Razor这个单词,我还特意查了一下什么意思,原来是剃刀的意思,细细想来,是有点意思,采用Razor视图引擎,代码瞬间清爽了好多。就犹如一个半个月没有刮胡子的邋遢男,洗个澡,刮完胡子,瞬间变小鲜肉一样。
在MVC3.0版本的时候,微软终于引入了第二种模板引擎: Razor 。在这之前,我们一直在使用WebForm时代沿留下来的ASPX引擎
Razor在减少代码冗余、增强代码可读性和Visual Studio智能感知方面,都有着突出的优势。
Razor的语法
(1)Razor文件类型:Razor支持两种文件类型,分别是 .cshtml 和.vbhtml,其中.cshtml 的服务器代码使用了c#的语法,.vbhtml 的服务器代码使用了vb.net的语法。
(2)@字符:@是Razor中的一个重要符号,它被定义为Razor服务器代码块的开始符号。
Razor语句块
(1)在Razor视图引擎中,我们可以使用@{code}来定义一段 代码块 。
(2)Razor支持代码混写:在代码块中插入HTML、在HTML中插入Razor语句都是可以的。例如,我们可以使用@来作for循环,还可以进行if判断
<span style="font-family:Microsoft YaHei;font-size:18px;">@for (int i = 0; i < 10; i++)
{
<p>@i</p>
}
@if (ViewData.Count > 0)
{
<p>ViewData有数据</p>
ViewData["Key"] = "Edison Chou";
}
else
{
<p>ViewData暂无数据</p>
}
</span>
Razor页面输出特殊字符串
与在ASPX试图引擎中类似,如果要输出特殊字符串,还是借助HtmlHelper类提供的扩展方法来实现。
(1)输出原生的字符串:@Html.Raw(html)
<span style="font-family:Microsoft YaHei;font-size:18px;">@Html.Raw("<h1>Razor</h1>")</span>
PS:默认的@会解析掉html代码
(2)还可以通过使用 HtmlString 类型和 MvcHtmlString 类型字符串输出原生包含HTML的字符串
<span style="font-family:Microsoft YaHei;font-size:18px;">@{
IHtmlString html = new HtmlString("<span style='color:red'>哈喽!!!! </span>");
Response.Write(html);
}</span>
Razor服务器端注释为:@* 注释内容 *@
二、页面布局
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
这里就是指定的默认的母版的位置,也就是网页加载,显示的母版页内容应该是"_Layout.cshtml"
然后,我们看一下母版页"_Layout.cshtml"中的代码:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>我的 MVC 应用程序</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</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>
一般的视图处理,当服务器响应HomeController.Index()的请求时,需要返回Index视图。这里边的逻辑应该是:首先会加载母版页"_Layout.cshtml"的内容,然后遇到"@RenderBody()"时,就会用首页视图"Index.cshtml"的内容置换到这里,最后处理完成后,返回静态界面。就是我们所见到的网页。
好吧,关于Razor的东西就先介绍到这里吧。