基于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^)/