.Net2.0Ajax调用WebService返回Table

最新推荐文章于 2025-08-13 16:08:36 发布

原创最新推荐文章于 2025-08-13 16:08:36 发布 · 置顶 · 579 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webservice #ajax #table #.net #dataset #server

AjaX学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个WebService与AJAX交互的示例，演示了如何通过WebService返回DataTable，并在前端展示数据。需要配置web.config文件支持JSON序列化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WebService后台代码：

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data;
/// <summary> 
///DataService 的摘要说明 
/// </summary> 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。  
[System.Web.Script.Services.ScriptService]
public class DataService : System.Web.Services.WebService {
    public DataService () {
        //如果使用设计的组件，请取消注释以下行  
        //InitializeComponent();  
    }
    [WebMethod]
    public DataTable GetDataTable(string tableName)
    {
        //设定DataTable的名称 
        DataTable table = new DataTable(tableName);
        //为该DataTable添加两列 
        table.Columns.Add(new DataColumn("Id",typeof(int)));
        table.Columns.Add(new DataColumn("Name",typeof(string)));
        //添加5行 
        for(int i=0;i<5;++i)
        {
            DataRow newRow=table.NewRow();
            newRow["Id"]=i;
            newRow["Name"]=string.Format("name {0}",i);
            table.Rows.Add(newRow);
        }
        return table;
    }    
}

Web窗体前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
        function btnGetDatatable_onclick()
        {
            DataService.GetDataTable("My Table",onSucceeded);
        }
        function onSucceeded(result)
        {
            //Sys.Debug.traceDump(result);
            var idColName=result.columns[0].name;
            var nameColName=result.columns[1].name;
            //得到DataTable中的行集合。
            var rows=result.rows;
            //创建表格头。
            var builder=new Sys.StringBuilder("<table border=1>");
            builder.append(String.format("<tr><td>{0}</td><td>{1}</td></tr>",idColName,nameColName));
            //创建表格内容
            for(var rowIndex=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("</talbe>");
            $get("result").innerHTML=builder.toString();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="dataService" runat="server">
        <Services>
            <asp:ServiceReference Path="~/DataService.asmx" />
        </Services>
    </asp:ScriptManager>
    <input id="btnGetDataTable" type="button" value="get Table" onclick="return btnGetDatatable_onclick()" />
    <div id="result">
    </div>
    </form>
</body>
</html>

程序中要添加Microsoft.Web.Preview.dll引用并且在Asp.net 2.0里可以直接用DataTable作为返回类型了，但是需要在Web.config文件添加序列化转换器的属性。DataSet、DataTable、DataRow均有转换器。

web.config代码如下：

在web.config中的 <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> 