ASP. NET AJAX

Let's take a look at the application re-compiled using the component idea. First, let's take a look at the aspx page:

Default. aspx:

 
 

  
  
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"＞  
  
  
＜htmlxmlns="http://www.w3.org/1999/xhtml"＞  
  
  
＜headrunat="server"＞  
  
  
＜title＞UntitledPagetitle＞  
  
  
head＞  
  
  
＜body＞  
  
  
＜formid="form1"runat="server"＞  
  
  
＜asp:ScriptManagerID="ScriptManager1"runat="server"＞  
  
  
＜Scripts＞  
  
  
＜asp:ScriptReferenceAssembly="Microsoft.Web.Preview"Name="PreviewScript.js"/＞  
  
  
＜asp:ScriptReferencePath="~/ajax.js"/＞  
  
  
Scripts＞  
  
  
＜Services＞  
  
  
＜asp:ServiceReferencePath="~/SayHelloService.asmx"/＞  
  
  
Services＞  
  
  
asp:ScriptManager＞  
  
  
＜div＞  
  
  
＜inputid="btnSayHello"type="button"value="SayHello"/＞  
  
  
＜divid="result"＞div＞  
  
  
div＞  
  
  
form＞24body＞25html＞ 
 
 

There are two changes here. One is to add a reference to PreviewScript. js in the ScriptManager control. Note that the content of the client component is not included in the official version of ASP. NET AJAX1.0, but included in ASP. net ajax Futures CTP. Therefore, to use these features, you must first add. web. preview. dll file reference. This file is stored in ASP. net ajax Futures CTP installation directory, and then add PreviewScript to the page. js file reference.

The second change is that btnSayHello has no onclick attribute. How do I know the code to be executed when I click this button? The answer is in the js file.

Ajax. js:

 
 

  
  
Var btnSayHello;
  
  
Var lblResult;
  
  
Sys. Application. add_init (onPageInit );
  
  
Function onPageInit ()
  
  
{BtnSayHello=NewSys. Preview. UI. Button ($ get ("btnSayHello "));
  
  
BtnSayHello. initialize ();
  
  
LblResult=NewSys. Preview. UI. Label ($ get ("result "));
  
  
LblResult. initialize (); btnSayHello. add_click (btnSayHello_onClick );
  
  
}
  
  
Function btnSayHello_onClick (){
  
  
SayHelloService. SayHello (OnSucceeded, OnFailded );
  
  
} Function OnSucceeded (resultText ){
  
  
LblResult. set_text (resultText );
  
  
} Function OnFailded (error ){
  
  
LblResult. set_text ("Call failed. Error message: "+ error. get_message ());}
 
 

We can see that JavaScript has undergone a huge change after applying the component programming idea. Don't worry. Let's parse this file step by step.

Two global variables are defined at the top, which store references to btnSayHello and result respectively. To define global variables, you can easily call two controls in the entire file.

Sys. Application. add_init (onPageInit); is used to tell the page to execute the onPageInit function when the page is initialized.

OnPageInit is a custom function that mainly creates and initializes client controls. The following two lines of code are used as an example:

 
 

  
  
btnSayHello=new Sys.Preview.UI.Button($get("btnSayHello"));  
  
  
btnSayHello.initialize(); 
 
 

In the first line, I think most people will know what it means, because the "new" is very friendly. This is the creation of a Button instance and assigning it to the btnSayHello variable. Among them, Sys. Preview. UI. Button is the fully qualified name of the Button, and most control constructors need a parameter to indicate the DOM element to be associated with the control. The second line is required. After instantiating a control, you 'd better call the initialize method immediately to avoid some strange situations.

 
 

  
  
btnSayHello.add_click(btnSayHello_onClick); 
 
 

The above code associates the Click Event of the control with the function btnSayHello_onClick. Here I want to talk about the properties of ASP. NET AJAX client controls and how to set events.

ASP. the net ajax framework specifies that the "control name. get _ property name () ", which is set to" control name. set _ attribute name ()". When adding a listening function for an event of a control, you should use "Control name. add _ event name ()" and "Control name. remove _ event name ()" When removing the function ()". This is the naming convention enforced by ASP. net ajax. All client controls follow this rule. In the future, we should also follow this rule when developing our own client components.

With the above knowledge, a lot of code is easy to understand. For example, "lblResult. set_text (resultText);" sets the text attribute of the lblResult control to resultText. I will not explain the remaining code. It should be okay.

1. Introduction to ASP. net mvc Framework
2. Introduction to MvcAjaxPanel in ASP. NET MVC
3. ASP. net mvc Framework to save UpdatePanel
4. Use ASP. net mvc source code to find a solution
5. ActionInvoker of ASP. net mvc Framework