基于ASP.NET AJAX 的级联菜单

======================================================

注：本文源代码点此下载

======================================================

刚接触ajax的时候,觉得它太神奇了,把每提交一次就要刷新、整个页面抖动一下的网页变的和桌面程序一样,不再刷新,不再抖动。
因此我对它产生了莫大的好感,我喜欢在网页中的某个角落落下它的身影。而且,它的使用是如此的简单,仅仅需要拖两个控件,就能发挥它的神奇功效,何乐而不为。
但是不久后,当我知道这种直接拖控件的方法并不是真正的局部回传,我对我原先的做法立刻产生了排斥心理,我不喜欢这种骗人眼球的东西。
前几天抽空看了几篇webcast上的ajax教程,收获不小,终于掌握了不用updatepanel控件的ajax使用方式,虽然只是碰到了ajax的一点门道,但至少实现了真是的局部回传。在此分享一下小小的成果。
首先需要有级联关系的数据,简单点:这里就用物品类型表(type)物品表(articles)吧。
确保已经安装as.net ajax,新建一个空的网站,添加一个新页面。拖两个下拉列表控件(select),body内代码如下
body>
form id="form1" runat="server">
div>
select id="ddltype" name="d1" runat ="server">
option>option>
select id="ddlarticle" name="d2">
option>option>
select>
div>
form>
body>
ddltype加上runat ="server"属性,在页面载入时就获取物品类型数据。。
接下来编写通过物品类型id获取物品列表的webservice,代码如下
//以下属性必须
[system.web.script.services.scriptservice]
public class webser : system.web.services.webservice
{
public webser()
{
}
//如果返回类型dataset这样的复杂类型(引用套引用),需要在web。config文件中进行配置。
//ariticle类只包含简单数据类型
[webmethod]
public icollectionarticle> getarticles(int typeid)
{
companyentities ne = new companyentities();
var result = from p in ne.articles
where p.type.id == typeid
select new article
{
id = p.id,
name = p.name
};
return result.asenumerable().castarticle>().tolist();
}
}
接下来在页面中添加scriptmanager控件,并添加刚才编写的webservice的引用,之后页面代码如下
body>
form id="form1" runat="server">
asp:scriptmanager id="scriptmanager1" runat="server">
services>
asp:servicereference path="webservice.asmx" />
services>
asp:scriptmanager>
div>
select id="ddltype" name="d1" runat ="server" >
option>option>
select>
select id="ddlarticle" name="d2">
option>option>
select>
div>
form>
body>
编写js代码,编写下拉列表的事件函数与客户端访问webservice获取数据的代码
script type ="text/javascript" >
//getarticles为ddltype的onchange事件函数
function getarticles(ddl) {
var id = ddl.options[ddl.selectedindex].value;
//webser为webservice的类名,
//getarticles为webser类中的函数名
//getarticlessucceed为调用成功后调用的回调函数
webser.getarticles(id, getarticlessucceed);
}
//成功返回后,参数result应该为一个数组
function getarticlessucceed(result) {
var ddl = document.getelementbyid("ddlarticle");
ddl.options.length = 0;
for (i = 0; iresult.length; i++) {
var option = document.createelement("option");
//直接通过属性访问数据
option.value = result[i].id;
option.text = result[i].name;
ddl.options.add(option);
}
}
/script>
搞定。。。。

======================================================

在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/