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

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

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 

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

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 }}