Use JavaScript, CSS, and Ajax to create ASP. NET Custom Controls

The original article on msdn is named who is looking: Building a custom ASP. net control that uses JavaScript, Cascading Style Sheets, and Ajax. After downloading and testing, I feel really good. I have sorted out the Implementation ideas and recommended them to you.
Its function is that when a customer browses a webpage, the message of this customer will appear on all clients browsing the webpage. When a client leaves the webpage, the client's message will disappear from all other clients.
Program running effect:

 
Create an ASP. NET custom control
In Visual Studio, all ASP. NET 2.0 controls are custom controls. Generally, you need to complete the following three steps to create your own custom controls.
(1) create a new class under the site app_code;
(2) modify this class to make it a derived class of the webcontrol class (included in the system. Web. UI. webcontrols namespace;
(3) override the rendercontents () method of the base class (webcontrol class.

The following is the simplest ASP. NET control, which has only one function and displays "Hellow World ".

Using system;

Using system. Web. UI;

Using system. Web. UI. webcontrols;

Namespace mycontrols

{

Public class helloworld: webcontrol

{

Protected override void rendercontents (htmltextwriter writer)

{

Writer. Write ("Hello World ");

}

}

}

After a custom control is created, you can add it to a webpage in three ways.
First, add the registration control code in the aspx file:

<% @ Register tagprefix = "Custom" namespace = "mycontrols" %>

The values of the tagprefix attribute can be selected at will. The values of the namespace attribute must be the same as those of the custom control you created, and can be referenced anywhere on the page.

<Custom: helloworld id = "helloworld1" runat = "server"/>

The second option is to register this control in the web. config file, so that you can reference this control on all aspx pages. The configuration is as follows:

<Pages>

<Controls>

<Add tagprefix = "Custom" namespace = "mycontrols"/>

</Controls>

</Pages>

The last method is to add the control to the visual
In the studio toolbox, you can drag it to a webpage for use. However, you cannot create this control in the app_code folder, but you must create it as an independent assembly.
It will be mentioned later. After creating an independent custom control, right-click the visual
In the studio toolbox, select "select items" and a dialog box will pop up, from which you can select your own assembly. The custom control will automatically appear in the toolbox.

Embed Javascript

To achieve better client performance, we need to introduce JavaScript and CSS style sheets. In ASP. NET, there is a class called clientscriptmanager, which can easily perform operations on JavaScript. The important methods include:

• Registerclientscriptblock ()
• Registerstartupscript ()
• Registerclientscriptinclude ()
• Getwebresourceurl ()

The registerclientscriptblock and registerstartupscript methods allow you to add built-in JavaScript scripts to the webpage.
These two methods are generally used to add relatively simple JavaScript scripts. If you need to add complex JavaScript scripts, you can use
Registerclientscriptinclude or
Getwebresourceurl () method. The registerclientscriptinclude () method will add such a reference to the webpage:

<SCRIPT type = "text/JavaScript" src = "somescript. js"> </SCRIPT>

The disadvantage of this method is that an independent JS file needs to be published together when a program is released. The solution to this problem is to use the getwebresourceurl () method.
JavaScript files can be directly embedded into controls. In other words, the released assembly will contain custom controls and independent JS files. As with the previous registration control,
Custom Controls cannot contain JS files at the same time. They must be published as independent assemblies.
First, in visual
Create a new project in studio and select class library as the type. To create a custom control in a class library project, you must first Add a reference to system. Web. dll, and then select
JS file, and modify its generated event attributes to embedded resources. Add the webresource attribute to each embedded resource in assemblyinfo.
Add the following code to the assemblyinfo. CS file in properties:

[Assembly: webresource ("whoislooking. whoislooking. js", "text/JavaScript")]

Code for calling JS files in the onprerender () method:

// Add JavaScript include

String scripturl = page. clientscript. getwebresourceurl (this. GetType (),

"Whoislooking. whoislooking. js ");

Page. clientscript. registerclientscriptinclude ("whoislooking", scripturl );

 

Embedded CSS style sheets

The method is similar to embedding Javascript. Add the following in assemblyinfo. CS:

[Assembly: webresource ("whoislooking.whoislooking.css", "text/CSS")]

In the onprerender method, add:

// Add style sheet to parent page

String cssurl = page. clientscript. getwebresourceurl (this. GetType (),

"Whoislooking.whoislooking.css ");

Htmllink csslink = new htmllink ();

Csslink. href = cssurl;

Csslink. Attributes. Add ("rel", "stylesheet ");

Csslink. Attributes. Add ("type", "text/CSS ");

This. Page. header. Controls. Add (csslink );

// Add Class Name

This. cssclass = "whoislooking ";

 

Use Ajax

The whoislooking control uses Ajax technology to display visitor information in real time. Ajax is Asynchronous JavaScript and
The abbreviation of XML, which can be used to transmit data between the client and the server without refreshing the entire page. To implement Ajax in an ASP. NET custom control
The following three steps:
1. Use getcallbackeventreference () to initiate a client request;
2. Implement the icallbackeventhandler interface to respond to client requests. This interface has two methods to implement: The raisecallbackevent () method and the getcallbackresult () method.
3. Create a javascript client function to obtain and operate the returned data.

Whoislooking initiates a request every five seconds. You must add the following code in the onprerender () method:

String callback = page. clientscript. getcallbackeventreference

(

This,

Null,

"Whoislooking. updatedisplay ",

String. Format ("'{0}'", this. clientid ),

"Whoislooking. callbackerror ",

True );

String startupscript = string. Format ("setinterval (/" {0}/", {1});", callback, _ pollinginterval * 1000 );

Page. clientscript. registerstartupscript (this. GetType (), "whoislooking", startupscript, true );

Next, rewrite raisecallbackevent ()
And the getcallbackresult () method. The raisecallbackevent () method adds the current user to the visitor list, and also deletes the user from the list.
Division. Getcallbackresult () returns the visitor's information, including the user account, name, stay time, browser information, host name, and operating system information. The return value of this method is
JSON array. JSON is the standard format of information in Ajax requests. For more information about JSON, see json.net ). For example, if two users are simultaneously browsing the current
The JSON value of the webpage will be as follows:

[{Userid: "fooglm45cjcycw55qi4yluvk", Username: "superexpert // Steve ",
Duration: "0 minute (s)", browser: "Internet Explorer 7.0", remotehost:
"Superexpert.com", platform:
"WINXP" },{ userid: "1kqatn55sxc4vi55ummxghil", Username: "superexpert // Bill ",
Duration: "0 minute (s)", browser: "Firefox 1.5.0.11", remotehost:
"Superexpert.com", platform: "WINXP"}]

Finally, the whoislooking control displays user information on the client through the updatedisplay () method. This method creates a <div> layer for each user to store user information.

Note: In the original article, the implementation of whoislooking provides both C # and VB code. Here I only paste the C # code. If you use VB, you can view it in the original article, or directly go to the downloaded source file.

Download complete source code (including C # and VB)