Skip to content

Thoughts about TagHelpers

Brain-Power

ASP.Net MVC Core introduced the new TagHelpers. The should take the C#-Magic out of the Razor views so people without C# know-how – mainly “the HTML/CSS-only Web-Designer” can work on the views too with the tools they know and which don’t understand C#. Also the syntax looks nicer as the developers brain should not switch between C# and HTML all the time. The classic HTML-Helpers still exist. That’s what the advertisements say and it sounds good to me as a C# developer too.

Here is a sample for those of you never saw the TagHelpers:

Old HTML-Helpers:

@Html.LabelFor(m => m.MyProperty, new { @class="col-sm-2 control-label" })

New Tag-Helpers:

<label asp-for="MyProperty" class="col-sm-2 control-label"></label>

This label Tag-Helpers looks clean and nice.

My experience and thoughts

Now I worked with ASP.Net MVC Core for a while on my personal projects. After some ramp-up with the new TagHelpers it got easier – that was to be expected. I am far away from an expert or even have a deep background of the TagHelpers but what I noticed: many of them are not easier to work with as they need more brain-power to use as when using the Html-Helpers. But why is this? Ads told us it should be exactly the opposite! This made me think for a while now …

I noticed that the problem is with the non-trivial TagHelpers. Most TagHelpers are implemented as a custom HTML-Attribute (or a set of attributes) and not on Tag-Level. But this means I have to write the correct HTML-Tag myself and then use the Tag-Helper attribute. Further more this means that I as a developer have to remember two or three but one thing:

  1. Which Tag-Helper exists?
  2. How could the TagHelper be implemented so:
  3. Which outer HTML-Tags must I surround what Tag-Helper with?

That’s a lot more brain-work (and brain storage space) I need then with HTML-Helpers:

  1. Which HTML-Helpers exists?

Examples

Let’s look at an example where I really needed some time to figure out how the TagHelper works and had to ask stack overflow – couldn’t figure it out on my own: Validation Messages.

With a HTML-Helper straight forward:

@Html.ValidationMessage(m => m.MyProperty)

One basically needs brain-power to remember there is something with “….ValidationM….”. The rest is IntelliSense.

Now with Tag-Helpers:

<span asp-validation-for="StartTime"></span>

Beside the fact that this is slightly longer I have to remember / know a few more things:

  1. There is a TagHelper with “…validation…”.
  2. For this helper I have to use a SPAN tag.
  3. The SPAN Tag needs to be normal closed – not self-closing (which is the default of Visual Studio’s auto-complete).

When we come to the validation summary you have to know that you have to use it inside a DIV tag – not a SPAN because it builds a UL and LI ‘s which can not live inside a SPAN but can inside a DIV.

< div asp-validation-summary="All" class="text-danger"></div>

But cool is the simplicity to support your own CSS classes. With HTML-Helpers they where as Microsoft did generate them with their own classes etc.

There are Tag-Helpers I still couldn’t figure out: @Html.EditorFor() or @Html.DisplayFor() (…and all the Editor-Templates).

The HTML/CSS-only designer guy

Then there is this often told HTML/CSS-only designer guy which has some basic HTML-Editor and knows about nothing more then HTML und CSS (and design hopefully). This guy then works on your view and stiles them.

I just never ever saw a HTML/CSS designer which made up even partially useable / maintainable HTML Markdown. IF you get HTML from a web-designer it mostly looks like shit. I’m always impressed that the browser get their crap looking good.

I talked to two React.js guys as they have a super cool new feature: JSX/TSX files. They are markup mixed with Javascript / TypeScript. …so Razor for the browser-client.

I asked them: “Does the HTML/CSS-only designer guys get this syntax? And what about tooling?“. Both answered: “Forget about this designer-guys – they do not exists like this! And tooling is ok. Its us developers how have to code the views anyway so use a powerful language.“.

Closing words

I know, TagHelpers are just one more tool in the Devs toolbox. You can use it but you don’t have to. BUT: There is huge push from ASP.Net Team to TagHelpers for all kind of things. Some of them are cooler and some of them – like the ValidationMessage.

To be honest, Visual Studio Tooling (with R#) was/is quite ok for the Razor views with Html-Helpers and HTML mixed. I saw cool usages of TAG-Level Tag-Helpers; not attribute-level TagHelpers.

I’m not yet a complete fan of them. I am thinking forth an back what the ideal “thing” in this are should look like. What do you think?

marcd View All

I love to write software. More then two decades ago I managed to make my hobby my full-time job so I spent more then 20 year writing professional software (I guess that makes me a "Senior Software Developer"). The last few years I spend most of the time developing in C#/.Net for all kind of windows-, web- and embedded-software.

In my free time I enjoy my family, taking photos and go diving in cold lakes and rivers in Switzerland.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s