ASP.NET 2.0 中AJAX能夠在用戶端Javascript中很友善地調用伺服器Webservice,以下為一些調用的示例。筆者安裝的ASP.NET 2.0
版本為AJAX November CTP。
三個示例分别為:
1 帶參數的WS方法
2 不帶參數的WS方法
3 參數類型為DataTable的WS方法
一、WebMethod
注意要點:
1 WebMethod類需要添加命名空間 Microsoft.Web.Script.Services,此空間需要引用Microsoft.Web.Preview.dll
2 類聲明加入标簽 [ScriptService]
3 在Asp.net 2.0裡可以直接用DataTable作為傳回類型了,但是需要在Web.config檔案添加序列化轉換器的屬性。DataSet、DataTable、DataRow均有轉換器
1 < system .web.extensions >
2 < scripting >
3 < webServices >
4 < jsonSerialization >
5 < converters >
6 < add name = " DataSetConverter " type = " Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview " />
7 < add name = " DataRowConverter " type = " Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview " />
8 < add name = " DataTableConverter " type = " Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview " />
9 </ converters >
10 </ jsonSerialization >
11 </ webServices >
12 </ scripting >
13 </ system.web.extensions >
14
WEB服務1:WS1
1 using System;
2 using System.Web;
3 using System.Collections;
4 using System.Web.Services;
5 using System.Web.Services.Protocols;
6 using Microsoft.Web.Script.Services;
7 using System.Data;
8 /// <summary>
9 /// WS1 的摘要說明
10 /// </summary>
11 [WebService(Namespace = " http://tempuri.org/ " )]
12 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
13 [ScriptService]
14 public class WS1 : System.Web.Services.WebService {
15
16 public WS1 () {
17
18 // 如果使用設計的元件,請取消注釋以下行
19 // InitializeComponent();
20 }
21
22 [WebMethod]
23 public string ServerTime()
24 {
25 return String.Format( " now: {0} " , DateTime.Now);
26 }
27
28 [WebMethod]
29 public DataTable GetDataTable()
30 {
31 DataTable dt = new DataTable( " Person " );
32
33 dt.Columns.Add( new DataColumn( " Name " , typeof ( string )));
34 dt.Columns.Add( new DataColumn( " LastName " , typeof ( string )));
35 dt.Columns.Add( new DataColumn( " Email " , typeof ( string )));
36
37 dt.Rows.Add( " he " , " sei " , [email protected] );
38 dt.Rows.Add( " mei " , " wu " , [email protected] );
39
40 return dt;
41 }
42 }
43
WEB服務2:WS
1 using System;
2 using System.Web;
3 using System.Collections;
4 using System.Web.Services;
5 using System.Web.Services.Protocols;
6 using Microsoft.Web.Script.Services;
7
8 /// <summary>
9 /// http://meil.livebaby.cn
10 /// </summary>
11 [WebService(Namespace = " http://tempuri.org/ " )]
12 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
13 [ScriptService]
14 public class WS : System.Web.Services.WebService {
15
16 public WS () {
17
18 // 如果使用設計的元件,請取消注釋以下行
19 // InitializeComponent();
20 }
21
22 [WebMethod]
23 [ScriptMethod(UseHttpGet = true )]
24 public string HelloWorld(String query)
25 {
26 string inputString = Server.HtmlEncode(query);
27 if ( ! String.IsNullOrEmpty(inputString))
28 {
29 return String.Format( " hello, {0}. " , inputString);
30 }
31 else
32 {
33 return " query string is null or empty " ;
34 }
35 }
36
37 }
38
二、前台頁面:
注意要點:
需要使用的背景WebService的方法均設定在如下位置
1 < asp:ScriptManager ID ="ScriptManager1" runat ="server" >
2 < Services >
3 < asp:ServiceReference Path ="~/WS.asmx" />
4 < asp:ServiceReference Path ="~/WS1.asmx" />
5 </ Services >
6 </ asp:ScriptManager >
7 Default頁面:
8
9 <% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Default.aspx.cs " Inherits = " _Default " %>
10
11 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
12 < html xmlns ="http://www.w3.org/1999/xhtml" >
13 < head runat ="server" >
14 < title > Untitled Page </ title >
15
16 < script language ="JavaScript
" type ="text/javascript" src ="js.js" >
17 </ script >
18
19 </ head >
20 < body >
21 < form id ="form1" runat ="server" >
22 < asp:ScriptManager ID ="ScriptManager1" runat ="server" >
23 < Services >
24 < asp:ServiceReference Path ="~/WS.asmx" />
25 < asp:ServiceReference Path ="~/WS1.asmx" />
26 </ Services >
27 </ asp:ScriptManager >
28 < div >
29 < asp:Button ID ="Button1" runat ="server" Text ="Button" OnClientClick ="dd();return false;" />
30 < div id ="time" >
31 </ div >
32 < div id ="List1" >
33 < asp:DropDownList ID ="ddl1" runat ="server" Width ="187px" >
34 </ asp:DropDownList >
35 </ div >
36
37 </ div >
38 </ form >
39 </ body >
40 </ html >
41
三、JavaScript程式:
注意要點:
AJAX November CTP 需要用 eval() 方法将其轉換成一個DataTable對象(并且要裁掉最前面的"("),而AJAX December CTP 支援以下方法轉換“Sys.Preview.Data.DataTable.parseFromJson(result)”
1 function dd()
2 {
3 WS.HelloWorld(
4 'hekui',
5 function (result)
6 {
7 alert(result);
8 }
9 );
10 WS1.ServerTime(
11 function (result)
12 {
13 alert(result);
14 var divTime = document.getElementById( " time " );
15 divTime.innerHTML = result;
16 }
17 );
18 WS1.GetDataTable(
19 function (result)
20 {
21 // 擷取到下拉框控件
22 var List = document.getElementById( " ddl1 " );
23
24 // AJAX November CTP 需要用 eval() 方法将其轉換成一個DataTable對象(并且要裁掉最前面的"(")
25 var Text = result.dataArray.substring( 0 ,result.dataArray.length - 1 );
26 var Table = eval( Text);
27
28 // AJAX December CTP 支援以下方法轉換
29 // var Table = Sys.Preview.Data.DataTable.parseFromJson(result);
30
31 // 清除下拉框原有清單項
32 for (x = List.options.length - 1 ; x > - 1 ; x -- )
33 {
34 List.remove( 0 );
35 }
36
37 // 從擷取的DataTable添加資料到下拉框清單項
38 for (x = 0 ; x < Table.length; x ++ )
39 {
40 // 擷取每一行
41 var Row = Table[x];
42 // 建立一個清單項
43 var option = document.createElement( " option " );
44 // 清單項顯示文本指派
45 option.text = Row.Name + " " + Row.LastName;
46 // 清單項選項值指派
47 option.value = Row.Email;
48
49 // 判斷浏覽器類型,進行項目添加
50 if ( window.navigator.appName.toLowerCase().indexOf( " microsoft " ) > - 1 )
51 List.add(option);
52 else
53 List.add(option, null );
54 }
55 }
56 );
57 }
58