MVC专题 专题
您的位置:csharp > MVC专题专题 > ASP.Net MVC Razor
ASP.Net MVC Razor
作者:--    发布时间:2019-11-19

在本章中,我们来看看asp.net mvc应用程序中的razor视图引擎以及为什么使用razor的一些原因。 razor是一种标记语法,可以让您使用 c# 和vb.net将基于服务器的代码嵌入到网页中。 这不是一种编程语言。 这是一个服务器端标记语言。

razor与asp.net mvc没有任何关系,因为razor是一个通用的模板引擎。 您可以在任何地方使用它来生成像html一样的输出。 只是asp.net mvc实现了一个视图引擎,它允许在mvc应用程序内部使用razor来生成html。

假设有一个模板文件,它是一些文字和一些代码块的混合体。可以将该模板与一些数据或模板指定数据应该出现的位置的特定模型相结合,然后执行模板以生成输出。

razor vs aspx

  • razor与aspx文件的工作方式非常相似。aspx文件是模板,其中包含文本文本和一些 c# 代码,指定数据应该出现的位置。执行这些来为应用程序生成html。
  • aspx文件依赖asp.net运行时来解析和执行这些aspx文件。razor没有这样的依赖关系。
  • 与aspx文件不同,razor有一些不同的设计目标。

目标

微软希望razor易于使用,易于学习,并且可以在visual studio等工具中使用,因此intellisense 和调试器可用,但他们希望razor与特定技术(如asp.net或 asp.net mvc)绑定关联。

如果熟悉aspx文件的生命周期,那么可能会意识到,asp.net运行时可以解析和执行这些aspx文件。 微软希望razor聪明,让开发人员的工作更轻松。

下面来看一个aspx文件中的示例代码,它包含一些文本文本。这是html标记,包含一点 c# 代码。

<% foreach (var item in model) { %>
   <tr>
      <td>
         <%: html.actionlink("edit", "edit", new { id = item.id })%> |
         <%: html.actionlink("details", "details", new { id = item.id }) %>|
         <%: html.actionlink("delete", "delete", new { id = item.id })%>
      </td>

      <td>
         <%: item.name %>
      </td>

      <td>
         <%: string.format("{0,g}", item.joiningdate) %>
      </td>

   </tr>
<%}%>

但是这些web表单基本上是由微软重新使用的,与mvc的早期版本一起工作,这意味着aspx文件从来不是mvc的完美搭配。

当您需要从 c# 代码转换回html代码,或者从html代码转换回 c# 代码时,语法有点笨拙。 intellisense也会提示您执行一些在mvc项目中没有意义的事情,例如将输出缓存和用户控件的指令添加到aspx视图中。

现在看看这个产生相同输出的代码,不同之处在于它使用的是razor语法。

@foreach (var item in model) {
   <tr>
      <td>
         @html.actionlink("edit", "edit", new { id = item.id }) |
         @html.actionlink("details", "details", new { id = item.id }) |
         @html.actionlink("delete", "delete", new { id = item.id })
      </td>

      <td>
         @item.name
      </td>

      <td>
         @string.format("{0,g}", item.joiningdate)
      </td>
   </tr>
}

使用razor语法,可以使用'@'符号开始编写 c# 代码,razor解析会自动切换到解析这个语句,这个foreach语句,解析作为 c# 代码。

但是,当我们完成了foreach语句,并且使用大括号的时候,可以从 c# 代码转换成html,而不用在里面放置一个明确的标记,就像尖括号中的百分比。

razor解析器足够聪明,可以在 c# 代码和html之间进行切换,而当将大括号放在这里时,再次从html切换回 c# 代码。如果比较这两个代码块,您会发现razor版本更易于阅读和编写。

使用razor创建视图

下面我们来创建一个新的asp.net mvc项目。

在名称字段中输入项目的名称:mvcrazor,然后单击确定。如下图所示 -

为了简单起见,选择 选项并在为以下项添加文件夹和核心引用 部分选中mvc复选框,然后单击确定。 它将使用最少的预定义内容创建一个基本的mvc项目。

项目创建后,将在“解决方案资源管理器”窗口中看到许多文件和文件夹。 因为我们已经从一个空的项目模板创建了asp.net mvc项目,所以目前应用程序不包含任何要运行的东西。 由于从一个空应用程序开始,甚至没有一个控制器,所以需要手动添加一个控制器:homecontroller

要添加控制器,请右键单击解决方案资源管理器 中的controllers 文件夹,然后选择:添加 -> 控制器 ,它将显示“添加基架” 对话框。

选择mvc 5控制器 - 空 选项,然后单击添加 按钮,然后添加控制器对话框将出现。

将名称设置为:homecontroller,然后单击“添加”按钮。在controllers 文件夹中看到一个新的 c# 文件:homecontroller.cs,在visual studio中打开并进行编辑。代码如下所示 -

using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.mvc;

namespace mvcrazor.controllers
{
    public class homecontroller : controller
    {
        // get: home
        public actionresult index()
        {
            return view();
        }
    }
}

右键单击index操作方法,然后选择添加视图… ,如下所示 -

从模板下拉列表中选择empty,然后点击添加 按钮。 visual studio将在view/home文件夹中创建一个index.cshtml文件。内容如下所示 -

@{
    layout = null;
}

<!doctype html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>index</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>

请注意,razor视图有一个cshtml扩展名。 如果使用visual basic构建mvc应用程序,它将是一个vbhtml扩展。在这个文件的顶部是一个代码块,它将这个layout属性显式地设置为null。

当运行这个应用程序,会看到空白的网页,因为我们已经创建了一个空模板的视图。

下面添加一些 c# 代码。要在razor视图中编写一些 c# 代码,要做的第一件事就是输入"@"符号,告诉解析器它将在代码中执行某些操作。

创建一个for循环,在大括号内指定@index,这实质上是告诉 razor 存储变量index的值。

@{
    layout = null;
}

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width = device-width" />
    <title>第一个razor示例</title>
</head>

<body>
    <div>
        @for (int index = 0; index < 12; index++)
        {
            <div>@index </div>
        }
    </div>
</body>

</html>

运行这个应用程序,会看到下面的输出。


网站声明:
本站部分内容来自网络,如您发现本站内容
侵害到您的利益,请联系本站管理员处理。
联系站长
373515719@qq.com
关于本站:
编程参考手册