ASP. NET Ajax Page Methods

Source: Internet
Author: User

There are many ways to implement Ajax. As an ASP. NET programmer, if you do not know the basic knowledge of ASP. NET Ajax, you can't say it. This article describes how to use Page Methods.

Since it is ASP. NET Ajax, you must first add a ScriptManager on the page and set EnablePageMethods = "true ". Then add using System. Web, Services; in the background code ;.
Then write the background method. Note the following:

1. Declare this method as public;

2. Declare the method as static;

3. Add the [WebMethod] attribute for this method;

The call is performed on the front-end page. The procedure is as follows:

1. Call the PAGE method using the following JavaScript syntax on the client:

PageMethods. MethodName (param1, param2,..., callbackFunction );

Function callbackFunction (params) {// do something here ...;}

Note that PageMethods does not have intelligent awareness, so do not doubt that you have made a mistake.

2. Specify the callback function for the client to call asynchronously. The callback function receives the returned value and further processes it.

The following is a simple example of Two-Level Association:

Background method code:

[WebMethod]
Public static string GetCountries ()
{
// In actual application, a JSON parser is required to convert the able or List <Entity> in your database to a JSON string.
// Here I will demonstrate the traditional cut string (first use a comma to cut into an array, then use a colon to cut into Text and Value)
Return "China: 86, America: 1, England: 44, France: 33 ";
}

[WebMethod]
Public static string GetCities (string countryid)
{
// Simulate the city database query operation based on the country number and return the JSON
If (countryid = "86 ")
Return "[{city: 'beijing', no: '027 '}, {city: 'shanghai', no: '027'}, {city: 'shanghai', no: '20'}] ";
If (countryid = "1 ")
Return "[{city: 'New York ', no: '027'}, {city: 'La', no: '027'}, {city: 'houston ', no: '20'}] ";
If (countryid = "44 ")
Return "[{city: 'London ', no: '010'}, {city: 'manc', no: '027'}]";
If (countryid = "33 ")
Return "[{city: 'Paris ', no: '010'}]";
Return "";
}
Front-End call code:

<Script language = "javascript" type = "text/javascript">
Function getCountries (){
// GetCountries is the name of the background method. Do not make the case wrong. If there are parameters, write them in front of the callback function.
PageMethods. GetCountries (loadCountries );}
// Result is the string returned by the page background method. The following two parameters are not used currently.
Function loadCountries (result, userContext, methodName ){
Var ddl1 = document. getElementById ("ddl1 ");
Var ary = result. toString (). split (",");
For (var I = 0; I <ary. length; I ++ ){
Var item = ary [I]. split (":");
Var opt = new Option (item [0], item [1], false, false );
Ddl1.options [ddl1.options. length] = opt ;}}
// Select a city based on the country
Function getCities (obj ){
If (obj. selectedIndex! = 0 ){
Var cid = obj. options [obj. selectedIndex]. value;
PageMethods. GetCities (cid, loadCities );}
Else {
Var ddl2 = document. getElementById ("ddl2 ");
Ddl2.options. length = 0;
Var opt = new Option ("-- Choose Your City --", "", false, false );
Ddl2.options [ddl2.options. length] = opt ;}}
Function loadCities (result, userContext, methodName ){
Var ddl2 = document. getElementById ("ddl2 ");
Ddl2.options. length = 0;
Var json = eval ("(" + result + ")");
For (var I = 0; I <json. length; I ++ ){
Var opt = new Option (json [I]. city, json [I]. no, false, false );
Ddl2.options [ddl2.options. length] = opt ;}}
</Script>

In this case, it is very easy to implement a three-level linkage, but I don't know how efficient it is.

Note: If you need to call other methods on the Page in the Page Method, this Method must be set to static like it. This restriction does not apply if you call other dll methods.

Download Attachment: jscallserver.rar

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.