asp.net ajax client Programming trip (vi)--to be a client control of your own

With the previous article, we learned a lot about the ASP.net Ajax framework. In this article, let's do one of our own asp.net ajax client controls: Passwordvalidator. The DOM element to which this control is associated is a span or div, and is associated with a password type input label, when the user loses the password in input and the input loses focus, detects if the password entered by the user is reasonable and, if reasonable, The security of the password is given.

Starting with this article, you will use VS2008 as the IDE, and ask your friends to pay attention.

Building the skeleton of an AJAX client control control

In previous VS2005, creating an AJAX client control required creating a new JS file and writing all of the code manually. In VS2008, there is a built-in support for AJAX client components that directly create AJAX client component files that the IDE automatically generates for the program skeleton. The method is established as follows:

First, create a new project. In VS2008, it is possible to create a asp.net Web site directly, which has built-in support for ASP.net Ajax. My project name is Myajaxclientcontrol.

Then we Solution Explorer's website project right click, select "Add"-> "New Item", under the "Web" option has an "AJAX Client control", a new one of these files can be. My document is called Passwordvalidator.js. After the new, the initial contents of the file are as follows.

Passwordvalidator.js:

1/// <reference name="MicrosoftAjax.js"/>
2
3Type.registerNamespace("MyAjaxClientControl");
4
5MyAjaxClientControl.PasswordValidator = function(element) {
6　　MyAjaxClientControl.PasswordValidator.initializeBase(this, [element]);
7}
8
9MyAjaxClientControl.PasswordValidator.prototype = {
10　　initialize: function() {
11　　　　MyAjaxClientControl.PasswordValidator.callBaseMethod(this, 'initialize');
12　　　　
13　　　　// Add custom initialization here
14　　},
15　　dispose: function() {
16　　　　//Add custom dispose actions here
17　　　　MyAjaxClientControl.PasswordValidator.callBaseMethod(this, 'dispose');
18　　}
19}
20MyAjaxClientControl.PasswordValidator.registerClass('MyAjaxClientControl.PasswordValidator', Sys.UI.Control);
21
22if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Let's take a quick look at this code and see what it looks like asp.net ajax client components.

First we have to have a sense in the mind that ASP.net Ajax extends JavaScript so that it has object-oriented features, so a asp.net Ajax client component can be viewed as a class, and since it is a class, of course, there are things that we are familiar with, such as namespaces, Member variables, methods, constructors, destructors, and so on, of course, classes can also inherit. With such a sense, it is much simpler to understand this code, and of course the extended JavaScript class is very different in syntax from the traditional C # and Java classes, but we must see it as a class.

In C #, writing a class first specifies the namespace, and here is no exception. Type.registerNamespace ("Myajaxclientcontrol"); is to specify that this class belongs to the Myajaxclientcontrol namespace, Type.registerNamespace is a fixed usage here, just remember.

Next to declare a class, JS declared class can not have the keyword, but use function, yes, a class is a function, you find it difficult to understand also want to understand, here is the case.

　　　MyAjaxClientControl.PasswordValidator = function(element) {
　　　　　　MyAjaxClientControl.PasswordValidator.initializeBase(this, [element]);
　　　}

About this line of code, is the declaration of the class, but also the constructor. It is seen from here that the constructor of a generic control requires a parameter element, which is actually the DOM that needs to be associated. Because the ASP.net AJAX control itself is virtual, it works only if it is associated with a specific DOM. The constructor also calls the initialization function of the parent class.

Down there is a prototype, and here is the most important. All the member variables and methods of this class are written in, and so will be the part of our main writing code. About prototype I don't say much, want to know friend can go to find JavaScript book to see, don't want to understand as long as know here put class members and method is enough. As you can see, two methods have been automatically generated here, one is initialization and the other is destructors. In general, these two functions are left intact.

Look down and see MyAjaxClientControl.PasswordValidator.registerClass (' Myajaxclientcontrol.passwordvalidator ', Sys.UI.Control); This line of code. The function of this code is to tell the system passwordvalidator that this function is to be declared as a class, and to inherit from Sys.UI.Control, the visual controls we write ourselves are inherited from Sys.UI.Control. Remember that NamespaceName.FunctionName.registerClass is the method of a function programming class where registerclass requires two basic parameters, the first is the name of the class, and the second is the parent class to inherit. In fact, you can also have parameters to indicate the interface that this class implements.

Last but not the same, that is a line of code required by the framework.