asp.net 开发 跬步篇(2) JQuery +ashx 升级之 JSon
2009-09-28 12:07
387 查看
前一阵看到一断java的代码,想到了.net中 .ashx文件的应用。实践了一下jquery+.ashx 实现分页的代码。贴在了园子里面。很多园子里面的兄弟们都给与了意见,非常感谢!当时我写这个主要也只是验证一种思想,我以前一直作winform的开发,转到web这边也就1年的时间吧。一直在用web控件、虽然它的这种编程的方式很熟悉,很容易理解,但是总感觉不是很爽,感觉交互上不是很好,总刷、刷的。在逐渐学习中。慢慢发现了web的知识面真的很大,并不是说熟练的c#语言运用就足够的。c#只是web实现的一个语言而已,本身有优点,但是也有与其它语言相比的不足,我这里特指的javascript。还有现在流行的一些javascript的框架,真是很强大。我的废话真是多啊~ -0-!
言归正传,今天我要说的是在 jquery+.ashx 实现分页的基础上,说一下JSon的应用,当时很多兄弟都说了JSON的好处,以前我也只是在返回简单的单个对象上用。这次,说一下返回JSON数据集和。
还是以实际项目功能来说。我的一个项目上,需要一个无刷新得到客户联系人集合的功能,也就是在页面上客户信息动态的前提下,在选中客户的时候无刷新的调取联系人集合信息,并以列表的形式显示出来。
首先,我想到了用div承载联系人table 控制。用.ashx请求服务器数据集合、然后在服务端生成table字符串。返回该字符串后用javascript脚本控制div的innerHtml的内容。大概思路没什么大的出入,可能在实现方式上每个人有不同的看法。结合一些建议,决定用 JQuery+.ashx+JSON 来实现。
代码实现上,有几个部分
1、.ashx 文件的编写;
2、js 文件控制JSon绑定客户端Table的。
3、页面请求。
.ashx的实现、没什么大的问题,也就是c#服务端代码取到数据。下面贴出主要的代码
function btnGetContacts_onclick(btn, custid) {
$.get("../请求路径", {cust_id: custid, info_type: "contact_list"}, function (jsonstr) {
var arrContact;
try {
arrContact = eval(jsonstr);
} catch (e) {
arrContact = new Array();
};
listContacts(arrContact, btn, custid);
});
}
function contactToRow(tb, contact, cust_id) {
var tr = tb.insertRow(-1);
tr.onclick = "revisit('" + cust_id + "', '" + contact.contact_id + "', '" + contact.contact_name + "', '" + contact.phone_no + "')";
tr.insertCell(-1).innerHTML = contact.contact_name ? contact.contact_name : " ";
tr.insertCell(-1).innerHTML = contact.job_name ? contact.job_name : " ";
tr.insertCell(-1).innerHTML = contact.phone_no ?
("<a style='cursor:pointer' onclick=\"revisit('" + cust_id + "', '"
+ contact.contact_id + "', '" + contact.contact_name + "', '"
+ contact.phone_no + "')\">" + contact.phone_no + "</a>")
: " ";
tr.insertCell(-1).innerHTML = contact.phone_type_name ? contact.phone_type_name : " ";
}
function listContacts(arrContact, btn, cust_id) {
var tb = document.getElementById("tbodyContact");
if (!tb) return;
while(tb.rows.length > 0) {
tb.deleteRow(0);
}
for (var i = 0; i < arrContact.length; i ++) {
contactToRow(tb, arrContact[i], cust_id);
}
try {
} catch (e) {
}
showContacts(btn);
}
function hideContacts() {
var pnl = document.getElementById("pnlContactList");
if (pnl) {
pnl.style.display = "none";
}
}
function showContacts(btn) {
if (!btn) return;
var pnl = document.getElementById("pnlContactList");
if (pnl) {
e = btn;
pnl.t = e.offsetTop;
pnl.l = e.offsetLeft;
while (e = e.offsetParent) {
pnl.t += e.offsetTop;
pnl.l += e.offsetLeft;
}
pnl.t += btn.offsetHeight;
pnl.style.top = pnl.t + "px";
pnl.style.left = pnl.l + "px";
pnl.style.display = "";
}
}
代码中的listContacts、contactToRow 方法完成了页面承载联系人的的Table的html代码的生成。
btnGetContacts_onclick 是触发事件,我是用联系人文本框的onfouce事件触发。这样我只要点击某个联系人的文本框,刷!就会在它的下方出现一个div里面是联系人table。点击div意外的区域,就隐藏这个div。在下次取别的数据的时候,将table清空生成新的table替代。
运行,非常完美..在这就不在贴出图片了,偷懒了。
总结:在这个实例中,我收获最大的就是对JSON的灵活性有一个新的认识。以前知道这个概念,但是也就是简单的用用,一到相对复杂的地方,就喜欢用自己熟悉的c#来解决,在实用后发现它也不麻烦,就是一个怎么用过的过程。建议各位学习的兄弟这个东东必须学会啊,因为它真的很实用。哈哈。
其它的 就是.net的 ashx文件的使用、jquery框架的熟练。
最后我觉得编程还真实一件很艺术的事情啊。这个才算是一个真正的web程序吧。
以上都是个人认识,有什么不对的,或者更好、更高效的方法、技术、请兄弟们指正、交流!
言归正传,今天我要说的是在 jquery+.ashx 实现分页的基础上,说一下JSon的应用,当时很多兄弟都说了JSON的好处,以前我也只是在返回简单的单个对象上用。这次,说一下返回JSON数据集和。
还是以实际项目功能来说。我的一个项目上,需要一个无刷新得到客户联系人集合的功能,也就是在页面上客户信息动态的前提下,在选中客户的时候无刷新的调取联系人集合信息,并以列表的形式显示出来。
首先,我想到了用div承载联系人table 控制。用.ashx请求服务器数据集合、然后在服务端生成table字符串。返回该字符串后用javascript脚本控制div的innerHtml的内容。大概思路没什么大的出入,可能在实现方式上每个人有不同的看法。结合一些建议,决定用 JQuery+.ashx+JSON 来实现。
代码实现上,有几个部分
1、.ashx 文件的编写;
2、js 文件控制JSon绑定客户端Table的。
3、页面请求。
.ashx的实现、没什么大的问题,也就是c#服务端代码取到数据。下面贴出主要的代码
function btnGetContacts_onclick(btn, custid) {
$.get("../请求路径", {cust_id: custid, info_type: "contact_list"}, function (jsonstr) {
var arrContact;
try {
arrContact = eval(jsonstr);
} catch (e) {
arrContact = new Array();
};
listContacts(arrContact, btn, custid);
});
}
function contactToRow(tb, contact, cust_id) {
var tr = tb.insertRow(-1);
tr.onclick = "revisit('" + cust_id + "', '" + contact.contact_id + "', '" + contact.contact_name + "', '" + contact.phone_no + "')";
tr.insertCell(-1).innerHTML = contact.contact_name ? contact.contact_name : " ";
tr.insertCell(-1).innerHTML = contact.job_name ? contact.job_name : " ";
tr.insertCell(-1).innerHTML = contact.phone_no ?
("<a style='cursor:pointer' onclick=\"revisit('" + cust_id + "', '"
+ contact.contact_id + "', '" + contact.contact_name + "', '"
+ contact.phone_no + "')\">" + contact.phone_no + "</a>")
: " ";
tr.insertCell(-1).innerHTML = contact.phone_type_name ? contact.phone_type_name : " ";
}
function listContacts(arrContact, btn, cust_id) {
var tb = document.getElementById("tbodyContact");
if (!tb) return;
while(tb.rows.length > 0) {
tb.deleteRow(0);
}
for (var i = 0; i < arrContact.length; i ++) {
contactToRow(tb, arrContact[i], cust_id);
}
try {
} catch (e) {
}
showContacts(btn);
}
function hideContacts() {
var pnl = document.getElementById("pnlContactList");
if (pnl) {
pnl.style.display = "none";
}
}
function showContacts(btn) {
if (!btn) return;
var pnl = document.getElementById("pnlContactList");
if (pnl) {
e = btn;
pnl.t = e.offsetTop;
pnl.l = e.offsetLeft;
while (e = e.offsetParent) {
pnl.t += e.offsetTop;
pnl.l += e.offsetLeft;
}
pnl.t += btn.offsetHeight;
pnl.style.top = pnl.t + "px";
pnl.style.left = pnl.l + "px";
pnl.style.display = "";
}
}
代码中的listContacts、contactToRow 方法完成了页面承载联系人的的Table的html代码的生成。
btnGetContacts_onclick 是触发事件,我是用联系人文本框的onfouce事件触发。这样我只要点击某个联系人的文本框,刷!就会在它的下方出现一个div里面是联系人table。点击div意外的区域,就隐藏这个div。在下次取别的数据的时候,将table清空生成新的table替代。
运行,非常完美..在这就不在贴出图片了,偷懒了。
总结:在这个实例中,我收获最大的就是对JSON的灵活性有一个新的认识。以前知道这个概念,但是也就是简单的用用,一到相对复杂的地方,就喜欢用自己熟悉的c#来解决,在实用后发现它也不麻烦,就是一个怎么用过的过程。建议各位学习的兄弟这个东东必须学会啊,因为它真的很实用。哈哈。
其它的 就是.net的 ashx文件的使用、jquery框架的熟练。
最后我觉得编程还真实一件很艺术的事情啊。这个才算是一个真正的web程序吧。
以上都是个人认识,有什么不对的,或者更好、更高效的方法、技术、请兄弟们指正、交流!
相关文章推荐
- (0)ASP.NET Core 简单介绍 和开发环境搭建 - ASP.NET从MVC5升级到MVC6
- Asp.net Web Api开发(第二篇)性能:使用Jil提升Json序列化性能
- 软件开发平台正在面临一次重大的升级,java, net比起来简直弱爆了,新型的Html5+JS+JSON开发平台正在形成
- ASP.NET MVC 网站开发总结(六)——简谈Json的序列化与反序列化
- 本周ASP.NET英文技术文章推荐[09/30- 07/13]:.NET Framework、JSON、Google Analytics、文件上传、GridView、IIS 7、Web开发
- ASP.NET中JSON的序列化和反序列化(EasyUI开发必须用到的JSON)
- asp.net 开发 跬步篇〔3〕.net 邮件批量发送
- Asp.Net开发的WebService输出JSON格式
- asp.net 开发 跬步篇〔1〕_ajax web页面复杂处理延时、客户交互问题
- Json在asp.net开发中的应用
- Newtonsoft.Json 为asp.net 3.5开发的
- jQuery Ajax 调用 ASP.NET WebServices + (POST)->JSON 数据传递,一种开发高效的模式
- 【收藏】本周ASP.NET英文技术文章推荐[09/30- 07/13]:.NET Framework、JSON、Google Analytics、文件上传、GridView、IIS 7、Web开发
- Asp.net开发环境的设置所遇到的问题
- 使用ASP.NET MVC、Rabbit WeixinSDK和Azure快速开发部署微信后台
- Asp.net 2.0 自定义控件开发[实现自动计算功能(AutoComputeControl)][示例代码下载][续]
- Asp.NET Socket开发之异步Socket
- 今天用MongoDB给用户做了个小插件,借鉴于实战开发 【零基础学习,附完整Asp.net示例】 写的非常不错
- 同事间闲聊,如何成为优秀架构师?如何才能快速能成为C#ASP.NET开发高手?
- ASP.NET Core开发-读取配置文件Configuration