Discuss ASP. NET Ajax client Development Technology

I. Introduction
In ASP. NET Ajax component development, many links need to be explored in depth. How can I make ASP. NET Ajax server controls more effectively use the client script to add powerful client functions to the controls? How to easily access resources accessed by controls, and so on. Practice has proved that to achieve the final distribution of application resources (such as JavaScript files, images, or resource files), a good way is to embed them directly into the compiled ones.. Net assembly.

In this article, we will discuss ASP. net Ajax component development process: How to "hide" A Javascript file as an embedded resource into an assembly, then reference these resources from a Web application that registers the assembly.
[Note] the sample program test environment in this article is Windows XP Professional Edition + Visual Studio 2005 + ASP. NET Ajax framework.

2. Embed client script files into the program set
(1) Create an empty library
First, start Visual Studio 2005 and select "File> new project ...", Select C # As the built-in support language, select the "class library" template to create a class library, name it "mysamplecontrol", and click OK.
Right-click the "Reference" folder in Solution Explorer and click "add reference ...", In the "add reference" dialog box that appears, add references to namespaces such as system. Web, system. drawing, and system. Web. extensions to the current project.

(2) create a sample Javascript script file
Next, we will add a simple JScript file named updatepanelanimation. js in the project. The complete code of this JScript file is shown below:

BorderAnimation = function(color) {this._color = color;}BorderAnimation.prototype = {animate: function(panelElement) {var s = panelElement.style;s.borderWidth = '2px';s.borderColor = this._color;s.borderStyle = 'solid';window.setTimeout(function() {{s.borderWidth = 0;}},500);}}

The code above defines a fairly simple JavaScript class-borderanimation. This class only provides a member function-animate, which can display a border with a specified color around the updatepanel control on the ASP. NET Ajax server side.
Next, in the updatepanelanimation. js file's corresponding Property Window, set the generation method to "embedded resource", as shown in 1.

Figure 1. Set the script file generation mode to the embedded resource mode.

(3) create a control class in the class library
Next, right-click the project and click "add> Class ...", In the "Add new project" dialog box that appears, select the "class" template and add a control class file named mycustomcontrol. CS to the project.
[Note] at this time, we can delete the file class1.cs automatically generated along with the previous class library project.
Then, open the file mycustomcontrol. CS for further modification. The following code corresponds to the complete code of the control class we just created:

 using System;using System.Drawing;using System.Web.UI;using System.Web;using System.Globalization;namespace MySampleControl{public class UpdatePanelAnimationWithClientResource : Control{private string _updatePanelID;private Color _borderColor;private Boolean _animate;public Color BorderColor{get{ return _borderColor; }set{_borderColor = value; }}public string UpdatePanelID{get{ return _updatePanelID; }set{_updatePanelID = value; }}public Boolean Animate{get{ return _animate; }set{_animate = value; }}protected override void OnPreRender(EventArgs e){base.OnPreRender(e);if (Animate) {UpdatePanel updatePanel = (UpdatePanel)FindControl(UpdatePanelID);string script = String.Format(CultureInfo.InvariantCulture,@"Sys.Application.add_load(function(sender, args) {{var {0}_borderAnimation = new BorderAnimation('{1}');var panelElement = document.getElementById('{0}');if (args.get_isPartialLoad()) {{{0}_borderAnimation.animate(panelElement);}}}})",updatePanel.ClientID,ColorTranslator.ToHtml(BorderColor));ScriptManager.RegisterStartupScript(this,typeof(UpdatePanelAnimationWithClientResource),ClientID,script,true);}}}} 

This control class provides attributes used to customize the border color of the updatepanel control. In addition, the above Code also registers the JavaScript code to be used on the web page. The Code also creates a processor to load events of the SYS. Application object. In this way, when updating a local page, the animate function included in the previous script file updatepanelanimation. JS is called.

Next, we must add the following code lines to the assemblyinfo. CS file of the Assembly property file.
[Assembly: system. Web. UI. webresource ("mysamplecontrol. updatepanelanimation. js", "application/X-JavaScript")]
Note: The webresource definition must include the namespace and the name of the. js file.
Finally, right-click the above class library project and select "generate" to build this class library project into a. dll Assembly file.

When the compilation is complete, you already have an Assembly named samplecontrol. dll. The javascript code in the updatepanelanimation. js file is "hidden" into the Assembly as an embedded resource. 2. Demonstrate the information of the Assembly samplecontrol. dll observed by. Net reflector compiled using Lutz roeder.

Figure 2. Use. Net reflector to analyze the result of the Assembly samplecontrol. dll.

3. Reference embedded script files from web pages
Now, we will create a simple web application to reference the embedded script file we just created on the web page.
Click "File> Add> New website ...", Select the "ASP. NET Ajax-enabled web site" template, name the project "ajaxtestwebsite", select C # As the built-in support language, and click OK.

Right-click the website and create a new bin folder under the root directory of the website.
Right-click the bin folder to add a reference to the library file samplecontrol. dll in the bin \ debug or bin \ release directory corresponding to the preceding class library project.

[Note] If the above two projects are not in the same solution, you need to copy the library file samplecontrol. dll corresponding to the class library project to the bin folder on the website.
Then, replace the content in the default. aspx file with the following code:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register TagPrefix="Samples" Namespace="MySampleControl" Assembly="MySampleControl" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Note: First, we actually created a simple control that inherits the control. Therefore, this control will appear in the toolbar-you just need to drag the control directly to the example Page. Second, in the above Code segment, we include a <asp: scriptreference> sub-element. This element references the Assembly mysamplecontrol and updatepanelanimation. js files you created in the previous section. This sub-element is described in the ASP. NET Ajax online tutorial.
Finally, press F5 to start the website program. Every time you click a date in the calendar control, you will see a green border around the updatepanel control. 3. A snapshot corresponding to the time when the program is running.

Figure 3. a snapshot of the sample Website running time.
Iv. Summary 
In this article, we have implemented the embedding of a Javascript file as a resource into A. Net program set. Then, some simple examples of ASP. Net Ajax websites show how to reference the script files embedded in this program in Web applications. Note that all the basic operations involved in this article are the basic skills for extending the ASP. NET Ajax framework based on custom components.