Создание и использование вспомогательного метода на сайте веб-страницы ASP.NET (Razor)

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

В этой статье описывается создание вспомогательного приложения на веб-сайте веб-страницы 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. В папке приложения_код создайте новый CSHTML -файл и назовите его михелперс. 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.

    Обратите внимание, что файл называется михелперс. 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>
    

    Чтобы вызвать созданный вспомогательный модуль, используйте @, за которым следует имя файла, в котором находится вспомогательная функция, точка, а затем имя вспомогательного метода. (Если в папке _приложения имеется несколько папок, можно использовать синтаксис @FolderName.FileName.HelperName для вызова вспомогательного метода на любом уровне вложенной папки). Текст, добавляемый в кавычки в круглых скобках, — это текст, который вспомогательный компонент будет отображать как часть заметки на веб-странице.

  3. Сохраните страницу и запустите ее в браузере. Вспомогательное приложение создает элемент примечания прямо там, где вы вызывали вспомогательное приложение: между двумя абзацами.

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

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

Горизонтальное меню в качестве вспомогательного метода Razor. В этой записи блога от Mike Поуп показано, как создать горизонтальное меню в качестве вспомогательного приложения с помощью разметки, CSS и кода.

Использование HTML5 в веб-страницы ASP.NET вспомогательных средах для WebMatrix и ASP.NET MvC3. В этой записи блога с помощью SAM Абрахам показан вспомогательный объект, который визуализирует элемент Canvas HTML5.

Разница между @Helpers и @Functions в WebMatrix. В этой записи блога от Mike Бринд @helper описывается синтаксис и @function синтаксис и когда следует использовать каждый из них.