基于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>
<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 ICollection<Article> 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().Cast<Article>().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; i < result.length; i++) {
var option = document.createElement("OPTION");
//直接通过属性访问数据
option.value = result[i].Id;
option.text = result[i].Name;
ddl.options.add(option);
}
}
</script>
搞定。。。。
