Własny Helper HTML w ASP.NET MVC

Kiedy w Twojej aplikacji korzystającej z frameworka ASP.NET MVC pojawia się coraz więcej powtarzających się małych fragmentów kodu, np. wiersze w tabeli wypisujące dane w konkretny, zawsze taki sam sposób to dobry moment żeby rozważyć możliwość dodania Helperów HTML.

Czym są takie helpery? Na pewno w swojej aplikacji korzystasz w widokach np. z poniższego zapisu:

@Html.DisplayNameFor(model => model.Title)

Tutaj właśnie masz przykład użycia wbudowanego już w ASP.NET MVC helpera HTML. Jest to kod C# zwracający podczas kompilacji fragment HTMLa, w tym wypadku będzie to nazwa pola Title.

W tym poście nie będę opisywał całej teorii związanej z helperami, pokażę jedynie prosty, kompletny przykład i skomentuję go. Zachęcam do samodzielnej próby rozbudowania lub zmienienia mojego kawałka kodu, bo to jedna z lepszych metod nauki.

Zacznijmy od przykładowego fragmentu HTML, dla którego napiszemy helper:

<table>
    <tr>
        <td class='wow'>@Model.Title</td>
    </tr>
    <tr>
        <td class='wow'>@Model.Author</td>
    </tr>
    <!-- etc. -->
</table>

Co prawda powyższy przykład nie zademonstruje w 100% oszczędności wynikających ze stosowania heleprów, ale sądzę, że ogarnięty czytelnik będzie świadomy idei i korzyści pojawiających się w miarę zwiększania wielkości projektu.

No więc mamy tutaj wypisywane kolejne wiersze z polami modelu przekazanego do widoku. Jak widać są one wyświetlane w taki sam sposób, zmienia się jedynie treść. Jest to idealna sytuacja dla zastosowania własnego helpera.

Żeby go dodać tworzymy w projekcie plik z publiczną, statyczną klasą o dowolnej nazwie, jednak częstą praktyką jest dodawanie na końcu jej nazwy słowa Helper tak samo jak wygodnie jest stworzyć dla helperów nowy folder ponieważ zapewne przy większym projekcie na jednym pliku się nie skończy i dobrze jest mieć je zebrane w jednym miejscu.

using System;
using System.Web.Mvc;

namespace Project.Helpers
{
    public static class BookHelper
    {
        
    }
}

Jak widać helper znajduje się w przestrzeni nazw (i folderze) Helpers . Teraz czas dodać metodę, która będzie wywoływana przez użycie @Html. w widoku, cała klasa będzie więc miała następującą postać:

using System;
using System.Web.Mvc;

namespace Project.Helpers
{
    public static class BookHelper
    {
        public static MvcHtmlString DetailsFor(this HtmlHelper helper, Expression<Func<TModel, TProperty>> expression)
        {
            var html = "<tr>";
            html += "<td class='wow'>" + htmlHelper.DisplayFor(expression);
            html += "</td></tr>";

            return MvcHtmlString.Create(html);
        }
    }
}

Mamy tutaj statyczną metodę zwracającą obiekt typu MvcHtmlString. Parametr this HtmlHelper helper powoduje, że nasz helper będzie rozszerzeniem standardowego helpera dzięki czemu będzie możliwość użycia go poprzez

@Html.DetailsFor(model => model.Title)

Drugim parametrem jest wyrażenie lambda czyli np. ’model => model.Title’ pokazane powyżej, z którego możemy w razie potrzeby wyciągnąć m.in. informacje o nazwie lub wartości przekazanego pola. W naszym wypadku po prostu przekazujemy je do standardowo dostępnej metody wyświetlającej wartość pola. Cała zawartość naszej metody sprowadza się do posklejania stringa z kodem HTML i utworzeniu na jego podstawie obiektu, który pozwoli później wyrenderować nasz fragment w widoku.

Teraz nie zostanie nic innego niż użycie naszego nowego helpera. Nie ma konieczności informowania gdziekolwiek, że dodaliśmy nowy helper, platforma sama go znajdzie. Tak więc dla przykładu, który podałem na początku użycie naszego helpera wygląda w ten sposób:

<table>
    @Html.DetailsFor(model => model.Title)
    @Html.DetailsFor(model => model.Author)
    <!-- etc. -->
</table>

Jeszcze jedną zaletą korzystania z helperów poza porządkiem w widokach jest łatwość zmiany wyglądu. Jeśli chcemy zmienić coś w wyglądzie, ułożeniu, sposobie wyświetlania w naszych tabelach to wystarczy zmiana w helperze zamiast szukanie wszystkich miejsc  gdzie są wyświetlane dane.

I to na tyle. Tak jak wspomniałem na początku nie chciałem tutaj zawierać całej teorii, pokazałem jak można dodawać helpery i zachęcam do własnego kombinowania i doczytywania jeśli chcesz je lepiej poznać. W razie pytań możesz pisać na maila lub w komentarzach ;)