Json.Net Demo2

浏览数：29 / 时间：2015年06月09日

新建一个空的Web项目，名称JsonServer，该网页实现Ajax数据请求和响应。

添加Newtonsoft.Json.dll的Dll引用，添加JQuery API文件，目录结构如下：

新建一个Person类

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 /// <summary>
 7 ///Person 的摘要说明
 8 /// </summary>
 9 /// <summary>
10 /// 包含用户的基本信息
11 /// </summary>
12 public class Person
13 {
14     /// <summary>
15     /// 获取或设置用户名
16     /// </summary>
17     public string Name { get; set; }
18 
19     /// <summary>
20     /// 获取或设置用户年龄
21     /// </summary>
22     public int Age { get; set; }
23 
24     /// <summary>
25     /// 获取或设置用户性别
26     /// </summary>
27     public string Gender { get; set; }
28 
29     /// <summary>
30     /// 获取或设置用户国籍
31     /// </summary>
32     public string Country { get; set; }
33 
34     /// <summary>
35     /// 获取或设置用户电子邮箱
36     /// </summary>
37     public string Email { get; set; }
38 }

Person

新建一个数据操作类PersonRepository

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 /// <summary>
 7 ///Class1 的摘要说明
 8 /// </summary>
 9 /// <summary>
10 /// 用户操作类
11 /// </summary>
12 public class PersonRepository
13 {
14     /// <summary>
15     /// 获取用户列表
16     /// </summary>
17     /// <returns>所有用户信息</returns>
18     public static List<Person> GetPersons()
19     {
20         List<Person> ps = new List<Person>();
21         Person p1 = new Person { Name = "Tom", Age = 32, Country = "US", Gender = "Male", Email = "[email protected]" };
22         Person p2 = new Person { Name = "Jack", Age = 23, Country = "UK", Gender = "Male", Email = "[email protected]" };
23         Person p3 = new Person { Name = "Eden", Age = 25, Country = "Canada", Gender = "Female", Email = "[email protected]" };
24         Person p4 = new Person { Name = "Li Hua", Age = 29, Country = "China", Gender = "Male", Email = "[email protected]" };
25         Person p5 = new Person { Name = "Lvo", Age = 40, Country = "US", Gender = "Male", Email = "[email protected]" };
26         ps.Add(p1);
27         ps.Add(p2);
28         ps.Add(p3);
29         ps.Add(p4);
30         ps.Add(p5);
31         return ps;
32     }
33 }

PersonRepository

新建一个一般处理程序PersonHandler

 1 <%@ WebHandler Language="C#" Class="PersonHandler" %>
 2 
 3 using System;
 4 using System.Web;
 5 using System.Collections.Generic;
 6 using Newtonsoft.Json;
 7 /// <summary>
 8 /// 处理用户类的请求
 9 /// </summary>
10 public class PersonHandler : IHttpHandler
11 {
12 
13     public void ProcessRequest(HttpContext context)
14     {
15         List<Person> persons = PersonRepository.GetPersons();
16         string json = JsonConvert.SerializeObject(persons);
17         context.Response.Write(json);
18     }
19 
20     public bool IsReusable
21     {
22         get
23         {
24             return false;
25         }
26     }
27 }

PersonHandler

添加一个Demo.html页面：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <div>
10         <table border="1">
11             <thead>
12                 <tr>
13                  <td>
14                         用户名
15                     </td>
16                  <td>
17                         年龄
18                     </td>
19                  <td>
20                         性别
21                     </td>
22                  <td>
23                         国籍
24                     </td>
25                  <td>
26                         电子邮箱
27                     </td>
28                 </tr>
29             </thead>
30             <tbody id="personBody">
31             </tbody>
32         </table>
33     </div>
34 
35 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
36     <script type="text/javascript">
37         $(function () {
38             $.getJSON("PersonHandler.ashx", function (data, status) {
39                 if (status == "success") {
40                     $.each(data, function (index, item) {
41                         var beginTag = "<tr><td>";
42                         var endTag = "</td></tr>";
43                         var tag = "</td><td>";
44                         $("#personBody").append($(beginTag + item.Name + tag + item.Age + tag + item.Gender + tag
45                         + item.Country + tag + item.Email + endTag));
46                     });
47                 }
48             });
49         });
50     </script>
51 
52 </body>
53 </html>