ASP.NET - 用 Ajax 取得 DataTable

發表於 | 更新於 | 分類於

網路上看到的覺得還滿特別的。資料是DataTable 不用經過JSON.NET拋到前端

或許JSON.NET底層也是用這種方式做的也說不定

1
2
3
<input type="button" id="show2" value="Get" />
<div id="Div1"></div>
<div id="Div2"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
//WebForm1.aspx
$(document).ready(function () {
    $('#show2').click(function () {
        $.ajax({
            type: "post",
            url: "WebForm1.aspx/GetData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var mydts = response.d.mydt;
                $('#Div1').html(BuildDetails(mydts));
                $('#Div2').html(BuildTable(mydts));
            },
            failure: function () {
                alert("error")
            }
        });
    });
});
function BuildDetails(dataTable) {
    var content = [];
	for (var row in dataTable) {
        for (var column in dataTable[row]) {
            content.push("<tr>")
            content.push("<td><b>")
            content.push(column)
            content.push("</td></b>")
            content.push("<td>")
            content.push(dataTable[row][column])
            content.push("</td>")
            content.push("</tr>")
        }
    }
    var top = "<table border='1' class='dvhead'>";
    var bottom = "</table>";
    return top + content.join("") + bottom;
}

function BuildTable(dataTable) {
    var headers = [];
	var rows = [];
	//column
	headers.push("<tr>");
	for (var column in dataTable[0])
		headers.push("<td><b>" + column + "</b></td>");
	headers.push("</tr>");
	//row
	for (var row in dataTable) {
        rows.push("<tr>");
		for (var column in dataTable[row]) {
            rows.push("<td>");
			rows.push(dataTable[row][column]);
			rows.push("</td>");
		}
		rows.push("</tr>");
    }
	var top = "<table border='1' class='gvhead'>";
	var bottom = "</table>";
	return top + headers.join("") + rows.join("") + bottom;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//WebForm1.aspx.cs
private static Dictionary<string, object> ToJson(DataTable table)
{
    Dictionary<string, object> d = new Dictionary<string, object>();
    d.Add(table.TableName, RowsToDictionary(table));
    return d;
}

private static List<Dictionary<string, object>> RowsToDictionary(DataTable table)
{
    List<Dictionary<string, object>> objs = new List<Dictionary<string, object>>();
    foreach ( DataRow dr in table.Rows )
    {
        Dictionary<string, object> drow = new Dictionary<string, object>();
        for ( int i = 0; i < table.Columns.Count; i++ )
        {
            drow.Add(table.Columns[i].ColumnName, dr[i]);
        }
        objs.Add(drow);
    }

    return objs;
}

[WebMethod]
public static Dictionary<string, object> GetData()
{
    DataTable dt = new DataTable();
    dt.TableName = "mydt";
    dt.Columns.Add("NAME", typeof(string));
    dt.Columns.Add("AGE", typeof(string));
    dt.Columns.Add("REMARK", typeof(string));

    for ( int i = 0; i < 1; i++ )
    {
        DataRow dr = dt.NewRow();
        dr["NAME"] = "rico" + i.ToString();
        dr["AGE"] = i.ToString();
        dr["REMARK"] = "test_" + i.ToString();
        dt.Rows.Add(dr);
    }

    return ToJson(dt);
}

[C#][ASP.NET]利用jQuery.ajax取得ASP.NET DataTable

0%