ASP.NET 2.0 AJAX中Webservice调用方法示例

晨曦之光 发布于 2012/03/09 15:00
阅读 206
收藏 0

ASP.NET 2.0 AJAX中能够在客户端js中很方便地调用服务器Webservice,以下为一些调用的示例。笔者安装的ASP.NET 2.0 AJAX

版本为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均有转换器WEB服务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>
/// WS1 的摘要说明
/// </summary>

[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo 
=  WsiProfiles.BasicProfile1_1)]
[ScriptService]
public   class  WS1 : System.Web.Services.WebService  {

    
public WS1 () {

        
//如果使用设计的组件,请取消注释以下行 
        
//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""hekui168@163.com");
        dt.Rows.Add(
"ren""chao""chaoren888@163.com");

        
return dt;
    }

}


WEB服务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>
/// WS 的摘要说明
/// </summary>

[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo 
=  WsiProfiles.BasicProfile1_1)]
[ScriptService]
public   class  WS : System.Web.Services.WebService  {

    
public WS () {

        
//如果使用设计的组件,请取消注释以下行 
        
//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";
        }

    }


}


二、前台页面:
注意要点:
需要使用的后台WebService的方法均设置在如下位置

         < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
            
< Services >
                
< asp:ServiceReference  Path ="~/WS.asmx"   />
                
< asp:ServiceReference  Path ="~/WS1.asmx"   />
            
</ Services >
        
</ asp:ScriptManager >

Default页面:

<% @ 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 >

三、JavaScript程序:
注意要点:
AJAX November CTP 需要用 eval() 方法将其转换成一个DataTable对象(并且要裁掉最前面的"("),而AJAX December CTP 支持以下方法转换“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) 
                         
{
                            
// 获取到下拉框控件
                            var List = document.getElementById("ddl1"); 
                                                       
                            
//AJAX November CTP 需要用 eval() 方法将其转换成一个DataTable对象(并且要裁掉最前面的"(")
                            var Text= result.dataArray.substring(,result.dataArray.length -1);            
                            
var Table = eval( Text);
                            
                            
//AJAX December CTP 支持以下方法转换
//
                            var Table = Sys.Preview.Data.DataTable.parseFromJson(result);
                            
                            
//清除下拉框原有列表项
                            for (x=List.options.length-1; x > -1; x--
                            
{
                                List.remove(
);
                            }

                            
                            
//从获取的DataTable添加数据到下拉框列表项
                            for (x=; x < Table.length; x++ )
                            
{
                                
//获取每一行
                                var Row = Table[x];          
                                
//创建一个列表项                  
                                var option = document.createElement("option"); 
                                
//列表项显示文本赋值
                                option.text = Row.Name + " " + Row.LastName;   
                                
//列表项选项值赋值
                                option.value = Row.Email;                      

                                
//判断浏览器类型,进行项目添加     
                                if ( window.navigator.appName.toLowerCase().indexOf("microsoft"> -1
                                   List.add(option);  
                                
else
                                   List.add(option, 
null);          
                            }

                         }

                       );
    }

示例代码:/Files/heekui/AJAXStudy.rar

 

   < 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 >

 


原文链接:http://blog.csdn.net/21aspnet/article/details/1536769
加载中
返回顶部
顶部