Создание и использование вспомогательного метода на сайте веб-страницы ASP.NET (Razor)Creating and Using a Helper in an ASP.NET Web Pages (Razor) Site

от Tom фитзмаккенby Tom FitzMacken

В этой статье описывается создание вспомогательного приложения на веб-сайте веб-страницы ASP.NET (Razor).This article describes how to create a helper in an ASP.NET Web Pages (Razor) website. Вспомогательное приложение — это многократно используемый компонент, который содержит код и разметку для выполнения задачи, которая может быть утомительной или сложной.A helper is a reusable component that includes code and markup to perform a task that might be tedious or complex.

Что вы узнаете:What you'll learn:

  • Как создать и использовать простой вспомогательный метод.How to create and use a simple helper.

Это функции ASP.NET, представленные в статье:These are the ASP.NET features introduced in the article:

  • Синтаксис @helper.The @helper syntax.

Версии программного обеспечения, используемые в этом руководствеSoftware versions used in the tutorial

  • Веб-страницы ASP.NET (Razor) 3ASP.NET Web Pages (Razor) 3

Этот учебник также работает с веб-страницы ASP.NET 2.This tutorial also works with ASP.NET Web Pages 2.

Обзор вспомогательных функцийOverview of Helpers

Если необходимо выполнить те же задачи на разных страницах сайта, можно использовать вспомогательное приложение.If you need to perform the same tasks on different pages in your site, you can use a helper. Веб-страницы ASP.NET включает несколько вспомогательных функций, и вы можете скачать и установить гораздо больше.ASP.NET Web Pages includes a number of helpers, and there are many more that you can download and install. (Список встроенных вспомогательных функций в веб-страницы ASP.NET приведен в кратком справочнике по API ASP.NET.) Если ни один из существующих вспомогательных функций не соответствует вашим потребностям, вы можете создать собственный модуль поддержки.(A list of the built-in helpers in ASP.NET Web Pages is listed in the ASP.NET API Quick Reference.) If none of the existing helpers meet your needs, you can create your own helper.

Вспомогательный объект позволяет использовать общий блок кода на нескольких страницах.A helper lets you use a common block of code across multiple pages. Предположим, что на странице часто требуется создать элемент примечания, который будет отделяться от обычных абзацев.Suppose that in your page you often want to create a note item that's set apart from normal paragraphs. Возможно, заметка создается как элемент <div>, оформленный как поле с границей.Perhaps the note is created as a <div> element that's styled as a box with a border. Вместо того, чтобы добавлять эту разметку на страницу каждый раз, когда нужно отобразить заметку, можно упаковать разметку как вспомогательную функцию.Rather than add this same markup to a page every time you want to display a note, you can package the markup as a helper. Затем можно вставить заметку с одной строкой кода там, где она нужна.You can then insert the note with a single line of code anywhere you need it.

Использование вспомогательного метода делает код на каждой из ваших страниц проще и проще в чтении.Using a helper like this makes the code in each of your pages simpler and easier to read. Кроме того, это упрощает обслуживание сайта, так как, если необходимо изменить вид заметок, можно изменить разметку в одном месте.It also makes it easier to maintain your site, because if you need to change how the notes look, you can change the markup in one place.

Создание вспомогательного методаCreating a Helper

В этой процедуре показано, как создать вспомогательный объект, который создает заметку, как описано выше.This procedure shows you how to create the helper that creates the note, as just described. Это простой пример, но пользовательский вспомогательный метод может содержать любую разметку и ASP.NET код, который вам нужен.This is a simple example, but the custom helper can include any markup and ASP.NET code that you need.

  1. В корневой папке веб-сайта создайте папку с именем App_Code.In the root folder of the website, create a folder named App_Code. Это зарезервированное имя папки в ASP.NET, где можно разместить код для таких компонентов, как вспомогательные методы.This is a reserved folder name in ASP.NET where you can put code for components like helpers.

  2. В папке приложения_код создайте новый CSHTML -файл и назовите его михелперс. cshtml.In the App_Code folder create a new .cshtml file and name it MyHelpers.cshtml.

  3. Замените имеющееся содержимое следующим:Replace the existing content with the following:

    @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.The code uses the @helper syntax to declare a new helper named MakeNote. Этот конкретный вспомогательный метод позволяет передать параметр с именем content, который может содержать сочетание текста и разметки.This particular helper lets you pass a parameter named content that can contain a combination of text and markup. Вспомогательная функция вставляет строку в текст заметки, используя переменную @content.The helper inserts the string into the note body using the @content variable.

    Обратите внимание, что файл называется михелперс. cshtml, но вспомогательный объект называется MakeNote.Notice that the file is named MyHelpers.cshtml, but the helper is named MakeNote. В один файл можно добавить несколько пользовательских вспомогательных функций.You can put multiple custom helpers into a single file.

  4. Сохраните файл и закройте его.Save and close the file.

Использование вспомогательного метода на страницеUsing the Helper in a Page

  1. В корневой папке создайте новый пустой файл с именем TestHelper. cshtml.In the root folder, create a new blank file called TestHelper.cshtml.

  2. Добавьте в него указанный ниже код.Add the following code to the file:

    <!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>
    

    Чтобы вызвать созданный вспомогательный модуль, используйте @, за которым следует имя файла, в котором находится вспомогательная функция, точка, а затем имя вспомогательного метода.To call the helper you created, use @ followed by the file name where the helper is, a dot, and then the helper name. (Если в папке _приложения имеется несколько папок, можно использовать синтаксис @FolderName.FileName.HelperName для вызова вспомогательного метода на любом уровне вложенной папки).(If you had multiple folders in the App_Code folder, you could use the syntax @FolderName.FileName.HelperName to call your helper within any nested folder level). Текст, добавляемый в кавычки в круглых скобках, — это текст, который вспомогательный компонент будет отображать как часть заметки на веб-странице.The text that you add in quotation marks within the parentheses is the text that the helper will display as part of the note in the web page.

  3. Сохраните страницу и запустите ее в браузере.Save the page and run it in a browser. Вспомогательное приложение создает элемент примечания прямо там, где вы вызывали вспомогательное приложение: между двумя абзацами.The helper generates the note item right where you called the helper: between the two paragraphs.

    Снимок экрана, показывающий страницу в браузере и то, как созданная вспомогательная функция помещает в рамку вокруг указанного текста.

Дополнительные ресурсыAdditional Resources

Горизонтальное меню в качестве вспомогательного метода Razor.Horizontal menu as a Razor helper. В этой записи блога от Mike Поуп показано, как создать горизонтальное меню в качестве вспомогательного приложения с помощью разметки, CSS и кода.This blog entry by Mike Pope shows how to create a horizontal menu as a helper using markup, CSS, and code.

Использование HTML5 в веб-страницы ASP.NET вспомогательных средах для WebMatrix и ASP.NET MvC3.Leveraging HTML5 in ASP.NET Web Pages Helpers for WebMatrix and ASP.NET MVC3. В этой записи блога с помощью SAM Абрахам показан вспомогательный объект, который визуализирует элемент Canvas HTML5.This blog entry by Sam Abraham shows a helper that renders an HTML5 Canvas element.

Разница между @Helpers и @Functions в WebMatrix.The Difference Between @Helpers and @Functions in WebMatrix. В этой записи блога от Mike Бринд @helper описывается синтаксис и @function синтаксис и когда следует использовать каждый из них.This blog entry by Mike Brind describes @helper syntax and @function syntax and when to use each.