.Net Foundation Code Conversations, 20 Jun 2017

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Creating Custom Tag Helper Components

Description

In this video Jass Bagga as she shows us how to Create Custom Tag Helper Components.

A

Hi I'm Rebecca go welcome back to conversations hi I'm jasmine. So in our last video des we talked about building our own tag helper component. So let's remind the audience what we saw: laughs: okay,.

B

Sure so we talked about how you can target the body HTML element and have a script inserted or each body a shim element without changing the views which.

A

And I found that so useful. This is rather than going through every single file and trying to scroll where to change it. Tackle four components: make this so much easy yeah, which is so cool, and even though you know we you're going to be shipping with head and body support right. You did mention in your last video that we can start making our own. That's not the number daunting to me. It's.

B

Actually really easy, let me let me show you an example. Okay, so let's have a look yeah. So let's look at currently we're going to ship with the head and the body tackle 3. You see how little coats there is. That's good yeah! That's really all this is all you need to do and you can choose whatever HTML element it want and modify it to show that and it will work just fine. That's pretty cool! Okay! Yeah! Let's get started so, let's say in your index file: you had a footer okay!

B

Let you want it to modify.

B

And and the footer, you wanted a certain script to write to the document. The current time on the server so we'll need this guy, similar to a body tag helper, but this time we'll target footer. So let's just copy this code that you can find on the MVC github repo also I can just go and copy this I'll.

A

Fish, you go yeah.

B

This takes this code, we're going to create a new file and name, it might add. Halpert.

B

And we're just kind of flip the codes up you got you can just get rid of the stuff that we don't need. Let's clean it up a little business easier to see what I'm doing okay here.

A

If we added the appropriate yes.

B

Corporate using and visual studios greater tells you what to add automatic I love it. The lightbulb is my favorite I, now control da and you're good to go. Okay, so let's say we want to target footer this time. They just changes to say: footer, obviously, change our name. The class and constructor.

B

So now we have a tag helper that helps you target footers and in our last video we talked about how you can write a component that can change your HTML and so yeah. We.

A

So you've changed it to footer mm-hmm. What's the next thing that we need to do? Okay,.

B

Let's look at our title for component and this time let's say you want to target the.

A

Footer so in the tag helper component in this file before we started talking about the elements that you are trying to target, thank.

B

Snacks, exactly this tells the title for component to find a specification element, and then this guy, the pen HTML, will actually render the content that you want. So let's look at this. Let's say you want this script.

B

So you don't have to do anything here. View file, you'll need an eclipse there and you can put it right here. So.

A

When you shows it to us earlier, we had it the script in the footer. That's when you'd have to manually go to every single color that you had in every.

B

A

B

A

Than doing that, we can just put in our tackle for component exactly.

B

So yeah- and if a later point you want to edit what you want in your footer, you don't have to go to every files. You can just come to this guy and be like I want this rendered now, so it will take care of that. So you don't have to change multiple files, all the time cool yeah and now our in our starter file we're going to configure it.

B

So our application knows about our type of the component, similar to what we did in the last video where we added a transient- and we told it to look for the title for component, but also this time since we added a new tag helpers that not up that's not shipped out of the box, we need to tell our app to look for it here similar to what MVC does this tells our application to look for all the toppers.

B

All the helpers in MVC we're going to do a similar thing, we're going to say, add tack, helper and look for all the ones over in and my tag, helper components sample, and so the assembly name in the. In this case, it could just be the project. Name should have my tag, help at the front, for if you wanted to be specific okay, if you had multiple and you wanted to say I know- you only want to import these, but in our case we just have one. So we can just other hecticness.

B

So everything is configured. Let's see what's that gives us.

B

A

There we go so.

B

The time on the server it's printed twice, because we have two photos located both quickly.

B

There's our photo right there and from the index file and the footer from the layout file. They both have a script and certainly now yeah.

A

Without having to manually put it in every single place, exactly.

B

Now we've shown you one example, and then we see which it was head and body, but there probably other uses for it and if you guys think of any scenarios where you can use tackle for components or other Asian ones that you want to target, please feel free to tweet at me. I'd love to know about your other ideas, and you can let our team know about what you think so.

A

They can tweeted you should it also be putting things in the issues and yeah.

B

Feel free to send this flow request. Our engineers will help you through those and they'll help. You add it to where everything this has.

A

Been really cool, like I'm, actually more inspired to go and start making my own tackle for components, yeah, I, hope everyone is watching. This video is as well yeah.

B

You can also see your sample to get started. The samples will be posted on dr. foundation's github repository, okay.

A

Thank you so much for coming and talking to us about tag helper command pleasure. It's very exciting. It's also nice to see that they aren't that hard to build back. You sure that 18 lines, 18 20 lines.

B

A

That was it I know this is really exciting. Thank you so much for coming back. Thank you for having me Maria, alright, see you next time, yeah.