Chapter 32. Integrating JavaScript in Custom Controls

In this Chapter

• Using the ClientScriptManager Class

• Building JavaScript Controls

• Building AJAX Controls

• Summary

Even though the ASP.NET Framework is a server-side programming framework, there is nothing to prevent you from taking advantage of JavaScripta client-side programming languagein your custom controls. In fact, you can do many exciting things by integrating JavaScript into your custom controls.

If you want to create rich and interactive user interfaces then you have no choice but to use JavaScript. For example, by taking advantage of JavaScript, you can create controls that display floating windows, rich text boxes, and drag-and-drop interfaces. In other words, by taking advantage of JavaScript, you can create the same type of experience that users have come to expect from working with traditional desktop applications.

In this chapter, you learn how to integrate JavaScript into your custom controls. First, you learn how to take advantage of the methods and properties of the ClientScriptManager class. This class exposes the main application programming interface for working with client-side scripts. You also learn how to detect the features of different browsers by using the HttpBrowserCapabilities class.

Next, we get our hands dirty by building several controls that use client-side JavaScript. In the second part of this chapter, we build the following controls:

• NewWindowLink This control renders a button that opens a new browser window. By setting properties of the control, you can configure the position and size of the new browser window.

• WebWindow This control renders a virtual browser window by rendering a floating <div> tag. The WebWindow control enables you to display multiple windows in a single page.

• ClientTabs This control enables you to divide the content displayed in a page into multiple tabs. Only the contents of a single tab are displayed at one time. When you switch tabs, the page is not posted back to the server.

In the final section of this chapter, we discuss my favorite topic in the universe: AJAX. By taking advantage of AJAX, a custom control can communicate with the web server without posting the page that contains the control back to the web server.

In the final section of this chapter, we build two AJAX controls:

• ServerTimeButton This control renders a button. When you click the button, the current time is retrieved from the server and displayed in a browser alert dialog box.

• ComboBox This control displays a drop-down list of matching records from a database as you type.

Note

One reason that many programmers avoid using JavaScript is the issue of browser compatibility. Client-side programming is a mess because different browsers implement JavaScript and the Browser Object Model in different ways. However, by taking advantage of feature detection, you can write JavaScript that works the same way across all modern browsers. All the controls discussed in this chapter are compatible with Internet Explorer 6, Firefox 1, and Opera 8.