asp.net中使用jquery的ajax来post数据的树控件

简介: 我相信大部门的.net开发人员还在完全使用asp.net框架开发或者有一部分人是asp.net和asp.net mvc项目都有在做。对于传统的asp.net如果要有好的体验,那么ajax效果当然不可少。

我相信大部门的.net开发人员还在完全使用asp.net框架开发或者有一部分人是asp.net和asp.net mvc项目都有在做。对于传统的asp.net如果要有好的体验,那么ajax效果当然不可少。。。

我刚才问了一个同事,我说现在我要在asp.net中前台页面要后台传过来json格式的数据,你觉得我用哪种方式好,回答很肯定是Ihttphandler

image

 

我完全同意。。。那json对象的转化工具你选择什么呢? Newtonjson。。。好主意。。而且我也很喜欢这个序列化反序列化库。

http://json.codeplex.com/  这个东西可能你也用过好多次了。。。

甚至借助nuget,你都不需要去麻烦的下载这个类库。。。

image

 

 

大部分问题都解决了,该选择一个jquery tree控件了。我首先想到的是jstree.相信你用过它的话,肯定会喜欢上它的.很不幸的是它不兼容IE9……………………………

可能有些人用过这个树控件,http://code.google.com/p/jquerytree/ 名字是ZTree,国人写的,虽然写的差点,但是兼容性方面还是不错的。。。值得表扬。。。微笑

 

因为涉及到异步传输数据,我试着找到它的ajax方法调用,发现其实这块写的不大合理,作者主要是针对php和jsp写的,所以接收数据的方式对于我们asp.neter来说不大适用。。。修要修改它的ajax方式如下:

image

 

 

 

这样试着做出来一个例子,还算挺快的。。。不过试着想想,我是不是应该有更好更简单的方式?

我当时其实已经有另一种实现方式了。 我给那个同事说,我有一方式,咱俩试试看谁先实现功能。O(∩_∩)O~

 

1.创建一个asp.net 3.5的解决方案。添加default.aspx,jquery.ztree-2.6.js以及样式文件。

 

2.添加两个引用:

image

 

没错,我会适用webmethod往前台post数据,适用.net自己的类来把数据集序列化成json对象。这时候他还在下载newton.json添加

xxx.ashx呢。

3.创建一个web方法:

image

 

 

4.适用jquery的ajax来拿数据。。。

因为ZTree已经封装好了ajax方法,我们只需要把url传给它就OK了。

image

 

运行试试能否拿到数据:

image

 

如果某个节点是父节点,那么ajax请求时,会往服务器端传过去当前的id和name等,后台会查询到对应的子集,然后再以json格式返回来。。

 

 

 

 

 

 

 

 

 

 

image

显示结果:

image

目录
相关文章
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
70 1
|
7月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
88 0
|
4月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
51 8
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
50 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
7月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
55 1
|
3月前
|
开发框架 JavaScript 前端开发
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
35 0
|
4月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
7月前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
131 1