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.
What you'll learn
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.
Table of contents
- Module Introduction & StringBuilder Class Overview 2m
- Demo of StringBuilder Class for MVC Helper 6m
- Introduction to the TagBuilder Class 2m
- Using the TagBuilder Class 2m
- Add CSS Classes 1m
- Adding CSS Classes to Your Helper 2m
- Adding 'name' and 'id' Attributes 1m
- Demo of Adding 'name' and 'id' Attributes 2m
- Add HTML Attributes Dictionary 1m
- Demo of Adding HTML Attributes 2m
- Introduction to Overloads for Your Helper 1m
- Create MVC Helper Overloads 3m
- Module Summary 1m
- Module Introduction 1m
- Introduction to a Bootstrap Button Helper 1m
- Creating the Bootstrap Button Helper 4m
- Add Bootstrap 'btn' Classes to Helper 1m
- Demo of Adding Bootstrap Button Classes 4m
- Add 'name' and 'id' Attributes Generically 1m
- Create Class to Add 'name' and 'id' Attributes 5m
- Add HTML5 Attributes 1m
- Demo of Adding HTML5 Attributes to Button Helper 3m
- Add Button Type 1m
- Add Enumeration for HTML Button Type 2m
- Add Custom data- Attribute 2m
- Demo of Adding data-pdsa-action Attribute 2m
- Introduction to Overloads for Button Helper 1m
- Overload the Button Helper 3m
- Module Summary 1m
- Module Introduction 2m
- Use InputExtensions Class 2m
- Demo of InputExtensions Class 6m
- Handling HTML5 Input Types 1m
- Add Enumeration for HTML5 Input Types 5m
- HTML5 Attributes for Text Boxes 1m
- Add HTML5 Attributes to Text Box Helper 4m
- Add CSS Class 1m
- Add 'form-control' CSS Class for Text Boxes 2m
- Overloads for Text Box Helper 1m
- Create Overloads for Text Box Helper 3m
- Password Helper 0m
- Create Password Helper 1m
- Module Summary 1m
- Module Introduction 1m
- How to Build a Basic Check Box 1m
- Create a Basic Check Box 7m
- HTML5 Attributes for Check Boxes 1m
- Add HTML5 Attributes 3m
- Inline Check Boxes 1m
- Creating Inline Check Boxes 2m
- Overloads for the Check Box Helper 1m
- Create Overloads for Check Box 1m
- Radio Button Helper Overview 1m
- Build the Radio Button Helper 1m
- Module Summary 1m
- Course Summary 2m