ASP. net ajax 1.0 framework-enhancing client functions of server controls (1)

Bkjia.com exclusive Article]I. Introduction

Microsoft ASP. NET 2.0 AJAX Extensions, as the most basic part of the ASP. NET 2.0 AJAX 1.0 framework, provides support for the extension of ASP. NET 2.0 Server-side controls. With this new framework, you can use JavaScript, DHTML, and AJAX capabilities provided by Web browsers to achieve richer visual effects.

In this article, we will explore how to create an ASP. NET Web server control that uses ASP. NET 2.0 AJAX extension features to extend browser functions. Then, we can use a client control to add this new function to the DOM element of the client Document Object Model. Note that this client control establishes an association with a server control by implementing the IScriptControl interface provided by the server control.

Specifically, we will discuss:

◆ How to create a custom Web server control that encapsulates client behavior and allows users to set and control attributes of this behavior;
◆ How to create a client control associated with the Web server control;
◆ How to handle browser DOM events in the client control.

Note: In addition to the methods described in this article, the new framework also provides an extended extender control that encapsulates client capabilities into a behavior, then attach it to a Web server control-to extend the Web Server Control to add rich client functions. Because an extension control is not part of its associated control, you can create a single extension control that can be associated with several types of Web server controls. We will not discuss this technology in this article.

Ii. Client Requirement Analysis

The first step to add client behavior to a Web server control is to determine what behavior the control will provide in the browser. Then, we also need to determine the client functions that must be provided to implement this behavior.

The Example Web Server Control created in this article implements a simple client behavior. When you select "Focus" in the browser), the control is displayed as a TextBox Control. For example, when it has focus, the control may change the background color, and when the focus moves to another control, it will be restored to the default color.

To implement this line, the client control in this article must implement the following functions:

① Provides a method to highlight DOM elements.
To highlight a DOM element in an ASP. NET Web page, the client control in this article will apply a cascading style table CSS) style-we provide it through a class. In addition, this style is configurable.

② Implement a method to restore the DOM element to its normal state.
You can also apply a CSS style to delete the highlighted state from an ASP. NET Web page element, which is configurable.

③ Identify when to select a DOM element.
To identify when to select a DOM element with focus), the control needs to process the onfocus event of the corresponding DOM element.

④ Identify when to deselect a DOM element.
Therefore, the control needs to process the onblur event of the DOM element.

3. Create Web server controls

In terms of basic operation ideas and forms, a Web Server Control Using ASP. NET 2.0 AJAX extension technology, including client features, is similar to any other Web Server Control. However, this control must also implement the IScriptControl interface in the System. Web. UI namespace. In this example, we will extend the ASP. NET TextBox Server Control by inheriting the TextBox class and implementing the IScriptControl interface.

Start Visual Studio 2005, select "File> New website ...", Select the "ASP. net ajax-Enabled Web Site" template and name the project as"AjaxEnhancedServCtrl", Select C # as the programming language, and click OK.

Right-click Solution Explorer to add a new class and name it "EnhancedTextBox". See figure 1 ).

Figure 1: Create an extended Web server control by creating a new class

Then, open the file EnhancedTextBox. cs and make the following changes:

public class EnhancedTextBox  : TextBox， IScriptControl

So far, we can add fields, attributes, and methods to this class more intuitively by using the friendly "class relationship diagram" editor provided by VS2005. In this case, you only need to right-click the file EnhancedTextBox. cs and choose View class relationship diagram from the context menu to switch to the class relationship diagram editor. The edited class relationship diagram is shown in figure 2.

Figure 2: Class class relationship diagram of EnhancedTextBox

Note: Through the experiment, I found that I could not inherit the relevant members of the IScriptControl interface on the class through the class relationship diagram. For some reason.

Let's perform a detailed analysis.

The new control provides two properties required by the client:

◆ HighlightCssClass-CSS class used to highlight DOM elements when the control gets focus;
◆ NoHighlightCssClass-applies to CSS classes of DOM elements when the control loses focus.