Build an HTML Helper Library for ASP.NET MVC 5

Creating your own HTML Helpers simplifies your MVC coding when working with Bootstrap and HTML 5. Moving this code into Helpers can reduce the runtime errors and CSS errors you might otherwise encounter.
Course info
Rating
(100)
Level
Intermediate
Updated
Jan 5, 2016
Duration
1h 53m
Table of contents
Understanding the Benefits of HTML Helpers
Creating Custom HTML Helpers
Capturing HTML and CSS Features in HTML Helpers
Extending Existing MVC HTML Helpers
Promoting HTML and CSS Reuse with HTML Helpers
Description
Course info
Rating
(100)
Level
Intermediate
Updated
Jan 5, 2016
Duration
1h 53m
Description

Paul's Training Company has developed a web site to input their product data. Your boss wants you to add a login screen and more pages to the site. Unfortunately, he needs it done quickly, so that means you need to work smarter. He wants all the controls to use Bootstrap and take advantage of HTML 5. Working with the limited set of HTML Helpers in MVC means you have to add a lot of custom attributes. This takes more time to code and leads to potential runtime errors. If you had more flexible HTML Helpers that added HTML5 and Bootstrap CSS for you, this would speed up development and testing. In this course, you learn to build a set of MVC HTML Helpers to do just this.

About the author
About the author

Paul loves teaching and technology, and has been teaching tech and business topics for over 30 years. Paul helps clients develop applications, and instructs them on the best use of technology.

More from the author
Angular Security Using JSON Web Tokens
Intermediate
2h 50m
Apr 2, 2018
More courses by Paul D. Sheriff
Section Introduction Transcripts
Section Introduction Transcripts

Understanding the Benefits of HTML Helpers
Hello, everybody! Paul Sheriff here with Pluralsight. This course is Build an HTML Helper Library for ASP. net MVC 5. This module is, Understanding the Benefits of HTML Helpers. There's a lot of reasons why you want to watch this particular course. I'm assuming you want to simplify your MVC code; we're going to show you how to do that. You want to build your own custom MVC helpers so that they'll do more for you; we're going to do that. We're going to easily figure out how to add Bootstrap and HTML 5 capabilities, learn the best way to build helpers, but most importantly, we're going to do this step by step so you can see all the way along, the best way to do things.

Creating Custom HTML Helpers
Hello, everybody! Paul Sheriff here with Pluralsight. This course is, Build an HTML Helper Library for ASP. NET MVC 5. This module is, Creating Custom HTML Helpers. Now the goals for this module, we're going to learn how to build your first MVC helper. We're going to actually use an image control and build an HTML helper for that. We're going to do this by learning how to use the StringBuilder class first. Then we'll turn our attention and use the TagBuilder class and we're going to learn which one of these is the best to use. For both of these we're going to take advantage of the MvcHtmlString class, and we're going to be able to add on an HTML attributes dictionary just like they do in the regular HTML helpers. So basically what we're going to do is we're going to replace this code that you see here with this. What's nice about that is that encapsulates now the HTML that is emitted. Alright, let's start out by using the StringBuilder class. So we're going to create a helper to build an image tag. Step 1: We're going to build a static class. Step 2: We're going to add a static method to return an MvcHtmlString; this is an HTML-encoded string. And we're going to use the StringBuilder class to build the HTML. Finally, we return the HTML as an MvcHtmlString so that it's encoded on the way back out. Alright, let's do our first demo.

Capturing HTML and CSS Features in HTML Helpers
Hello, everybody! Paul Sheriff here with Pluralsight. This course is Build an HTML Helper Library for ASP. NET MVC 5. This module is, Capturing HTML and CSS Features in HTML Helpers. Now the goals for this particular module are to create a button helper. What we're going to do with this is we're going to build Bootstrap defaults into the helpers so that you don't add them yourself. We're going to learn how display images and text within the button, but we're then going to take some of the code that we wrote in the previous module and we're going to extract that out and add it to a common helper class so certain methods will now be able to be reused across all of the helpers we create. We're going to add in some HTML 5 attributes, things like auto focus, form no validate, and title. We're going to further add enumerations for the type of button you wish to create so that the user gets IntelliSense when they're building your button, and finally we'll add on custom data attributes to help us in our particular situation. So let's get started.

Extending Existing MVC HTML Helpers
Hello, everybody! Paul Sheriff here with Pluralsight. This course is Build an HTML Helper Library for ASP. NET MVC 5. This module is Extending Existing MVC HTML Helpers. What we're going to do for this particular module is we're going to create a text box helper. Yes, there is already a text box helper that Microsoft gives us, but we're going to create one specifically for Bootstrap and we're going to use what they use underneath the hood which is the InputExtensions class and that helps us support data binding because we need data binding when we're going to hook up to a text box and we don't want to have to write reflection or some other code ourselves, so let's take advantage of what Microsoft already gives us underneath the hood. We're also going to add an enumeration for the input type. HTML 5 provides a lot of input types for us: telephone, number, email, url. Instead of having to pass that in an anonymous object that you'd have to do with Microsoft's general text box for class, what we're going to do is we're going to add it on ourselves as a parameter. We'll also add some additional parameters such as title, placeholder, isRequired, and autofocus. And then we'll add the Bootstrap form-control CSS class; we'll add it automatically in but allow you to pass in additional CSS classes if you want. Finally, we'll finish up by creating a password helper, which is almost exactly the same as the text box helper, so let's get started.

Promoting HTML and CSS Reuse with HTML Helpers
Hello, everybody! Paul Sheriff here with Pluralsight. This course is Build an HTML Helper Library for ASP. NET MVC 5. This module is Promoting HTML and CSS Reuse with HTML helpers. The goals for this module: We're going to create a checkbox helper. We're going to still use the InputExtensions class just like we did for the text box because we need to be able to support data binding with our check boxes as well. We're going to add some additional HTML around check box though because it requires that right? And then we're also going to learn how to support inline check boxes, add some HTML 5 attributes to our check box, and then finally we're going to create a radio button helper as well.