您的位置:首页 > Web前端 > JQuery

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程序吧。

以上都是个人认识,有什么不对的,或者更好、更高效的方法、技术、请兄弟们指正、交流!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐