【asp.net小札记】jquery+ajax绑定数据库显示table

来源：互联网发布：恒鸿达软件编辑：程序博客网时间：2024/05/20 16:42

原文来自：http://kb.cnblogs.com/page/74416/

前台：

<%@ 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 src="jquery-1.4.min.js" type="text/javascript"></script>    <script type="text/javascript" src="json2.js"></script>    <script type="text/javascript">        $(function () {            $("#button1").click(function () {                var url = "Default.aspx?ajax=1";                var dtb = generateDtb();                //序列化对象                var postdata = JSON.stringify(dtb);                //异步请求                $.post(url, { json: postdata }, function (json) {                                        createTable(json);                }, "json")            });        });        //删除选中行        $(function () {            $("#button2").click(function () {                if ($(":checked").length == 0) alert("请选择行");                $(":checked").parent().parent().remove();            });        });        //生成DataTable对象        function generateDtb() {            var dtb = new Array();            for (var i = 0; i < 10; i++) {                var row = new Object();                row.col1 = i;                row.col2 = i % 2 == 0 ? true : false;                row.col3 = i + "hello";                dtb.push(row);            }            return dtb;        }        //显示json中的数据        function createTable(json) {            var table = $("<table border='1'><tr><td>选择</td><td>td1</td><td>td2</td><td>td3</td></tr></table>");            for (var i = 0; i < json.length; i++) {                o1 = json[i];                var row = $("<tr></tr>");                $("<td><input id='Checkbox"+i+"' type='checkbox' /></td>").appendTo(row);                for (key in o1) {                    var td = $("<td></td>");                    td.text(o1[key].toString());                    td.appendTo(row);                }                row.appendTo(table);            }            table.appendTo($("#back"));        }    </script></head><body>    <form id="form1" runat="server">    <div>        <input id="button1" type="button" value="生成表格" />        <input id="button2" type="button" value="删除选中行" />        <div id="back">        </div>    </div>    </form></body></html>

后台：

using System;using System.Collections.Generic;using System.Collections;using System.Linq;using System.Web;using System.Web.UI;using System.Data;using System.Data.SqlClient;using System.Web.UI.WebControls;using System.Web.Script.Serialization;/* *  * * 查询数据库,生成Table * 可以删除选中行 *  *  */public partial class _Default : System.Web.UI.Page{    protected void Page_Load(object sender, EventArgs e)    {        if (Request.QueryString["ajax"] == "1")        {            ProcessRequest();        }    }    private void ProcessRequest()    {        Response.ContentType = "text/html";        string json = Request.Form["json"];        //反序列化datatable        DataTable newdtb = Json2DataTable(json);        //序列化datatable为json        string back = DataTable2Json(newdtb);                        Response.Write(back);        Response.End();    }    /// <summary>    /// 将DataTable转化成json格式    /// </summary>    /// <param name="dtb"></param>    /// <returns></returns>    private string DataTable2Json(DataTable dtb)    {        JavaScriptSerializer jss = new JavaScriptSerializer();        ArrayList dic = new ArrayList();        foreach (DataRow row in dtb.Rows)        {            Dictionary<string, object> drow = new Dictionary<string, object>();            foreach (DataColumn col in dtb.Columns)            {                drow.Add(col.ColumnName, row[col.ColumnName]);            }            dic.Add(drow);        }        return jss.Serialize(dic);    }    /// <summary>    /// 将Json数据转化成DataTable    /// </summary>    /// <param name="json"></param>    /// <returns></returns>    private DataTable Json2DataTable(string json)    {        JavaScriptSerializer jss = new JavaScriptSerializer();        ArrayList list = jss.Deserialize<ArrayList>(json);        DataTable dtb = new DataTable();        if (list.Count > 0)        {            foreach (Dictionary<string, object> dic in list)            {                if (dtb.Columns.Count == 0)                {                    foreach (string key in dic.Keys)                    {                        dtb.Columns.Add(key, dic[key].GetType());                    }                }                DataRow row = dtb.NewRow();                foreach (string key in dic.Keys)                {                    row[key] = dic[key];                }                dtb.Rows.Add(row);            }        }        return dtb;    }}