Javascript asynchronous calling of pagemethod: transfer complex data types

This example mainly implements two knowledge points,

One is to use JavaScript to call pagemethod asynchronously on the client,

The second is to use pagemethod to return a generic set of complex data types list.

First, implement JavaScript asynchronous calling pagemethod,

Just as JavaScript calls WebService asynchronously, you must first publish the webmethod to pagemethod,

It must be noted that pagemethod must be implemented on the. aspx. CS page (not a user control or master page,

Then, pagemethod must adopt public modification and static modification,

Since it is another simple implementation of WebService, you must add the [webmethod] attribute tag,

In this way, the so-called pagemethod is published to the client's JavaScript.

Then there is a problem of transmission of complex data types,

That is, through WebService or pagemethod on the server,

To pass a complex data type to the Javascript client,

This mainly involves several slightly complex data types, such as passing a class object,

Passing an array set object, more complex generic set object,

Or even datatable (too complicated and need to be processed separately ),

In this example, a list <class T> generic set object is passed to JavaScript,

It should be explained that the list is actually an array object when it is passed to the client JavaScript,

The list <t> type is T, so the t object is stored in the array,

Therefore, you only need to replace the T type of the server with the same replacement type on the client,

You can solve the problem of passing list generic sets.

Let's look at the example,

The example is to obtain the "ID card number" and "Student name" in the "Student table" in the database ",

Then dynamically bind the two fields to the "drop-down list box" control,

Then, select a student from the drop-down list box and click a client button,

Use this button to execute JavaScript to access pagemethod,

After obtaining all the data of this student in pagemethod,

Returns a list <t> object to the client.

. Aspx. CS

Public partial class demo _ 6: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
If (! Ispostback)
{
Binddata ();
}
}

Private void binddata ()
{
String constr = webconfigurationmanager.

Connectionstrings ["Demo"]. connectionstring;
String sqlstr = "select student name, ID number from student ";
Dataset mydataset = new dataset ();

Using (sqlconnection sqlcon = new sqlconnection (constr ))
{
Using (sqlcommand sqlcom = sqlcon. createcommand ())
{
Sqlcom. commandtype = commandtype. text;
Sqlcom. commandtext = sqlstr;
Using (sqldataadapter sqlda = new sqldataadapter (sqlcom ))
{
Sqlda. Fill (mydataset );
}
}
}
Ddlstudent. datasource = mydataset. Tables [0];
Ddlstudent. datatextfield = "Student name ";
Ddlstudent. datavaluefield = "ID card number ";
Ddlstudent. databind ();
}

[Webmethod]
Public static list <demo _ 6 _ use> mypagemethodlist (string ID)
{
List <demo _ 6 _ use> mylist = new list <demo _ 6 _ use> ();

String constr = webconfigurationmanager.
Connectionstrings ["Demo"]. connectionstring;
String sqlstr = "select * from student where ID number = @ ID ";
Using (sqlconnection sqlcon = new sqlconnection (constr ))
{
Sqlcon. open ();
Using (sqlcommand sqlcom = sqlcon. createcommand ())
{
Sqlcom. commandtext = sqlstr;
Sqlcom. commandtype = commandtype. text;
Sqlcom. Parameters. addwithvalue ("@ ID", ID );
Using (sqldatareader sqldr = sqlcom. executereader ())
{
If (sqldr. Read ())
{

// There are so many try-catch methods to preventSqldr. getboolean (2). tostring ())

// The data is empty. If no try-Catch Block is set,

// An exception is thrown, causing asynchronous calling to fail. The onfailed error processing function is executed on the client.
Try
{
Mylist. Add (new demo _ 6 _ Use ("Student name ",
Sqldr. getsqlstring (1). Value ));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("Student name", "EMPTY data "));
}
Try
{
Mylist. Add (new demo _ 6 _ Use ("gender ",
Sqldr. getboolean (2). tostring ()));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("gender", "EMPTY data "));
}
Try
{
Mylist. Add (new demo _ 6 _ Use ("parent name ",
Sqldr. getsqlstring (3). Value ));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("parent name", "EMPTY data "));
}
Try
{
Mylist. Add (new demo _ 6 _ Use ("Home Address ",
Sqldr. getsqlstring (4). Value ));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("parent address", "EMPTY data "));
}
Try
{
Mylist. Add (new demo _ 6 _ Use ("zip code ",
Sqldr. getsqlstring (5). Value ));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("zip code", "EMPTY data "));
}
Try
{
Mylist. Add (new demo _ 6 _ Use ("phone number ",
Sqldr. getsqlstring (6). Value ));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("phone number", "EMPTY data "));
}
Try
{
Mylist. Add (new demo _ 6 _ Use ("Date of Birth ",
Sqldr. getdatetime (7). tostring ()));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("birthdate", "EMPTY data "));
}
Try
{
Mylist. Add (new demo _ 6 _ Use ("height ",
Sqldr. getvalue (8). tostring ()));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("height", "EMPTY data "));
}
Try
{
Mylist. Add (new demo _ 6 _ Use ("weight ",
Sqldr. getvalue (9). tostring ()));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("weight", "EMPTY data "));
}
Try
{
Mylist. Add (new demo _ 6 _ Use ("blood type ",
Sqldr. getsqlstring (10). Value ));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("blood type", "EMPTY data "));
}
Try
{
Mylist. Add (new demo _ 6 _ Use ("Profile ",
Sqldr. getsqlstring (11). Value ));
}
Catch
{
Mylist. Add (new demo _ 6 _ Use ("Personal Profile", "EMPTY data "));
}
}
}
}
}
Return mylist;
}

Demo _ 6 _ use. CS class

Public class demo _ 6 _ Use
{
Private string dictionarykey;

Public String dictionarykey
{
Get {return dictionarykey ;}
Set {dictionarykey = value ;}
}
Private string dictionaryvalue;

Public String dictionaryvalue
{
Get {return dictionaryvalue ;}
Set {dictionaryvalue = value ;}
}

Public demo _ 6 _ Use (string key, string value)
{
This. dictionarykey = key;
This. dictionaryvalue = value;
}
}

. ASPX page html
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>

<Script language = "JavaScript" type = "text/JavaScript">

function btnsearch_onclick () {
var ddlstudent = $ get ('<% = ddlstudent. clientid %> ');
pagemethods. mypagemethodlist (
ddlstudent [ddlstudent. selectedindex]. value,
onsucceeded, onfailed);
}

function onsucceeded (result) {
var MSG = "";
var studentname = new object ();
studentname. dictionarykey = Result [0]. dictionarykey;
studentname. dictionaryvalue = Result [0]. dictionaryvalue;
MSG + = studentname. dictionarykey + "" +
studentname. dictionaryvalue + "\ n";

var sex = new object ();
sex. dictionarykey = Result [1]. dictionarykey;
sex. dictionaryvalue = Result [1]. dictionaryvalue;
MSG + = sex. dictionarykey + "" +
sex. dictionaryvalue + "\ n";

var fathername = new object ();
fathername. dictionarykey = Result [2]. dictionarykey;
fathername. dictionaryvalue = Result [2]. dictionaryvalue;
MSG + = fathername. dictionarykey + "" +
fathername. dictionaryvalue + "\ n";

var address = new object ();
address. dictionarykey = Result [3]. dictionarykey;
address. dictionaryvalue = Result [3]. dictionaryvalue;
MSG + = address. dictionarykey + "" +
address. dictionaryvalue + "\ n";

var postcode = new object ();
postcode. dictionarykey = Result [4]. dictionarykey;
postcode. dictionaryvalue = Result [4]. dictionaryvalue;
MSG + = postcode. dictionarykey + "" +
postcode. dictionaryvalue + "\ n";

var phonenumber = new object ();
phonenumber. dictionarykey = Result [5]. dictionarykey;
phonenumber. dictionaryvalue = Result [5]. dictionaryvalue;
MSG + = phonenumber. dictionarykey + "" +
phonenumber. dictionaryvalue + "\ n";

var birthdate = new object ();
birthdate. dictionarykey = Result [6]. dictionarykey;
birthdate. dictionaryvalue = Result [6]. dictionaryvalue;
MSG + = birthdate. dictionarykey + "" +
birthdate. dictionaryvalue + "\ n";

var Height = new object ();
height. dictionarykey = Result [7]. dictionarykey;
height. dictionaryvalue = Result [7]. dictionaryvalue;
MSG + = height. dictionarykey + "" +
height. dictionaryvalue + "\ n";

var Weight = new object ();
weight. dictionarykey = Result [8]. dictionarykey;
weight. dictionaryvalue = Result [8]. dictionaryvalue;
MSG + = weight. dictionarykey + "" +
weight. dictionaryvalue + "\ n";

var Bloodtype = new object ();
Bloodtype. dictionarykey = Result [9]. dictionarykey;
Bloodtype. dictionaryvalue = Result [9]. dictionaryvalue;
MSG + = Bloodtype. dictionarykey + "" +
Bloodtype. dictionaryvalue + "\ n";

VaR studentmsg = new object ();
Studentmsg. dictionarykey = Result [10]. dictionarykey;
Studentmsg. dictionaryvalue = Result [10]. dictionaryvalue;
MSG + = studentmsg. dictionarykey + "" +
Studentmsg. dictionaryvalue + "\ n ";

VaR lblmsg = $ get ('<% = lblmsg. clientid %> ');
Lblmsg. innertext = MSG;
}

Function onfailed (error ){
VaR MSG = "error message" + error. get_message ();
Alert (MSG );
}
</SCRIPT>

</Head>
<Body>
<Form ID = "form1" runat = "server">
<Asp: scriptmanager id = "scriptmanager1" runat = "server" enablepagemethods = "true">
</ASP: scriptmanager>
<Div>
Select Students & nbsp;
<Asp: dropdownlist id = "ddlstudent" runat = "server" width = "150px">
</ASP: dropdownlist>
& Nbsp;
<Input id = "btnsearch" type = "button" value = "& gt ;"
Onclick = "Return btnsearch_onclick ()"/> <br/>
<Br/>
<Asp: Label id = "lblmsg" runat = "server" text = ""> </ASP: Label>
<Br/>
<Br/>
</Div>
</Form>
</Body>
</Html>

The above is a basic implementation of this example. The points that need to be noted are clearly stated before the blog,

If you are not clear about it, You can directly view it.CodeThe code is very easy to write, as long as you pay attention to the places I mark it, OK

Result

 

 

2010-1-26