This is great news for ASP.NET MVC developers. It means that we can easily take advantage of the client-side AJAX behaviors contained in the AJAX Control Toolkit in our MVC views.
This is great news for ASP.NET MVC developers. It means that we can easily take advantage of the client-side AJAX behaviors contained in the AJAX Control Toolkit in our MVC views. For example, we can create auto-complete input fields, modal dialog boxes, and rich animations. In this tip, I demonstrate how you can add a popup calendar to an HTML form input field which you can use as a fancy date picker (see Figure 1).
Figure 1 – Using the AJAX Calendar Behavior
I am a big fan of the AJAX Calendar behavior. It supports fancy animations. For example, when you click on the name of the month, a menu of months scrolls into view.
In this tip, I explore two methods of using the AJAX Calendar behavior. First, I explain how you can use the Calendar behavior by including a set of JavaScript, CSS, and image files in your view. Next, I explain how you can create a HTML Helper that adds all of the required files automatically. Adding the Calendar Behavior to a View by Hand
Adding any of the behaviors from the AJAX Control Toolkit to a view by hand takes some work. The problem is that you must include several JavaScript libraries, in the right order, to use the behavior. In this section, I walk through the process of adding the Calendar behavior to a view. In the next section, I demonstrate how you can avoid this work.
Step 1 – Add the AJAX Control Toolkit Folder to Your Application
Download the client file only version of the AJAX Control Toolkit from the following location:
After you unzip the download, copy the AjaxControlToolkit folder into the Content folder in your ASP.NET MVC application.
There are a lot of files in the AjaxControlToolkit folder (the folder is a little over a megabyte in size). However, you’ll need to reference several files in the folder to use the Calendar behavior. Because, most likely, you’ll end up using several AJAX behaviors, I recommend just dumping the whole folder into your MVC application.
After you add the folder, your Solution Explorer window should resemble Figure 2.
Figure 2 – ASP.NET MVC Application with AJAX Control Toolkit files
Step 2 – Include the Required Files in Your View
This is the most time-consuming step. You must add all of the JavaScript and CSS files required by the Calendar behavior to the view in which you want to use the behavior (alternatively, you can include these files in a master page).
In order to use the Calendar behavior, you need to include all of the JavaScript files, and the single CSS file, in Listing 1.
You must add the JavaScript files in the right order. One JavaScript file might depend on functionality defined in another JavaScript file.
Step 3 – Create the Behavior
The final step is to create the Calendar behavior and associate it with an input field. Notice that the view in Listing 1 contains the following script:
function appInit() { $create(AjaxControlToolkit.CalendarBehavior, null, null, null, $get('birthDate')); }
</script>
You create client-side AJAX controls and behaviors during the client-side Application init event. This script registers an event handler for this event that calls the $create() method to create the Calendar behavior.
The $create() method accepts the following parameters:
· type – The type of client-side component, control, or behavior to create
· properties – A JavaScript object literal that represents a set of property names and values
· events – A JavaScript object literal that represents a set of event names and handlers
· references – A JavaScript object literal that represents a set of property names and references to other components
· element – The DOM element to which the client-side component, control, or behavior is attached
In Listing 1, the Calendar behavior is attached to the birthDate input field contained in the HTML form located in the body of the view.
After you complete this step, the Calendar behavior works in the view. When you click in the birth date field (or tab to the field) the calendar appears. Adding the Calendar Behavior to a View with an HTML Helper
In the previous section, we added the Calendar behavior to a view by hand. The hardest part of the process was adding all of the files required by the Calendar. In this section, we create an HTML Helper that adds all of the required files automatically.
We will need to create a couple of helper classes before we can create our Calendar class. The first class that we need to make is something called the ResourceTracker class. This class is contained in Listing 2.
Listing 2 – ResourceTracker.cs
1. using System; 2. using System.Collections.Generic; 3. using System.Linq; 4. using System.Text; 5. using System.Web; 6. 7. namespace AjaxControlToolkitMvc 8. { 9. public class ResourceTracker 10. { 11. const string resourceKey = "__resources"; 12. 13. private List<string> _resources; 14. 15. public ResourceTracker(HttpContextBase context) 16. { 17. _resources = (List<string>)context.Items[resourceKey]; 18. if (_resources == null) 19. { 20. _resources = new List<string>(); 21. context.Items[resourceKey] = _resources; 22. } 23. } 24. 25. public void Add(string url) 26. { 27. url = url.ToLower(); 28. _resources.Add(url); 29. } 30. 31. public bool Contains(string url) 32. { 33. url = url.ToLower(); 34. return _resources.Contains(url); 35. } 36. 37. } 38. }
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web;
namespace AjaxControlToolkitMvc { public class ResourceTracker { const string resourceKey = "__resources";
private List<string> _resources;
public ResourceTracker(HttpContextBase context) { _resources = (List<string>)context.Items[resourceKey]; if (_resources == null) { _resources = new List<string>(); context.Items[resourceKey] = _resources; } }
public void Add(string url) { url = url.ToLower(); _resources.Add(url); }
The reason that we need the ResourceTracker class is to prevent us from adding the same script or CSS file to a page more than once. Imagine that you need two Calendar input fields (for example, a start and end date). In that case, you do not want to add all of the necessary JavaScript files twice because adding all of these files would slow down your page. The ResourceTracker verifies whether or not a resource with a certain URL has already been added.
The ResourceTracker uses the HttpContext.Items collection. This collection survives a single browser request. This is what we want. We don’t want to include a JavaScript file more than once within a single browser request for a single user.
The class in Listing 3 adds a single utility method for adding JavaScript file includes.
Listing 3 – ScriptExtensions.cs
1. using System.Text; 2. using System.Web.Mvc; 3. 4. namespace AjaxControlToolkitMvc 5. { 6. public static class ScriptExtensions 7. { 8. public static string ScriptInclude(this AjaxHelper helper, params string[] url) 9. { 10. var tracker = new ResourceTracker(helper.ViewContext.HttpContext); 11. 12. var sb = new StringBuilder(); 13. foreach (var item in url) 14. { 15. if (!tracker.Contains(item)) 16. { 17. tracker.Add(item); 18. sb.AppendFormat("<script type='text/javascript' src='{0}'></script>", item); 19. sb.AppendLine(); 20. } 21. } 22. return sb.ToString(); 23. } 24. 25. } 26. }
using System.Text; using System.Web.Mvc;
namespace AjaxControlToolkitMvc { public static class ScriptExtensions { public static string ScriptInclude(this AjaxHelper helper, params string[] url) { var tracker = new ResourceTracker(helper.ViewContext.HttpContext);
var sb = new StringBuilder(); foreach (var item in url) { if (!tracker.Contains(item)) { tracker.Add(item); sb.AppendFormat("<script type='text/javascript' src='{0}'></script>", item); sb.AppendLine(); } } return sb.ToString(); }
} }
Notice that the class in Listing 3 takes advantage of the ResourceTracker class. Imagine that you call the ScriptInclude() helper method multiple times in a page like this:
In that case, the myLibrary.js file will be included in the page only once. The ResourceTracker prevents the script from being included multiple times.
Next, we need to create a utility class for generating URLs to the Microsoft Ajax Library and the Ajax Control Toolkit files. This class is contained in Listing 4.
I have one problem though. When running my app in debug mode everything is working fine. After deploying my app I get a "Sys is not defined" error though.
Ajax Projects
