利用JQuery的.getJSON给Dropdownlist绑定Item

1、首先建立以个.ashx文件（Generic Handler）,在此文件中生成JSON数据。

 

代码

 1  using  System;
 2  using  System.Web;
 3  using  System.Data;
 4  using  System.Text;
 5 
 6  public   class  EmployeeLoad : IHttpHandler {
 7      
 8       public   void  ProcessRequest (HttpContext context) {
 9 
10          StringBuilder sb  =   new  StringBuilder();
11          DataTable dt  =   new  DataTable();
12          dt  =  FetchEmployeeInfo().Tables[ 0 ];
13           if  (dt  ==   null )
14               return ;
15           if  (dt.Rows.Count  ==   0 )
16          {
17               return ;
18          }
19           else
20          {           
21             sb.Append( " [ " );         
22               for ( int  i = 0 ;i < dt.Rows.Count;i ++ )
23             {
24                 sb.Append( " {\ " ID\ " :\ ""  + dt.Rows[i][ " ID " ].ToString() +  " \ " ,\ " Name\ " :\ ""  + dt.Rows[i][ " Name " ].ToString() +  " \ " ,\ " Age\ " : "   +  dt.Rows[i][ " Age " ].ToString()  +   " ,\ " Tel\ " :\ ""  + dt.Rows[i][ " Tel " ].ToString() +  " \ " }, " );
25             }
26              
27              sb.Remove(sb.Length  -   1 ,  1 );
28              sb.Append( " ] " );
29          }
30          
31          
32          context.Response.ContentType  =   " application/json " ;
33          context.Response.ContentEncoding  =  Encoding.UTF8;
34          context.Response.Write(sb.ToString());
35      }
36   
37       public   bool  IsReusable {
38           get  {
39               return   false ;
40          }
41      }
42 
43       public  DataSet FetchEmployeeInfo()
44      {
45          DataSet ds  =   new  DataSet();
46          DataTable dt  =   new  DataTable();
47          dt.Columns.Add( " ID " ,  typeof ( string ));
48          dt.Columns.Add( " Name " ,  typeof ( string ));
49          dt.Columns.Add( " Age " ,  typeof ( int ));
50          dt.Columns.Add( " Tel " ,  typeof ( string ));
51 
52           // DataRow dr;
53 
54          DataRow dr  =  dt.NewRow();
55          dr[ " ID " ]  =   " 1111 " ;
56          dr[ " Name " ]  =   " Jim Hui " ;
57          dr[ " Age " ]  =   29 ;
58          dr[ " Tel " ]  =   " 15962557701 " ;
59          dt.Rows.Add(dr);
60 
61          dr  =  dt.NewRow();
62          dr[ " ID " ]  =   " 2222 " ;
63          dr[ " Name " ]  =   " Kevin Lee " ;
64          dr[ " Age " ]  =   35 ;
65          dr[ " Tel " ]  =   " 15962557702 " ;
66          dt.Rows.Add(dr);
67 
68 
69 
70          ds.Tables.Add(dt);
71           return  ds;
72 
73      }
74 
75  }

 

2、其次在前台调用ashx文件中生成的数据

  

 

 

代码

 1  < script type = " text/javascript "  src = " JavaScript/jquery-1.3.2.js " >< / script>
 2       < script language = " javascript "  type = " text/javascript " >
 3        $(document).ready( function (){
 4          BindDropDownList();       
 5          });
 6           function   BindDropDownList()
 7          {
 8              $( " #DropDownList1 " ).html( "" );                     
 9              $.getJSON( " EmployeeLoad.ashx " , null , function (json){
10              $.each(json, function (i){$( " #DropDownList1 " ).append($( " <option></option> " ).val(json[i].ID).html(json[i].Name))});
11              });
12              $( " <option></option> " ).val( "" ).html( "" ).appendTo( " #DropDownList1 " );
13              
14          }
15       < / script>

 

 

这样就OK了。

 

 

   注意：

         1、要调试ashx代码，需要安装VS2005 SP1,即使有sp2也不可以的。

  　　 2、Dropdownlist增加空白选项是：$("<option></option>").val("").html("").appendTo("#DropDownList1")；