Razor布局引擎认识

Razor布局引擎认识：

1、  什么是Razor？

Razor是MVC3中的一个视图模板引擎，Razor其实是一种服务器代码和HTML代码混写的代码模板，类似于没有后置代码的.aspx文件。

2、相关的语法认识

@字符是Razor中的一个重要符号，它被定义为Razor服务器代码块的开始符号。如果我们希望在网页中输出一个变量，或者当前日期，我们可以使用如下代码：

@{string productName = "台灯";}

    <span>@productName</span>

    <span>@DateTime.Now.ToString("yyyy-MM-hh")</span>

3、  Razor语法之代码块定义

你可以使用@{code}来定义一段代码块。

 

@{
    int num1 =10;
    int num2 =5;

    int sum = num1 + num2;
    @sum;
}

在代码块中，我们编写代码的方式和通常服务器端代码的方式是一样的。另外，如果需要输出，例如上面的在页面中输出结果，我们可以使用@sum完成输出

　　另外，@(code)可以输出一个表达式的运算结果，上面的代码我们也可以写成这样：

@{
        int num1 =10;
        int num2 =5;

        int sum = num1 + num2;
        @(num1 +num2);
    }

4、Razor语法之代码混写

Razor支持代码混写。在代码块中插入HTML、在HTML中插入Razor语句都是可以的。

@{
    int num1 =10;
    int num2 =5;

    int sum = num1 + num2;
    string color ="Red";
    <font color="@color">@sum</font>
}

• 输出HTML代码（包含标签）：直接输出，string html = "<font color='red'>文本</font>"; @html
• 输出HTML内容（不包含标签）：有两种方法，第一种：IHtmlString html=new HtmlString("<font color='red'>文本</font>"); @html; 第二种：string html = "<font color='red'>文本</font>"; @Html.Raw(html);

5、Razor布局

 项目中的公共视图

我们分别定义了页面的页头、页脚等，Razor 中布局是非常简单的，类似我们以前使用的include加载方法

首先，我们看看"_layout.cshtml"中的代码，它类似于"ASPX"视图引擎中的母版页，如下：

 

第4行中，使用了ViewBag.Title，这样我们可以在各视图页指定各页面标题的名称，同理第8行指定body 的 id。如在Home页中：

 

 

第10行、21行使用了HtmlHelper.Partial()方法，分别将页头和页脚的局部视图加载进来，也没有太多可说的。16行中RenderBody()将各视图页的主体部分全部加载了进来，这样我们在"_layout.cshtml"页中完成了我们页面的布局，达到了复用的目的。最后在"_ViewStart.cshtml"中指定 Layout为我们定义的"_layout.cshtml"页，当然，我们还可以在"_ViewStart.cshtml"中根据需要加载不同的布局。

以上这些是 Razor 中基本的布局方法，很明显，如果复用的部分并不是静态的内容，想想我们在WebForm中使用的自定义控件。那么我们怎样在 Razor 视图中实现自定义控件一样的效果呢？在第18行中我们就实现了这个目的，下边就让我们看看，首先，我们在项目中添加了 App_Code 文件夹，并添加了名为“Latest.cshtml”的文件，如下：

接下来，我们使用helper类来定义了一个名为“Lastest()”的方法(方法名没取好)，用来显示我们最近发表的文章，我这里并没有具体的实现，而是取出了所有的文章，下图为方法定义：

 

最后，我们在需要显示的页面中调用这个方法即可。所以我在"_Layout.cshtml"页中调用了这个方法，如第18行。

好了，本篇关于 ASP.NET MVC3 中 Razor 布局的简单介绍就到这里，希望对学习 ASP.NET MVC3 的朋友能带来一些帮助。到此我们已经了解了 ASP.NET MVC3 三层结构以及数据的查询与显示、Razor 部局等，下一篇我们会看看 ASP.NET MVC3中的添加、修改和删除操作。