ASP.Net MVC——Razor视图引擎

╰+哭是因爲堅強的太久メ 2022-08-07 01:37 184阅读 0赞

![Center][] 背景：因为项目的原因，需要用到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服务器端注释为：@\*  注释内容  \*@

# 二、页面布局 #

刚开始的时候，用VS2012新建了一个空的ASP.NET MVC3.0的程序，运行时会出现下边这样的界面。

![Center 1][]

但是在View中，我根本找不到相关的代码。后来，请教了一下大神，一句话就解决了。

我们先看View中：

![Center 2][]

这里边有个"\_ViewStart.cshtml"页面，它里边的内容是：

@{
        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>

在母版页中，有一个"@RenderBody()"这个方法相当于一个占位符。

一般的视图处理，当服务器响应HomeController.Index()的请求时，需要返回Index视图。这里边的逻辑应该是：首先会加载母版页"\_Layout.cshtml"的内容，然后遇到"@RenderBody()"时，就会用首页视图"Index.cshtml"的内容置换到这里，最后处理完成后，返回静态界面。就是我们所见到的网页。  
  
       好吧，关于Razor的东西就先介绍到这里吧。

[Center]: /images/20220805/159c89d722644b7f84bdc5d4d9fa7001.png
[Center 1]: /images/20220805/4b576ee1b2874cc3acc976fb47b70f8d.png
[Center 2]: /images/20220805/40965d996ff4450ab09c6b85b0f323b2.png