Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

TagHelper Syntax for View Components

DZone's Guide to

TagHelper Syntax for View Components

In this post, we tackle a very handy feature of ASP.NET Core, view components, and how developers can include a view component in a view.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Today I want to talk about View Components, showing how they can be added to a page using the Tag Helper syntax.

This is covered more in detail in the first chapter of my upcoming book Front-end Development with ASP.NET Core, Angular, and Bootstrap.

What Are View Components?

View Components are something that was introduced in ASP.NET Core, and they are used to encapsulate both UI and logic for reusable portions of pages: we can see them as the new version of the Child Actions (which have been removed from the MVC framework in ASP.NET Core). A big improvement if you ask me.

In it's simplest implementation, a View Component is just a class which extends ViewComponent and implements the method Invoke which returns IViewComponentResult. This renders a view which is by convention stored in \Views\Shared\Components\{component_name}\Default.cshtml.

As very simple view component that shows a counter to a specific date can be implemented with few lines of code.

Here's the component:

public class CountdownViewComponent: ViewComponent
{
    public IViewComponentResult Invoke(DateTime to, string eventName)
    {
        var today = DateTime.Today;
        var diff = (to - today).TotalDays;
        var model = $"{diff} days to {eventName}";
        return View<String>(model);
    }
}

And it's view"

@model string <b>It's @Model</b> 

How to Include the View Component Into a View

The original way of including the view component in a view is by using the Component class specifying the name of the component (as a string) and an anonymous object with the parameters:

@await Component.InvokeAsync("Countdown", new {to = new DateTime(2017,12,15), eventName="Christmas"})

But this syntax is not easy to use and not discoverable as it relies on magic strings and the developer needs to know the exact name of the parameters.

There is also the TagHelper syntax, which is much easier.

<vc:countdown
    to="new DateTime(2017,12,25)"
    event-name="Christmas">
</vc:countdown>

And this also comes with Intellisense:

For this to work, also remember to register you View Components as tag helpers. In the _ViewImports.cshtml file add the following line (where projectName is the name of your project, actually the assembly name in which your project is compiled):

@addTagHelper *, projectName 

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
web dev ,view components ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}