Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using TagHelpers vs ViewComponents in ASP.NET MVC6

I'm trying to understand the use case differences between TagHelpers and ViewComponents in asp.net 5 because the end result functionality seems very similar. We have TagHelpers that can create new HTML tags that get parsed by the Razor engine and then ViewComponents that get explicitly invoked. Both return some HTML content, both are backed by their respective base classes, both have async versions of methods they can implement to get their work done.

So when would one be used over another? Or am I missing some information?

like image 310
cecilphillip Avatar asked Dec 08 '14 22:12

cecilphillip


People also ask

What is the difference between partial view and view component?

View components are similar to partial views, but they're much more powerful. View components don't use model binding, they depend on the data passed when calling the view component. This article was written using controllers and views, but view components work with Razor Pages.

What is the difference between Htmlhelper and Taghelper?

Unlike HtmlHelpers, a tag helper is a class that attaches itself to an HTML-compliant element in a View or Razor Page. The tag helper can, through its properties, add additional attributes to the element that a developer can use to customize the tag's behavior.

Can we use tag helpers in MVC 5?

No, but you can use the standard HTML Helpers which do a lot of the same things. And ASP.NET (non-code) MVC is absolutely not "legacy", it's still fully supported with no roadmap to end that, and so is WebForms for that matter.

Which of the following are valid Taghelpers used in the ASP.NET Core Cshtml pages?

@addTagHelper makes Tag Helpers available cshtml , which by default is inherited by all files in the Pages folder and subfolders; making Tag Helpers available. The code above uses the wildcard syntax ("*") to specify that all Tag Helpers in the specified assembly (Microsoft. AspNetCore.


2 Answers

There's definitely some conceptual overlap between TagHelpers and ViewComponents. TagHelpers are your utility to work with HTML where ViewComponents are your way to stick to C#, do isolated work and then spit out HTML. I'll go into each in detail:

ViewComponents
Your conceptually equivalent mini-controller; you will see that many of the methods/properties that ViewComponents expose are very familiar to those that exist on a Controller. Now as for invoking ViewComponents, that's more equivalent to utilizing HTML helpers (one thing TagHelpers make better). To sum up ViewComponents: Their primary purpose is to feel like a controller, stay in C# land (there may be no need to add utility to HTML), do smaller/isolated work and then spit out stringified HTML.

TagHelpers
A utility that enables you to work along side existing HTML or create new HTML elements that modify what happens on a page. Unlike ViewComponents TagHelpers can target any existing HTML and modify its behavior; example: you could add a conditional attribute to all HTML elements that would conditionally render the element server side. TagHelpers also allow you to intermingle common HTML terms, ex:

<myTagHelper class="btn">Some Content</myTagHElper>

As you can see we're adding a class attribute to our TagHelper just as if it were HTML. To do this in ViewComponents, you'd need to pass in a dictionary of attributes or something equivalent (unnatural). Lastly multiple TagHelpers can run over a single HTML element; each having their own stage at modifying output (allows entry for modular TagHelper toolkits). To sum TagHelpers up: They can do anything that ViewComponents can do and more BUT do not feel familiar to things like Controllers that ASP.NET developers are used to; also some projects may not want to intermingle server side HTML.

Extra:
I recently did a video showcasing the benefits of TagHelpers. Basically a walk through of what they're good at and how to use them. You can watch it here.

like image 112
N. Taylor Mullen Avatar answered Sep 18 '22 01:09

N. Taylor Mullen


When deciding which one to use I always consider how complex the HTML of the component will be.

If it's something simple like a tree view or a pager

<ul class="jstree">
    <li>Node 1</li>
    <li>...</li>
</ul>

That is candidate for tag helper, because it's simple. Large HTML in a C# code would be hard to maintain.


On the other hand if it's complex HTML with many divs, images and configuration like a full blown menu where it can be vertical or horizontal that's your view component. Benefit of view component is that you can use multiple views so for menu so you can separate horizontal.cshtml & vertical.cshtml while reusing same backend code.

like image 41
Xeevis Avatar answered Sep 21 '22 01:09

Xeevis