基于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>

搞定。。。。