Udostępnij za pośrednictwem

Tworzenie i używanie pomocnika w witrynie ASP.NET Web Pages (Razor)

  • Artykuł

– autor Tom FitzMacken

W tym artykule opisano sposób tworzenia pomocnika w witrynie internetowej ASP.NET Web Pages (Razor). Pomocnik to składnik wielokrotnego użytku, który zawiera kod i znaczniki do wykonania zadania, które może być żmudne lub złożone.

Czego nauczysz się:

  • Jak utworzyć i użyć prostego pomocnika.

Oto ASP.NET funkcje wprowadzone w artykule:

  • Składnia @helper .

Wersje oprogramowania używane w samouczku

  • ASP.NET Web Pages (Razor) 3

Ten samouczek współpracuje również z usługą ASP.NET Web Pages 2.

Omówienie pomocników

Jeśli musisz wykonać te same zadania na różnych stronach witryny, możesz użyć pomocnika. ASP.NET strony sieci Web zawierają wiele pomocników i istnieje wiele innych, które można pobrać i zainstalować. (Lista wbudowanych pomocników w ASP.NET Web Pages znajduje się na liście w przewodniku Szybki przewodnik interfejsu API ASP.NET). Jeśli żaden z istniejących pomocników nie spełnia Twoich potrzeb, możesz utworzyć własny pomocnik.

Pomocnik umożliwia używanie wspólnego bloku kodu na wielu stronach. Załóżmy, że na stronie często chcesz utworzyć element notatki, który jest ustawiony poza normalnymi akapitami. Być może notatka jest tworzona jako <div> element stylizowany jako pole z obramowaniem. Zamiast dodawać ten sam znacznik do strony za każdym razem, gdy chcesz wyświetlić notatkę, możesz spakować znaczniki jako pomocnik. Następnie możesz wstawić notatkę z pojedynczym wierszem kodu w dowolnym miejscu, w którym jest on potrzebny.

Użycie takiego pomocnika sprawia, że kod na każdej ze stron jest prostszy i łatwiejszy do odczytania. Ułatwia również konserwację witryny, ponieważ jeśli trzeba zmienić wygląd notatek, możesz zmienić znaczniki w jednym miejscu.

Tworzenie pomocnika

W tej procedurze pokazano, jak utworzyć pomocnik, który tworzy notatkę zgodnie z opisem. Jest to prosty przykład, ale niestandardowy pomocnik może zawierać dowolne znaczniki i ASP.NET potrzebny kod.

  1. W folderze głównym witryny internetowej utwórz folder o nazwie App_Code. Jest to nazwa folderu zarezerwowanego w ASP.NET, w którym można umieścić kod dla składników, takich jak pomocnicy.

  2. W folderze App_Code utwórz nowy plik cshtml i nadaj mu nazwę MyHelpers.cshtml.

  3. Zastąp istniejącą zawartość następującymi elementami:

    @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>
}

    Kod używa składni do @helper deklarowania nowego pomocnika o nazwie MakeNote. Ten konkretny pomocnik umożliwia przekazanie parametru o nazwie content , który może zawierać kombinację tekstu i znaczników. Pomocnik wstawia ciąg do treści notatki przy użyciu zmiennej @content .

    Zwróć uwagę, że plik nosi nazwę MyHelpers.cshtml, ale pomocnik ma nazwę MakeNote. Można umieścić wiele niestandardowych pomocników w jednym pliku.

  4. Zapisz i zamknij plik.

Korzystanie z pomocnika na stronie

  1. W folderze głównym utwórz nowy pusty plik o nazwie TestHelper.cshtml.

  2. Dodaj następujący kod do pliku:

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

    Aby wywołać utworzony pomocnik, użyj @ nazwy pliku, w którym znajduje się pomocnik, kropka, a następnie nazwa pomocnika. (Jeśli w folderze App_Code znajduje się wiele folderów, możesz użyć składni @FolderName.FileName.HelperName do wywołania pomocnika w dowolnym zagnieżdżonym poziomie folderu). Tekst dodany w cudzysłowie w nawiasach to tekst, który pomocnik będzie wyświetlany jako część notatki na stronie internetowej.

  3. Zapisz stronę i uruchom ją w przeglądarce. Pomocnik generuje element notatki bezpośrednio, w którym został wywołany pomocnik: między dwoma akapitami.

    Zrzut ekranu przedstawiający stronę w przeglądarce i sposób, w jaki pomocnik wygenerował znacznik, który umieszcza pole wokół określonego tekstu.

Dodatkowe zasoby

Menu poziome jako pomocnik Razor. Ten wpis w blogu Mike Pope pokazuje, jak utworzyć menu poziome jako pomocnik przy użyciu znaczników, CSS i kodu.

Korzystanie z kodu HTML5 w pomocnikach ASP.NET Web Pages dla programu WebMatrix i ASP.NET MVC3. Ten wpis w blogu Sam Abraham przedstawia pomocnika, który renderuje element HTML5 Canvas .

The Difference Between @Helpers and @Functions in WebMatrix. W tym wpisie w blogu Mike Brind opisano @helper składnię i @function składnię oraz czas korzystania z nich.