Tag Helpers3:19 with James Churchill
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!
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 up