JQuery Ajax动态生成表格

前言：

　　本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。

目标：

　　a 熟悉简单JQuery Ajax的使用

　　b 了解如何构造基本的Json格式的数据（构建Json也可以通过第三方的dll）

　　c 熟悉下handler的基本用法

1 简单效果图

2 前台代码

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DialogAjax.aspx.cs" Inherits="JQueryTest_DialogAjax" %>

<!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>
    
    <link href="../JQueryUi/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />

    <script src="../JQueryUi/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../JQueryUi/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
    
    <style type="text/css">
        #divTb
        {
            width:800px;
            border:1px solid #aaa;
            margin:0 auto;
        }
        .even{background:#CCCCCC;}
        .odd{background:#FFFFFF;}

    </style>
    
    <script type="text/javascript">

        //获取发布模块类型
        function getModuleInfo() {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "../Handler/TestHandler.ashx?Method=GetModuleInfo",
                //data: { id: id, name: name },
                success: function(json) {
                    var typeData = json.Module;
                    $.each(typeData, function(i, n) {
                        var tbBody = ""
                        var trColor;
                        if (i % 2 == 0) {
                            trColor = "even";
                        }
                        else {
                            trColor = "odd";
                        }
                        tbBody += "<tr class='" + trColor + "'><td>" + n.ModuleNum + "</td>" + "<td>" + n.ModuleName + "</td>" + "<td>" + n.ModuleDes + "</td></tr>";
                        $("#myTb").append(tbBody);
                    });
                },
                error: function(json) {
                    alert("加载失败");
                }
            });
        }

        $(function() {
            getModuleInfo();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divTb">
        <table id="myTb" style=" 100%">
        </table>
    </div>
    </form>
</body>
</html>

3 Handler代码

代码

<%@ WebHandler Language="C#" Class="TestHandler" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Text;

using DataDAL;
using DataEnity;

public class TestHandler : IHttpHandler {
    HttpRequest Request;
    HttpResponse Response;
    
    public void ProcessRequest (HttpContext context) {
        //不让浏览器缓存
        context.Response.Buffer = true;
        context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
        context.Response.AddHeader("pragma", "no-cache");
        context.Response.AddHeader("cache-control", "");
        context.Response.CacheControl = "no-cache";
        context.Response.ContentType = "text/plain";

        Request = context.Request;
        Response = context.Response;

        string method = Request["Method"].ToString();
        System.Reflection.MethodInfo methodInfo = this.GetType().GetMethod(method);
        methodInfo.Invoke(this, null);
    }

    public void GetModuleInfo()
    {
        StringBuilder sb = new StringBuilder();
        string jsonData = string.Empty;
        
        List<Module> lsModule =  ModuleDAL.GetModuleList();

        sb.Append("{\"Module\":[");
        
        for (int i = 0; i < lsModule.Count; i++)
        {
            jsonData = "{\"ModuleNum\":" + "\"" + lsModule[i].ModuleNum + "\"" + ",\"ModuleName\":" + "\"" + lsModule[i].ModuleName + "\"" + ",\"ModuleDes\":" + "\"" + lsModule[i].ModuleDes + "\"" + "},";
            sb.Append(jsonData);
        }
        
        if (lsModule.Count > 0)
            sb = sb.Remove(sb.Length - 1, 1);

        sb.Append("]}");
        Response.Write(sb);
       
    }

    public bool IsReusable
    {
        get {
            return false;
        }
    }

}