.Net Foundation Code Conversations, 20 Jun 2017

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to Tag Helper Components

Description

Jass Bagga gives as quick introduction to Tag Helper Components.
Joins us as Jass shows us how to modify the HeadTagHelper and the BodyTagHelper in ASP.NET Core MVC 2.0.

A

Hi, everyone welcome to code conversations from the dotnet foundation, I'm Ranma, Koga and I'm here with Jeff saga. Who is a software engineer on the asp.net MVC team? Correct, that's right, I'm so excited to have you I'm so happy to be here and you're going to be talking about something called tag: helper component, that's right, yeah and tag helpers or something I. Don't really know that much about, but I'm so excited that you are here because you can show me how to use it properly. Yes,.

B

A

Right, let's get.

B

Started I hope our components are related to tag helpers and before we get started we can just have a little review. What's tackled bizarre and if you have any questions throughout this video, please feel free to tweet at me, at baggage, Ashbury and I'll. Try to answer questions all right, so you are going to show us see so calipers are a way to target HTML elements and have tea shop code run on them.

B

So, for instance, if you were to look at this environment tag helper, it will render different links based on which environment you're in you could be in development or staging or production, and it will render different links based on that. Okay, yeah, it's great for testing, right, yeah and the code behind this is in c-sharp and can be found in our github repo on NBC. And if you just look for environment I helpers, you can see what it actually does. It looks at what environment you're in and if you can.

A

B

Zoom in bathroom.

A

Moment: okay, ctrl +, oh yeah! Thank you all.

B

Right, so if you are in the right environment it will return the tag helper, but if you're not it will suppress the output. So all the logics can be driven and C sharp with all the possibilities. It's obviously sharp and you can target HTML elements and if you.

A

B

Learn more about time helpers, you could check out all the other ones that we have here to check out the implementations of these or you could look at our Doc's at dr. Mike recom. We have tutorials walkthroughs or you can also watch videos by Taylor Mullen on channel 9 or YouTube, and he goes over exactly what you need to do to get started with tag helpers. That's pretty cool yeah, great.

A

Resources awesome.

B

Ok so, but today I'm going to talk about title, 4 components and they are related to time but they're a little bit different. So they will allow you to modify HTML elements and let's say you want to insert a certain JavaScript who out your application in a certain head or body tag. You don't need to go into every view and change it. You can just write, C, sharp file and say please link this up to my app and that will take care of it.

B

A couple components will go into each of your views and add that HTML to your files, that sounds pretty smooth yeah. So let's get started. So let's look at the index file I'll clean it up a little bit, so we can see what we're doing. Okay, cool, let's add a head tag and, let's also add a body type all right and let's say you want it so script here: okay, okay, so let's say I want this inserted.

B

Let say I want the console to say at a time at the server okay, cool, okay, so using tag helpers, we can just add a new code file and we're going to call it my time. Helper.

B

Actually, let's rename it to my title for component, because that would make it clear. Yes, my head health component, let's rename it- and this derives from our base class tag, help her component tag helper and our file doesn't know about it yet, but we'll add that using and I should take care of it. Okay, here it's complaining because we haven't implemented it yet so, okay, let's see, let's give it an order. So this is important when you have multiple types of components. The order decides how in which order you modify your HTML element.

B

So let's say I wanted to have multiple components. Inside of my body tags, this order would decide when each is rendered. So now we can say, let's add a.

B

Process method: this is what actually does the magic here. Let's resolve these here, you will finding all the tags that are body tags, yeah and we're going to append some HTML to the output, okay, cool. So let's say we want this guy to be rendered, so we don't need to put it in our index file anymore. We can just go in to our tax upper component and have this.

A

In here, oh that way, you don't have to include every single body tag that exists. Yeah.

B

And you can target all of them with this. That's not really cool okay, so this is actually trifle for tooth coated. That should fix it awesome. So now we have a caliper component that can target all body tags. You can be specific to you can say: I want just one body tag to have this component inserted into and you can use any of the different properties inside your output tags and you can look at any of these I'm, not a nice way to do.

B

It would be to look into the attributes and look for a certain one that you've added to your target. So let's say you want to add, contains name and just insert an attribute that you want. Let's call it injects for now and have that inserted in here. So if you did this now, it will look for all the body tags with this attribute and only modify those okay. So this is a way to be specific, but let's, let's be, let's have a globally inserted. For now. We.

A

Can actually have specific attributes towards particular body tags in your project.

B

I, just let's say you wanted to modify each of your body tag differently. You could use this concept of having an attribute of a certain name and if it corresponds, if it satisfies both of these conditions, only then will the mock, but only then the HTML will be modified, okay cool so for now, let's just keep it global and see if it changes all of our body tags.

B

So now we have a title book component, but our application doesn't know about it, so we can go into our startup file and we can register it as a service in our service collection, so all contribute to our pipeline. Exactly we're going to look at the configure services method and in here just like we're, adding MVC we're going to add a service services at Constance and I tag helper component. It is the interface that tackle the component implement and this is the dial helper component that we work.

B

So now our app knows about this tag of a component and everything is set up. That's all you need to do. Let's see if that work, okay, cool.

B

So our script wants to write to the console, so f12 would pick is here and there we go. Oh there's the fun yeah and it's printed twice because we have two body tags ones in our index, page and ones in our layout page.

A

Under structure shows how you didn't have to edit it everywhere exactly.

B

Printed globally, let's look at this code very quickly. So if you press control units in here, you can see the scripts inserted in our body tag right here and this point I was a part of the layout and it's inserted in here as well yeah. So without you having to manually edit each view, you can just add a t-shirt file and have it do it for? Oh, so.

A

You should have copies in the so you've just showed us how to use it in the body right. We're all. Can we use tag helper components? That's.

B

A great question so right now, MVC will ship with the head tag helper and a body tag helper, and you can modify both of those okay cool, but you can also write your own, also I'm. What restrict me are not restricted. You can basically do it for any HTML element you want like I could show you one for how to do it for footers. What's.

A

Cool- let's, let's say that for our next video yeah. So in this video we had a great introduction to tag helper components in our next video. Let's have a look at how we make them.