Use ASP. Net ajax to asynchronously call the class methods in Web Services and pages (9): automatic conversion of server and client data types: datatable and Dataset

This article is from ASP.. Net Ajax programming Chapter II: client-related Microsoft Ajax library Chapter III asynchronous call of Web Services and class methods on pages. For more information, see other articles in this chapter.

 

3.7.6DatatableAndDataset

Datatable and dataset are important concepts in ADO. net. These two objects are very complex and contain a large number of complex types and circular references. In order to be able. net Ajax asynchronous communication layer transmits these two types of data, Microsoft in ASP. the custom able and dataset conversion scheme is provided in net Ajax futures CTP version. net Ajax is highly scalable. You can use custom javascriptconverter to implement automatic conversion between datatable and dataset Client/Server.

Reference: in some cases, we also need to write custom javascriptconverter to customize conversion schemes for some complex types encountered in the actual project. For more information about the javascriptconverter component, see Chapter 2nd. The compilation of custom javascriptconverter is described in section III.

If you want. net Ajax asynchronous communication layer transmits data of the able and dataset types. First, we should ensure that ASP is installed. net Ajax futures CTP section (about ASP. net Ajax futures CTP Section Introduction and installation method, please refer to volume I), and added to the web site for Microsoft. web. preview. DLLProgramSet Reference (copy the assembly to the \ bin folder of the Web site), as shown in 3-31.

Figure 3-31 Add a reference to the Microsoft. Web. Preview. dll assembly on the Web Site

Then let's enable the datatable and dataset-related javascriptconverter components in ASP. NET Ajax futures CTP in the web. config file. SetCodeAdd to <configuration/>\< system. Web. Extensions/>\< scripting/>\< WebServices/>:

 
<Jsonserialization>
 

 
<Converters>
 

<Add Name= "Datasetconverter" Type= "Microsoft. Web. Preview. Script. serialization. converters. datasetconverter, Microsoft. Web. Preview, version = 1.0.61025.0, culture = neutral, publickeytoken = 31bf3856ad364e35"/>
 

 
<Add Name= "Datarowconverter" Type= "Microsoft. Web. Preview. Script. serialization. converters. datarowconverter, Microsoft. Web. Preview, version = 1.0.61025.0, culture = neutral, publickeytoken = 31bf3856ad364e35"/>
 

<Add Name= "Datatableconverter" Type= "Microsoft. Web. Preview. Script. serialization. converters. datatableconverter, Microsoft. Web. Preview, version = 1.0.61025.0, culture = neutral, publickeytoken = 31bf3856ad364e35"/>
 

 
</Converters>
 

 
</Jsonserialization>
 

After the above configuration, we can pass the datatable and dataset in the ASP. NET Ajax asynchronous communication layer. Let's use an instance program to describe the specific usage.

In this example, we use ASP. net Ajax asynchronous communication layer obtains a able from the Web service method on the server, and displays the data as an HTML <Table/> on the page. First, start with Web Service. The Code is as follows. Do not forget to add the [system. Web. Script. Services. scriptservice] attribute to the Web service class:

[WebService (namespace ="Http://tempuri.org /")]
 

 
[Webservicebinding (conformsto = wsiprofiles. basicprofile1_1)]
 

 
[System. Web. Script. Services. scriptservice]
 

 
Public ClassDataservice: system. Web. Services. WebService
 

 
{
 

 
[Webmethod]
 

 
PublicDatatable getdatatable (StringTablename)
 

 
{
 

 
// Set the datatable name
 

 
Datatable table =NewDatatable (tablename );
 

 
// Add two columns for the datatable
 

Table. Columns. Add (NewDatacolumn ("ID",Typeof(Int)));
 

 
Table. Columns. Add (NewDatacolumn ("Name",Typeof(String)));
 

 
// Add 5 rows
 

 
For(IntI = 0; I <5; ++ I)
 

 
{
 

 
Datarow newrow = table. newrow ();
 

 
Newrow ["ID"] = I;
 

 
Newrow ["Name"] =String. Format ("Name {0 }", I );
 

 
Table. Rows. Add (newrow );
 

 
}
 

 
ReturnTable;
 

 
}
 

 
}
 

Then add the scriptmanager control to the ASP. NET page on the client and introduce the Web Service:

 
<ASP: scriptmanager ID= "SM" Runat= "Server">
 

 
<Services>
 

<ASP: servicereference Path= "Services/dataservice. asmx" />
 

 
</Services>
 

 
</ASP: scriptmanager>
 

Ui part of the page: add a button to start asynchronous calls to the Web service method on the server side and a button to display the HTML <Table/> constructed by the server return value <DIV/>:

 
<Input ID= "Btngetdatatable" Type= "Button" Value= "Get datatable" 
 

Onclick= "Return btngetdatatable_onclick ()" />
 

 
<Div ID= "Result">
 

 
</Div>
 

The processing function of the Click Event of the btngetdatatable button is defined as follows:

 
FunctionBtngetdatatable_onclick (){
 

 
Dataservice. getdatatable ("My table", Onsucceeded );
 

 
}
 

Now, if everything goes well, we can see the basic structure of the datatable returned by the server in the callback function onsucceeded. For example, the following code uses the SYS. Debug. tracedump () method (for details about the SYS. Debug. tracedump () method, see the introduction in Chapter 1st) to view the detailed structure of the result object:

FunctionOnsucceeded (result ){
 

 
SYS. Debug. tracedump (result );
 

 
}
 

In the "output" Window of Visual Studio, we can see the complete structure of the client's able and the data contained in it, as shown in 3-32.

Figure 3-32 complete structure of the client datatable and the data contained in it

Of course, in the Visual Studio debugger, we can also directly view the structure and data of the datatable, as shown in 3-33.

Figure 3-33 Structure of the server-side able type on the client

As shown in figure 3-32 and Figure 3-33, Asp. the net Ajax asynchronous communication layer is relatively simple for the client JavaScript corresponding type generated by the server-side datatable. The relationship and constraints between data in many original datatable tables are not preserved. However, in general development scenarios, this information is enough to meet our needs-after all, all the "data" in the datatable are kept at all.

Reference: ASP. NET Ajax provides a more complete client datatable type in the CTP ures CTP version. Its full name is sys. Preview. Data. datatable. For more information about this type, see section 8.2.2.

Next, let's go back to the compilation of the sample program, complete the callback function onsucceeded (), and display the data in the client's datatable in the form of HTML <Table/>. The onsucceeded () Code of the callback function is as follows. The Code flow is annotated in detail, which is not mentioned here:

FunctionOnsucceeded (result ){
 

 
// Test
 

 
// SYS. Debug. tracedump (result );
 

 
// Debugger;
 

 
// Obtain the names of the two columns.
 

 
VaRIdcolname = result. Columns [0]. Name;
 

 
VaRNamecolname = result. Columns [1]. Name;
 

 
// Obtain the row set in the datatable.
 

 
VaRRows = result. Rows;
 

 
// Create a table Header
 

VaRBuilder =NewSYS. stringbuilder ("<Table border = 1>");
 

 
Builder. append (
 

 
String. Format (
 

 
"<Tr> <TD >{0} </TD> <TD >{1} </TD> </tr>",
 

 
Idcolname,
 

 
Namecolname
 

 
)
 

 
);
 

 
// Create table content
 

 
For(VaRRowindex = 0; rowindex <rows. length; ++ rowindex ){
 

 
Builder. append (
 

 
String. Format (
 

"<Tr> <TD >{0} </TD> <TD >{1} </TD> </tr>",
 

 
Rows [rowindex] [idcolname],
 

 
Rows [rowindex] [namecolname]
 

 
)
 

 
);
 

 
}
 

 
Builder. append ("</Table>");
 

 
// Display the table
 

 
$ Get ("Result"). Innerhtml = builder. tostring ();
 

 
}
 

So far, we have completed the compilation of this sample program. Run the program and click "Get able". The page shown in 3-34 is displayed.

Figure 3-34 get the able object from the server and display it on the page

If you want to get the DataSet object, the ASP. NET Ajax asynchronous communication layer also has good support. Add the following method in the dataservice web service class:

 
[Webmethod]
 

 
PublicDataset getdataset (String[] Tablenames)
 

 
{
 

 
Dataset dataset =NewDataset ();
 

 
// Create each able based on the input datatable name
 

 
For(IntI = 0; I <tablenames. length; ++ I)
 

 
{
 

 
Dataset. Tables. Add (getdatatable (tablenames [I]);
 

 
}
 

 
ReturnDataset;
 

 
}
 

This method accepts a string array, creates a corresponding number of datatables based on the length of the array, and then packs these datatables into a dataset and returns them to the client.

On the client side, we can use the following JavaScript to call the Web service method:

 
VaRDatatablenames = ["My table 1","My table 2","My table 3"];
 

 
Dataservice. getdataset (datatablenames, onsucceeded );
 

In the onsucceeded () callback function, the returned client dataset shows the structure 3-35 in the Visual Studio debugger. It can be seen that the dataset contains three able objects.

Figure 3-35 structure of the server dataset type on the client

Although the dataset of this client version is still relatively simple, in general, such a data structure is enough for us to use.