Using HTML Helpers:
Now, if you run the application and focus inside the TextBox it will change the color to 'yellow'. When you move focus away from the TextBox it will change back to its previous background color.
Creating Custom Fluent TextBox:
The second method involves creating a new TextBox control using the fluent interface. This method provides extra assistance when handling events. The main idea is to extend the TagBuilder class using extension methods and return the TagBuilder instance from each of the extension method to create a fluent interface. The usage of the FluentTextBox is shown below:
As, you can see in the above code you get the intellisense support using the FluentTextBox control and you can decide which event to expose.
The implementation for the FluentTextBox is shown below:
One interesting thing to note is that we are returning a TagBuilder instance instead of the "String". The ToString() method will be fired automatically by the client which will result in the correct HTML.
The ".default" class and the ".highlight" class is shown below:
Finally, we will use the JQuery library to perform the focus and blur events.