This workshop will be retired on May 1, 2025.
Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Getting Started with ASP.NET Core!
You have completed Getting Started with ASP.NET Core!
Preview
Tag Helpers offer a new way for server-side code to participate in creating and rendering HTML elements in Razor files. Let's see how!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Here's a basic MVC Razor form for
collecting contact information.
0:00
Nothing surprising here,
we've got calls to the BeginForm,
0:04
label for, and
TextBoxFor HTML helper methods.
0:09
Now let's look at a version of
this form that uses tag helpers.
0:14
The HTML helper method calls have been
replaced with the asp-for tag helper.
0:19
Tag helpers enable server side code
to participate in creating and
0:25
rendering HTML elements in Razor files.
0:29
This gives us an HTML friendly development
experience that everyone on our
0:32
development team can easily understand
without having to learn the Razor syntax.
0:37
Because we're now just writing regular
HTML markup, the editor is able to assist
0:43
us in ways that it can't when
we're using HTML helper methods.
0:48
For instance, when using the label for or
text box for HTML helpers, to set a CSS
0:55
class on the generated element, we provide
an anonymous object with a class property.
1:00
With tag helpers, we can just
use the class HTML attribute and
1:12
the editor can now show us what
CSS classes are available to use.
1:16
If we take a closer look at
the asp-for tag helper values,
1:26
we'll notice that the values
are not simply string values.
1:29
We're actually presented with
a list of the possible values.
1:33
Let's also take a look at how tag helpers
are being used in the layout page.
1:42
Here in the head of the page, we can see
how we are using the environment tag
1:54
helper element to render different
links for the development, staging and
1:58
production environments.
2:02
If we take a closer look at the staging or
production link to the Bootstrap CSS file,
2:05
we'll notice that were
referencing a file from a CDN.
2:10
Using tag helpers, we can easily provide a
local fallback in case the CDN is offline.
2:14
Notice how we're able to use
the asp-fallback-test-class,
2:22
asp-fallback-test-property and
2:25
asp-fallback-test-value tag helper
attributes to provide the test logic
2:28
to determine when the CDN file
hasn't been successfully loaded.
2:33
Have you ever made a change to a CSS or
script file, deployed that change, and
2:37
then had users complain that
they can't see your change?
2:42
Because they're still seeing a locally
cached version of the changed file.
2:45
The asp-append-version tag helper
2:49
makes it easy to implement
a simple cache busting mechanism.
2:53
Adding this tag helper
attribute to your link or
2:57
script elements will automatically add
a file version query string parameter to
2:59
your file URLs ensuring that users will
receive the latest version of the file.
3:04
We're just scratching the surface
of what's possible of tag helpers.
3:10
You can even create your own tag helpers.
3:13
See the teacher's notes for
more information.
3:15
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up