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

 

 

 

搞定。。。。