Czym są helpery w ASP i jak je tworzyć ?

Dzisiaj powiemy sobie kilka słów o helperach czyli czymś bardzo użytecznym i domyślnie dostępnym we frameworku ASP .NET. Helpery przydają się nam w wielu sytuacjach i pozwalają przyśpieszyć naszą pracę

Czym jest helper?

Helper to nic innego jak pomocnicza metoda do której się odwołujemy, która zwraca nam stringa, string ten może być reprezentacją dowolnych znaków takich jak np. kod HTML.

Co za tym idzie, nasz helper może zwracać dowolnie przygotowane znaczniki html takie jak np. <input>, <form>, <label> itp. Są bardzo podobne do code snippetów tylko tym razem zwracają one czysty kod HTML a nie kod C#.

Mocno ułatwiają nam pracę, gdy chcemy np. wygenerować sobie jakąś wybraną sekwencję kodu HTMLa przy użyciu jednego, krótkiego wyrażenia. Oprócz tego my sami możemy tworzyć sobie swoje własne helpery i korzystać z nich w dowolnym widoku 🙂

Tak w widoku bo tam właśnie znajduje się kod HTML i tam właśnie będziemy wywoływać naszych pomocników za pomocą @ 🙂

Dwa rodzaje składni

Na początku zanim przejdziemy do samych helperów musimy zrozumieć jakie dwa rodzaje składni dostępne są w ASP .NET. W zależności od silnika renderującego będziemy mieli możliwość skorzystania z dwóch sposobu zapisu:

Zapis interpretowany przez ASPXa:

10

 

Zapis interpretowany przez Razora:

11

Oczywiście oba zapisy działają praktycznie tak samo natomiast dużo bardziej popularny jest ten drugi.

Jak skorzystać z helperów?

Jeśli dokładnie przyjrzymy się domyślnie wygenerowanym plikom znajdującym się w naszych widokach takim jak _Layout.cshtml to możemy w łatwy sposób zauważyć, że tam wszędzie używane są helpery.

1

Na pierwszy rzut oka widzimy kilka tych samych 🙂 Są nimi ActionLinki. Jak one są wywoływane?

2

Po małpce 🙂 Właściwie co ta małpka oznacza? Stanowi dyrektywę, która pozwala odróżnić nasz kod HTML od kodu C#. Dzięki tej małpce Razor czyli nasz silnik renderujący strony HTML nie renderuje tych naszych helperów w prost tylko wie, że te dyrektywe należy zamienić na pewną sekwencję kodu HTML.

Po małpie wpisujemy nazwę klasy. Domyślnie w ASP .NET klasą przechowującą helpery jest klasa HTML. Oczywiście tych klas zawierających helpery może być więcej ale ta jest klasą podstwową i będzie przez nas najczęściej używana.

Co kryje się w środku?

Idąc dalej, wejdźmy sobie do środka klasy HTML. Mówiliśmy, że jest to klasa. Musi być ona klasą statyczną. Zawiera w sobie różnego rodzaju obiekty, dlatego po kropce wyświetli nam się cały szereg domyślnie dostępnych helperów 🙂

3

Już widzimy, że nazwy są całkowicie oczywiste i mówią nam wiele. Są opisane dokładnie w taki sposób jak wyglądają i działają w kodzie HTML.

Co przyjmuje taki helper?

Idźmy dalej. Stwórzmy sobie teraz przykładowy helper zawierający pole tekstowe tak jak w zwykłym formularzu 🙂 Bardzo szybko możemy zobaczyć ile przeciążeń posiada każdy z tych helperów i jakie parametry przyjmuje.

4

Tworząc zwykłego TextBoxa standardowo musimy podać jego nazwę, czyli po to potrzebny jest nam parametr string name. Działą to tak samo jak w kodzie HTML w którym korzystamy ze znacznika name=”nazwaElementu”. Z tym, że tutaj nazwę naszego TextBoxa przekazujemy sobie w parametrze.

Zamiast pisać:

6

Wystarczy, że wywołamy ten helper i podamy mu parametr:

5

Od razu widać, że zapis jest dużo krótszy i bardziej czytelny. Po uruchomieniu widoku i zbadaniu źródła wygenerowanej strony, możemy dostrzec w jaki sposób nasz helper został wygenerowany:

7

Praktycznie identycznie jak byśmy robili go sobie ręcznie z tym, że Razor zrobił to za nas automatycznie.

A czym różni się TextBox od TextBoxFor?

Bardzo dobre pytanie. Zaraz postaram się tutaj na nie odpowiedzieć. Wygenerujmy sobie teraz text boxa dla… no właśnie dla czego?

8

Tak na prawdę helper TextBoxFor jako parametr przyjmuje wyrażenie lambda, które na podstawie wybranego przez nas modelu wygeneruje wybraną kontrolkę. Czyli przykładowo:

9

Przekazujemy wyrażenie lambda na podstawie naszego modelu, który przekazaliśmy do widoku. Tyle o samych helperach. Zachęcam do eksperymentowania samemu bo wtedy najwięcej się nauczycie. Ja mogę wskazać Wam tylko kierunek 🙂

A jak tworzyć sobie swoje własne helpery?

Teraz postaramy się stworzyć jakieś własne helpery 🙂

Na początku musimy zastanowić się w jaki sposób i gdzie chcemy przechowywać nasze helpery. Najprościej umieścić sobie je we własnym katalogu w projekcie. Stworzymy sobie katalog NaszeHelpery i w nim utworzymy sobie klasę WlasneHelpery.cs. Klasa ta może być klasą statyczną bądź nie w zależności z jakich metod będziemy korzystać wewnątrz.

12

Następnie w tej klasie stworzymy sobie metodę dla helpera:

13

Oczywiście to jest najprostszy przykład a takie helpery mogą być dużo bardziej skomplikowane.

Nasz własny helper wywołuje tak samo jak helpery domyślne:

14

 

I to wszystko jeśli chodzi o tworzenie helperów. Takie podstawy na pewno Wam się przydadzą i skłonią do dalszego odkrywania tajemnic 🙂

Zdjęcie z wpisu: Flickr na licencji Creative Commons



Więcej w ASP .NET, CSS, Helper, HTML
ASP: Aplikacje wielowarstwowe i wzorzec MVC

Wzorzec MVC czyli Model View Controller to chyba jeden z najbardziej popularnych wzorców stosowanych w projektowaniu aplikacji webowych. Znajduje on...

Zamknij