利用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")；