基于ASP.NETAJAX的级联菜单

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

刚接触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>