In ASP.NET 2.0 AJAX, the server Webservice can be easily called in client js. The following are some examples of calls. The ASP.NET 2.0 AJAX version installed by the author
is AJAX November CTP.
Three examples are:
1 WS method with parameters
2 WS method without parameters
3 WS method with parameter type DataTable
1. WebMethod
Key points to note:
1 The WebMethod class needs to add the namespace Microsoft.Web.Script.Services, and this space needs to reference Microsoft.Web.Preview.dll
Add tag [ScriptService] to type 2 declaration
3 In Asp.net 2.0, you can directly use DataTable as the return type, but you need to add the serialization converter attribute to the Web.config file. DataSet, DataTable, and DataRow all have converters
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization>
<converters>
<add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview"/>
<add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview"/>
<add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview"/>
</converters>
</jsonSerialization>
</webServices>
</scripting>
</system.web.extensions>
WEB service 1: WS1
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using Microsoft.Web.Script.Services;
using System.Data;
/**//// <summary>
/// Summary description of WS1
/// </summary>
[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WS1 : System.Web.Services.WebService {
public WS1 () {
//If using designed components, uncomment the following lines
//InitializeComponent();
}
[WebMethod]
public string ServerTime()
{
return String.Format("now: {0}", DateTime.Now);
}
[WebMethod]
public DataTable GetDataTable()
{
DataTable dt = new DataTable("Person");
dt.Columns.Add(new DataColumn("Name", typeof(string)));
dt.Columns.Add(new DataColumn("LastName", typeof(string)));
dt.Columns.Add(new DataColumn("Email", typeof(string)));
dt.Rows.Add("kui", "he", " [email protected] ");
dt.Rows.Add("ren", "chao", " [email protected] ");
return dt;
}
}
WEB service 2: WS
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using Microsoft.Web.Script.Services;
/**//// <summary>
/// Summary description of WS
/// </summary>
[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WS : System.Web.Services.WebService {
public WS () {
//If using designed components, uncomment the following lines
//InitializeComponent();
}
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public string HelloWorld(String query)
{
string inputString = Server.HtmlEncode(query);
if (!String.IsNullOrEmpty(inputString))
{
return String.Format("hello, {0}. ", inputString);
}
else
{
return "query string is null or empty";
}
}
}
2. Front page:
Key points to note:
The background WebService methods that need to be used are set in the following locations
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WS.asmx" />
<asp:ServiceReference Path="~/WS1.asmx" />
</Services>
</asp:ScriptManager>
Default page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1// EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="js.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WS.asmx" />
<asp:ServiceReference Path="~/WS1.asmx" />
</Services>
</asp:ScriptManager>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="dd();return false;" />
<div id="time">
</div>
<div id="List1">
<asp:DropDownList ID="ddl1" runat="server" Width="187px">
</asp:DropDownList>
</div>
</div>
</form>
</body>
</html>
3. JavaScript program:
Key points to note:
AJAX November CTP needs to use the eval() method to convert it into a DataTable object (and cut off the front "("), while AJAX December CTP supports the following method to convert "Sys.Preview.Data.DataTable.parseFromJson(result) ”
function dd()
{
WS.HelloWorld(
'hekui',
function(result)
{
alert(result);
}
);
WS1.ServerTime(
function(result)
{
alert(result);
var divTime = document.getElementById("time");
divTime.innerHTML = result;
}
);
WS1.GetDataTable(
function(result)
{
//Get the drop-down box control
var List = document.getElementById("ddl1");
//AJAX November CTP needs to use the eval() method to convert it into a DataTable object (and cut off the leading "(")
var Text= result.dataArray.substring(0,result.dataArray.length -1);
var Table = eval(Text);
//AJAX December CTP supports the following conversion methods
// var Table = Sys.Preview.Data.DataTable.parseFromJson(result);
//Clear the original list items of the drop-down box
for (x=List.options.length-1; x > -1; x--)
{
List.remove(0);
}
//Add data from the obtained DataTable to the drop-down box list item
for (x=0; x < Table.length; x++ )
{
//Get each row
var Row = Table[x];
//Create a list item
var option = document.createElement("option");
//List item displays text assignment
option.text = Row.Name + " " + Row.LastName;
//Assignment of list item option values
option.value = Row.Email;
//Determine the browser type and add items
if ( window.navigator.appName.toLowerCase().indexOf("microsoft") > -1)
List.add(option);
else
List.add(option, null);
}
}
);
}
Sample code: http://www.cnblogs.com/heekui/archive/2007/01/10/616332.html