如何在 asp.net 中使用 JSON 和 JQuery 从 WebMethod 返回 DataTable?

Posted

技术标签:

【中文标题】如何在 asp.net 中使用 JSON 和 JQuery 从 WebMethod 返回 DataTable?【英文标题】:How to Return DataTable from WebMethod using JSON and JQuery in asp.net? 【发布时间】:2013-12-17 22:49:27 【问题描述】:

我是JSON 的新手。我创建了一个示例,它从WebMethod 返回String,并将返回的值分配给asp.net Label 控件。

返回字符串的示例 JSON:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() 
        $.ajax(
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "JSONSample.aspx/DisplayData",
            data: "",
            dataType: "json",
            success: function(data) 
                //alert("hi");
                $("#ctl00_MainContent_lbltxt").text(data.d);
            ,
            error: function(result) 
                alert("Error");
            
        );
    );
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

<label id="lbltxt" runat="server"></label>
</asp:Content>

在.cs文件中(返回字符串):

[WebMethod]
    public static string DisplayData()
    
        return DateTime.Now.ToString();
    

这很好用。

如何使用JSONJQuery访问DataTable

[WebMethod]
    public static DataTable DisplayData()
    
        DataTable dt = new DataTable();
        return dt.GetData();
    

我想返回 DataTable 并使用 JSON 和 JQuery 绑定 GridView/访问DataTable 的每一行。请使用JSON 向我建议Return DataTable 的正确方法。

我看到了一些使用handlers 的示例和一些使用WebMethod 的示例。使用哪一个?

两者相比有什么好处。

帮助赞赏!

【问题讨论】:

【参考方案1】:

这是我通常的做法。我将DataTable 内容加载到字典中,对其进行序列化,一切正常。您可以修改代码以满足您的需要。

[WebMethod]
public string GetQueryInfo()

    String daresult = null;
    DataTable yourDatable = new DataTable();
    DataSet ds = new DataSet();
    ds.Tables.Add(yourDataTable);
    daresult = DataSetToJSON(ds);
    return daresult;


public string DataSetToJSON(DataSet ds)

    Dictionary < string, object > dict = new Dictionary<string, object>();
    foreach(DataTable dt in ds.Tables) 
        object[] arr = new object[dt.Rows.Count + 1];

        for (int i = 0; i <= dt.Rows.Count - 1; i++) 
            arr[i] = dt.Rows[i].ItemArray;
        

        dict.Add(dt.TableName, arr);
    

    JavaScriptSerializer json = new JavaScriptSerializer();
    return json.Serialize(dict);

在您的 aspx 上。

$.ajax(
    type: "POST",
    url: 'Webservices/GetQueryInfo',
    data: ,
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    success: function (data) 
        var objdata = $.parseJSON(data.d);
        // now iterate through this object's contents and load your gridview
    
);

有很多关于如何使用 JavaScript 或 jquery 加载网格视图的教程。这至少会给你一个起点。您可以找到一个很好的示例here。要使用GridView 进行CRUD 操作,请参阅链接here

【讨论】:

嗨@Abide Masaraure,在进行一些修改后,此代码运行。但是,我无法将 GridView 与此返回的 DataTable 绑定,请您告诉我该怎么做? 我已经用一个你可以参考的链接更新了我的答案。你的 json 返回的对象是什么样子的。如果你仍然不能将行附加到你的网格视图,请告诉我。 哦..在你回复我之前我已经做了同样的事情..!现在,如何传递 CommandName 和 CommandArguments? 我已经在 gmail 上向您发送了一个聊天请求。您需要明确说明您想对这些参数做什么。请记住,因为您会渲染 gridview 客户端,所以服务器有不知道你的 gridview 的当前视图状态了。 好吧,我们为什么不使用chat.***.com/rooms/info/42333/… 我已经创建了它..所以请加入这里..

以上是关于如何在 asp.net 中使用 JSON 和 JQuery 从 WebMethod 返回 DataTable?的主要内容,如果未能解决你的问题,请参考以下文章

带有 jQ​​uery 验证的 ASP.Net MVC Ajax 表单

在Asp.Net Core 3.0中如何使用 Newtonsoft.Json 库序列化数据

如何在 Asp.net Core Web Api 中默认使用 Newtonsoft.Json?

如何使用 Ajax 和 ASP.NET WebMethod 传递 JSON 对象

如何在 Asp.NET Core WEB API 中使用 .Net (C#) 在 Payload 中创建具有自定义 JSON 声明的 JWT 令牌

如何在使用 HttpClient 使用 Asp Net Web Api 的 Asp Net Mvc 中提供实时数据?