在 ASP.NET 网页 (Razor) 站点中创建和使用帮助程序

作者 Tom FitzMacken

本文介绍如何在 ASP.NET 网页 (Razor) 网站中创建帮助程序。 帮助程序是一个可重用组件,其中包含代码和标记,用于执行可能繁琐或复杂的任务。

你将了解的内容:

  • 如何创建和使用简单的帮助程序。

以下是本文中介绍的 ASP.NET 功能:

  • 语法 @helper

本教程中使用的软件版本

  • ASP.NET 网页 (Razor) 3

本教程还适用于 ASP.NET 网页 2。

帮助程序概述

如果需要在网站上的不同页面上执行相同的任务,可以使用帮助程序。 ASP.NET 网页包括许多帮助程序,还有更多可以下载和安装的帮助程序。 (ASP.NET API 快速参考中列出了 ASP.NET 网页 中的内置帮助程序列表。) 如果现有帮助程序都不能满足你的需求,则可以创建自己的帮助程序。

借助帮助程序,可以在多个页面中使用通用代码块。 假设在页面中经常要创建一个与普通段落分开的备注项。 也许注释是作为元素 <div> 创建的,该元素的样式为带边框的框。 可以将标记打包为帮助程序,而不是在每次想要显示备注时将相同的标记添加到页面。 然后,可以在需要注释的任何位置插入包含单行代码的笔记。

使用此类帮助程序可使每个页面中的代码更简单、更易于阅读。 它还使维护网站变得更容易,因为如果需要更改笔记的外观,可以在一个位置更改标记。

创建帮助程序

此过程演示如何创建创建注释的帮助程序,如前所述。 这是一个简单的示例,但自定义帮助程序可以包含所需的任何标记和 ASP.NET 代码。

  1. 在网站的根文件夹中,创建名为 App_Code 的文件夹。 这是 ASP.NET 中的保留文件夹名称,可在其中放置帮助程序等组件的代码。

  2. App_Code 文件夹中创建新的 .cshtml 文件并将其命名为 MyHelpers.cshtml

  3. 将现有内容替换为以下内容:

    @helper MakeNote(string content) {
      <div class="note" 
           style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;">
        <p>
          <strong>Note</strong>&nbsp;&nbsp; @content
        </p>
      </div>
    }
    

    代码使用 @helper 语法声明名为 MakeNote的新帮助程序。 通过此特定帮助程序,可以传递一个名为 content 的参数,该参数可以包含文本和标记的组合。 帮助程序使用 @content 变量将字符串插入笔记正文。

    请注意,该文件名为 MyHelpers.cshtml,但帮助程序名为 MakeNote。 可以将多个自定义帮助程序放入单个文件中。

  4. 保存并关闭该文件。

在页面中使用帮助程序

  1. 在根文件夹中,创建名为 TestHelper.cshtml 的新空白文件。

  2. 将以下代码添加到该文件:

    <!DOCTYPE html>
      <head>
        <title>Test Helpers Page</title>
      </head>
      <body>
        <p>This is some opening paragraph text.</p>
    
        <!-- Insert the call to your note helper here. -->
        @MyHelpers.MakeNote("My test note content.")
    
        <p>This is some following text.</p>
      </body>
    </html>
    

    若要调用创建的帮助程序,请使用 @ 后跟帮助程序所在的文件名、一个点,然后使用帮助程序名称。 (如果 App_Code 文件夹中有多个文件夹,则可以使用 语法 @FolderName.FileName.HelperName 在任何嵌套文件夹级别) 调用帮助程序。 在括号内添加引号的文本是帮助程序将在网页中显示为注释的一部分的文本。

  3. 保存页面并在浏览器中运行它。 帮助程序在调用帮助程序的位置生成备注项:两个段落之间。

    显示浏览器中的页面以及帮助程序如何生成标记的屏幕截图,该标记在指定文本周围放置一个框。

其他资源

水平菜单作为 Razor 帮助程序。 Mike Pope 的这篇博客文章演示如何使用标记、CSS 和代码创建水平菜单作为帮助程序。

利用 webMatrix 和 ASP.NET MVC3 ASP.NET 网页帮助程序中的 HTML5。 山姆·亚伯拉罕的这篇博客文章演示了一个呈现 HTML5 Canvas 元素的帮助程序。

The Difference Between @Helpers and @Functions in WebMatrix. 这篇由 Mike Brind 撰写的博客文章介绍了 @helper 语法和 @function 语法以及何时使用每个语法。