ASP.NET 使用JQuery取后台数据并绑定到前台
最近的项目开始要用到JQuery了，但是我JQuery用的好少，做了一个简单的通过Ajax和后台交换数据的demo,预先练习下。
主要是用AJAX调用后台的方法 url: "Default.aspx/GetJosnData", 即页面/方法，方法必须加上[WebMethod]，然后返回Josn，然后前台解析。
[WebMethod]
命名空间 System.Web.Services;
向使用 ASP.NET 创建的 XML Web services 中的某个方法添加此特性后，就可以从远程 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">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript" language="javascript">
function showData() {
$.ajax({
type: "post",
url: "Default.aspx/GetJosnData",
datatype: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
var obj = (eval('(' + data.d + ')')[0]).JosnData;
//循环Josn
$.each(obj, function (i, item) {
//i 序号,item对应的对象
$("#tab1").append("<tr><td> " + i + "</td><td>" + item.ID + " </td><td>" + item.Name + " </td></tr>");
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
</script>
</head>
<body>
<form runat="server">
<div>
<table >
<tr>
<td>
编号
</td>
<td>
ID
</td>
<td>
Name
</td>
</tr>
</table>
<input type="button" value="查询" onclick="showData()" />
</div>
</form>
</body>
</html>然后是后台的
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using System.Text;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetJosnData()
{
string Josn = "";
//先随便构造一个Table
DataTable dt = new DataTable();
dt.Columns.Add("ID");
dt.Columns.Add("Name");
for (int i = 0; i < 3; i++)
{
DataRow dr = dt.NewRow();
dr["ID"] = "编号" + i.ToString();
dr["Name"] = "值" + i.ToString();
dt.Rows.Add(dr);
}
//将DataTable转换成Josn
Josn = DataTableToJson("JosnData", dt);
return Josn;
}
/// <summary>
/// 将DataTble转为Josn数据
/// </summary>
/// <param name="jsonName">Josn名</param>
/// <param name="dt">需要转换的DataTble</param>
/// <returns></returns>
public static string DataTableToJson(string jsonName, DataTable dt)
{
StringBuilder Json = new StringBuilder();
Json.Append("[{\"" + jsonName + "\":[");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Json.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
Json.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":\"" + dt.Rows[i][j].ToString() + "\"");
if (j < dt.Columns.Count - 1)
{
Json.Append(",");
}
}
Json.Append("}");
if (i < dt.Rows.Count - 1)
{
Json.Append(",");
}
}
}
Json.Append("]}]");
return Json.ToString();
}
}