JumpStart # 48 – View Components as Tag Helpers in ASP.Net Core 1.1

In this jumpstart, we are going to see how to use View components as Tag Helpers in ASP.Net Core 1.1. Previously we used to invoke View Components using Component.InvokeAsync method. But starting from ASP.Net Core 1.1, we can use View components as Tag helpers.

To get started with ASP.Net Core 1.1, please refer to Upgrading from ASP.Net Core 1.0 to ASP.Net Core 1.1. Refer to Reusable View Components in ASP.Net Core 1.1 and create a view component which we will use in this tutorial as a tag helper.

Now import the View component as tag helpers as shown below in _ViewImports.cshtml. ViewComponents (in below line of code) is the namespace in which view component is resided.

@addTagHelper *, ViewComponents

Use the View Component in any view as shown below. I have added it to the Index view.

<vc:person-details 
           person-details='new ViewComponents.PersonDetailsViewModel() { Name = "Rami", Email = "r@r.com" }'>
</vc:person-details>

Instead we can also pass strong model as shown below.

@{ 
    var model = new ViewComponents.PersonDetailsViewModel() { Name = "Rami", Email = "r@r.com" };
}
<vc:person-details person-details="model"></vc:person-details>

Run the application and we should see below output.

image

That’s it for now, Happy Coding and Stay Tuned!!!

You may also like...