这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
前面文章说过下次会给大家介绍详细的基于 web Services 的 JqueryAjax 调用如何把一个 datatable 得数据转化成 JSON 数据, 然后在客户端再通过 json2.js 转化成 javascript 对象。
不过这篇文章的题目我真不知道该怎么起, 如果你因为这个差劲的题目错过这个东西, 那真的很可惜。
我在做这个东西之前参考了不少文章:
http://www.roseindia.net/tutorials/json/parse-message-JSON-JS.shtml
http://www.json.org/js.html
http://funkatron.com/site/comments/safely-parsing-json-in-javascript/
http://docs.jquery.com/Ajax/jQuery.getJSON
http://encosia.com/2009/06/29/never-worry-about-asp-net-ajaxs-d-again/
http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/
http://www.isolutionteam.co.uk/json-jquery-ajax-aspnet-and-c-to-get-ajaxed-data-table-rows-passing-multiple-parameters/
第一步需要做的是如何在 Server 端把一个 datatable 转坏为自己需要的那种格式:
本来想使用. net 的 javascriptSerializer 来完成的 (结合 Genirics 库的 List 等), 但是后来发现使用 NewtonSoft.Json 更加灵活,而且扩展性比较好,甚至在网上有找到一些代码能够现成使用。
先看看我在 Server 端如何实现了 Data 转化:
这里不仅能够转换 Datatable 还有 DataSet, 以后再扩展 JavascriptSerializer 的转换功能。需要注意的是转化的最终结果需要是个 [] 包着的一段字符串. 开始我试着使用 {} 来最终返回 json 为对象,结果在客户端真的是没有头绪根本就无法转换。最后看到一篇文章介绍, 在. net 3.5 中你的 web Services 返回来的结果会自动打包成一个 json 对象, 且名字为 d, 如:{"d":***}. 所以我只有在服务器端的生成一个 array 形式的包。
然后我创建了一个数据库表, 内容如下:
,
定义的 web 方法如下:
Serializer 方法已经在 DNA_JSON 中打包好。它是在 NewtonSoft.Json 的基础转换类基础上扩展的。
第二步是客户端的东西:
首先我们需要用到几个 js, jQuery.js, json2.js 就 OK 了。
上面图所示我们用到了 jQuery 的 ajax 和 JSON。Parse()转换函数。
还有需要注意的是 res.d 它是. net 3.5 默认为你打包好的 json 的属性。如果你使用 framework2.0 就没有这个问题了。
最后是看看如何把这些 ojbect 组成的 array 显示在一个 table 中, 代码如下:
- <script type="text/javascript">
- < !--
- function BuildTable(msg) {
- if ($('#tblResult').length != 0) // remove table if it exists
- {
- $("#tblResult").remove();
- }
- var table = '<table class="table.display"><thead> <tr><th>First Name</th> <th>Last Name</th><th>Email</th></thead> <tbody>';
- for (var i = 0; i <= msg.length - 1; i++) {
- var row = '<tr>';
- row += '<td>' + msg[i].UserName + '</td>';
- row += '<td>' + msg[i].FirstName + '</td>';
- row += '<td>' + msg[i].email + '</td>';
- row += '</tr>';
- table += row;
- }
- table += '</tbody></table>';
- $('#example1').html(table);
- }
- // -->
- </script>
如果还有需要源代码的请留言。接下来我会试着去使用这个方法把一些 jQuery 的 ajax 插件介绍给大家, 然后把一些 datagrid 的插件封装成 asp.net 控件, 这样你就不需要使用微软那笨重的 datagrid 了。
来源: http://www.phperz.com/article/17/0422/286736.html