ASP.net MVC: DisplayTemplate, EditorTemplate

ASP.net MVC to fajny framework 🙂 Przy okazji przygotowań do egzaminu 70-486 zdałem sobie sprawę, że nie wiedziałem do tej pory o tak przydatnej rzeczy jak własne DisplayTemplates i EditorTemplates. Troszkę wstyd, jednak człowiek podobno uczy się całe życie 😉

Z czym to się je?

@Html.EditorFor(m => m.UserName)

Wszyscy znamy helpery wbudowane w ASP.net MVC, które pozwalają nam w łatwy sposób tworzyć „kontrolki” htmlowe, jak textBoxy, checkBoxy itd. Praktycznie zawsze łączymy je z danymi z modelu, by potem wykorzystać w akcjach kontrolera, nie zastanawiając się jak to naprawdę działa. Otóż dla standardowych typów takich są gotowe specjalne templatki, odpowiednio do wyświetlania i wprowadzania/edytowania danych. Sam framework w wielu miejscach pozwala nam na rozszerzanie swoich możliwości, nie inaczej jest w tym miejscu, a pole do popisu jest spore (helpery edycji i wyświetlania rozbudowanych modeli)

Jak stworzyć własne „kontrolki”?

Musimy przygotować specjalne widoki (osobno dla Display, osobno dla EditorTemplate). Tak, tylko widoki. Jedyne zastrzeżenie, to że muszą być one odpowiednio nazwane i być umieszczone w dedykowanym folderze dla widoków kontrolera w którego widokach mają mieć zastosowanie (albo w folderze ogólnym Views/Shared) oraz w odpowiednim folderze dla swojego zastosowania (np Views/Home/DisplayTemplates albo Views/Shared/EditorTemplates).

I tak, np dla stworzenia naszej pierwszej templatki do wprowadzania i wyświetlania danych typu Int32 musimy stworzyć widoki Int32.cstml w folderach DisplayTemplates i EditorTemplates.

DisplayTemplate, Views/Shared/DisplayTemplates/Int32.cshtml

@model Int32?

Wybrano wartość: @Model

EditorTemplate, Views/Shared/EditorTemplates/Int32.cshtml

@model Int32?

@{
    var data = Enumerable.Range(0, 10);
}

Wybierz liczbę: @Html.DropDownList("", new SelectList(data, Model))

Wywołanie

@{
    int test = 7;
}
@Html.EditorFor(m => test)
@Html.DisplayFor(m => test)

Efekt w html

<select id="test" name="test" data-val-required="Pole Int32 jest wymagane." data-val-number="The field Int32 must be a number." data-val="true">
        ...
        <option selected="selected">
            7
        </option>
        ...
</select>
Wybrano wartość: 7 

Jeżeli w naszym „helperze” nie podamy name dla danej kontrolki html, domyślnie dopasuje się do tego dobra nazwa, czyli nazwa propertki/zmiennej z modelu. Dla mnie bardzo spoco.

Oczywiście to tylko banalny przykład, jednakże jeżeli jeszcze ktoś o tym nie wiedział, tak jak ja do tej pory, a siedzi już trochę w ASP.net MVC, to od razu wyczuje jakie to daje możliwości 😉

W przypadku złożonych modeli, oczywiście w templatkach do nich możemy używać innych templatek, np właśnie dla pól typu Int32 czy Boolean.