ASP.NET MVC application enables the developer to emit pure HTML to the view which also helps the developer to work closely with the client side scripts including JavaScript and VBScript. In this article we are going to demonstrate different ways to harness the power of client side scripts in your ASP.NET MVC application.

Scenario:

There are infinite number of ways of using JavaScript in your application. We will focus on a particular scenario and try to solve it using different methods. The scenario revolves around changing the background color of the TextBox on the onFocus and onBlur events. When the TextBox is focused the background color will be changed to a color specified by the user and on the blur event the TextBox will be reverted back to its original background color.

Using HTML Helpers:

If you have read the previous article on Creating ASP.NET MVC HTML Helpers then this will be primary choice of using the JavaScript in your ASP.NET MVC application. The following code attaches the onfocus and onblur events to the TextBox control.



If you look in Reflector you will find out that behind the scenes it uses the TagBuilder's MergeAttributes method to merge the additional attributes. The JavaScript implementation for the highlight and removeHighlight functions is shown below:



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 code will work as expected and it will call the "highlight" and "removeHighlight" JavaScript functions. It would be nice if the TagBuilder had some way of parsing the control's HTML and initializing the instance with the correct values. Then we would be easily able to apply the fluent behavior to all the existing controls MVC helpers with less effort.

Using JavaScript Separately:

The last method shows how to use JavaScript separately from the MVC helper code. The TextBox is created using the ASP.NET MVC helper as shown below:



The ".default" class and the ".highlight" class is shown below:



Finally, we will use the JQuery library to perform the focus and blur events.




Conclusion:

In this article we demonstrated three different ways you can use JavaScript on your ASP.NET MVC application. Depending on your situation you can benefit from any of the above mentioned techniques. In the next article we are going to introduce the concept of partial views and how they fit in the ASP.NET MVC application architecture.

[Download Sample]