ajax调用后台Datatable - 敬YES

之前遇到的问题，用AjaxPro方式没有实现，后来使用的Jquery .ajax方法调用后台的WebMethod返回的DataTable来实现的。有园友问关于将DataTable转换成JSON格式的疑问，我就简单的写个例子，描述实现过程。

1，新建页面TestAjax2.aspx;

<body>
    <form id="form1" runat="server">
    <input id="btnJson" type="button" value="JSON" />
   <div class="case_input1" id="article">
            <ul>
            </ul>

        </div>
    </form>
</body>

2.添加引用System.Web.Extension.

添加命名空间

using System.Web.Services;
using System.Collections;
using System.Web.Script.Serialization;

3. 在.cs文件中构建WebMethod方法,返回DataTable类型。

[WebMethod]
public static string getDataTable(string cid, string site)
{
     DataSet ds = new UserCase().GetResult(cid, site, string.Empty);
     string s = DTtoJSON(ds.Tables[0]);
     return s.ToString();
}

4.添加方法，将DataTable转换为JSON。

public static string DTtoJSON(DataTable dt)
   {
       JavaScriptSerializer jss = new JavaScriptSerializer();
       ArrayList dic = new ArrayList();
       foreach (DataRow row in dt.Rows)
       {
           Dictionary<string, object> drow = new Dictionary<string, object>();
           foreach (DataColumn col in dt.Columns)
           {
               drow.Add(col.ColumnName, row[col.ColumnName]);
           }
           dic.Add(drow);
       }
       return jss.Serialize(dic);
   }

5.aspx页面中用JQUERY进行AJAX调用。

<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script language="javascript" type="text/javascript">
        $(function () {
            $("#btnJson").click(function () {
                $.ajax({
                    type: "Post",
                    url: "TestAjax2.aspx/getRelatedArticle", //url页面/方法名
                    data: "{'cid':'C0503','site':'TP'}",            //参数 {key/value}
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                             data = jQuery.parseJSON(data.d);
                            $.each(data, function (i, item) {
                              $("#article ul").append('<li><a href="' + item.Href + '" target=_blank>' + item.Title+ '</a></li>')
                            })

                    },
                    error: function (error) {
                        alert(error);
                    }
                });
            })
        })
    </script>

posted on 2011-08-24 18:16 敬YES 阅读(5974) 评论(3) 收藏举报

刷新页面返回顶部