Of Stack

Use the AjaxPro.Net framework to implement methods that invoke the server side on the client side

  • 2020-05-12 02:28:44
  • OfStack

This document will use the AjaxPro.Net framework to implement the Ajax functionality: invoke the server-side methods asynchronously on the client side. AjaxPro.Net is an excellent Ajax framework in the context of.net. It is easy to use and you can refer to the relevant materials. This document is a simple example to illustrate some key points of using AjaxPro.

1. Download the AjaxPro component. And reference AjaxPro.dll to the website (or project). Download: Download latest version 7.7.31.1.
2. Modify Web.config. in < system.web > Add the following code to the element.
< configuration > < system.web > < httpHandlers > < ! -- register ajax handler, AjaxPro.2 -- for frameworks above 2.0 >
< add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/ >
< /httpHandlers > < /system.web > < /configuration >
3. Run time registration of AjaxPro in the page Page_Load event. Such as:
// AjaxPro.Utility.RegisterTypeForAjax (typeof(the name of the class)); The class name of the class. If it is in the namespace, you need to write the full namespace (e.g. namespaces._Default)
AjaxPro.Utility.RegisterTypeForAjax(typeof(testPro1));
4. Create server-side methods. Simply tag a method with the [AjaxPro.AjaxMethod] tag, and the method becomes an AjaxPro referential method. As follows :(I am now creating a new testPro1.aspx page and adding it in its cs code) 

 
[AjaxPro.AjaxMethod] 
public string GetString() 
{ 
return "Hello AjaxPro"; 
} 
[AjaxPro.AjaxMethod] 
public string GetServerTime() 
{ 
return DateTime.Now.ToString(); 
}

5. Client side call: 
 
<script type="text/javascript"> 
function getTime() { 
alert(testPro1.GetServerTime().value); 
} 
function getServerStr() { 
//ajaxPro_guide.GetString(GetString_callback); // asynchronous call 
//var p = ClassPro.GetServerTime().toString(); 
alert(testPro1.GetString().value); 
} 
</script>

Add the following code to the page:
< input id="Button1" type="button" value=" get the server time "onclick="getTime()" / >
< input id="Button3" type="button" value=" get the server object "onclick="getStudent()" / >

2. Extension, the client side accesses the server object
1. New class in App_code: 
 
public class Student 
{ 
private string _name = " Zheng Bocheng "; 
public int Age = 30; 
public string Name 
{ 
get { return this._name; } 
set { this._name = value; } 
} 
}

2. On the test page testPro1.aspx page, add it in its cs code 
 
[AjaxPro.AjaxMethod] 
public Student GetStudent() 
{// Server side add GetStudent methods  
return new Student(); 
} 
private Student student = null; 
[AjaxPro.AjaxMethod] 
public void SetStudent(Student stu) 
{ 
this.student = stu; 
string name = this.student.Name; 
}

3. javascript script on aspx page
Test the script in the aspx page 
 
<head id="Head1" runat="server"> 
<title>ajaxPro test </title> 
<script type="text/javascript"> 
function getStudent() { 
var stu = testPro1.GetStudent().value; 
alert(stu.Name + " " + stu.Age); // The customer js Objects returned by the server can be accessed  
} 
function putStudent() { 
var stu = testPro1.GetStudent().value; 
stu.Name = " Liu Ning "; 
testPro1.SetStudent(stu); // The client submits the object, and the object's Name The field has been changed to "liu ning".  
alert(stu.Name + " " + stu.Age); // The customer js Objects returned by the server can be accessed  
} 
</script> 
</head>

< div > < input id="Button3" type="button" value=" get the server object "onclick="getStudent()" / >
< input id="Button4" type="button" value=" client submits object to server "onclick="putStudent()" / >
< /div >
Reference: official website

Related articles: