WebService和AngularJS实现模糊过滤查询

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

【概要】

网上看到一个不错的帖子，用WebService获取json，然后在前端使用AngularJs进行过滤搜索，看完文章后，按自己的想法，写了一个demo，给大家讨论参考，本人技术一般，还望大家多加指点。

【术语】

WebService:是一个平台独立的，低耦合的，自包含的、基于可编程的web的应用程序，可使用开放的XML（标准通用标记语言下的一个子集）标准来描述、发布、发现、协调和配置这些应用程序，用于开发分布式的互操作的应用程序

AngularJS:通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。

【完成效果】

例子执行成功后，默认是显示所有用户的列表，如图：

当在搜索框中输入“王”后，进行过滤，如图：

下面一步一步的讲下这个例子的完成。

一、创建数据库

我在这里用的是sqlite，大家可以按自己的擅长和方便选择数据库，表结构如图：

二、创建项目

在vs2010中新建一个web应用程序，然后添加Default.aspx、angular.min.js、WebService.asmx、BLL层，如图：

三、编写BLL层

BLL层主要完成数据库的读取和提供json的功能，这里例子小，读取数据库的方法直接在BLL层中实现，代码如下：

 1 　　　 public class ExampleBLL
 2       {
 3              /// <summary>
 4              /// 获取datatable
 5              /// </summary>
 6              /// <returns> datatable</returns>
 7             public DataTable GetDataTable()
 8             {
 9                    DataTable dataTable = new DataTable();
10                    using (SQLiteConnection conn = new SQLiteConnection(@"Data Source =" + HttpContext.Current.Server.MapPath("~/example.db" ) + ";"))
11                   {
12                         SQLiteCommand cmd = conn.CreateCommand();
13                         cmd.CommandText = "select * from users";
14                         cmd.CommandType = CommandType.Text;
15  
16                         if (conn.State != ConnectionState .Open)
17                         {
18                               conn.Open();
19                         }
20                         SQLiteDataReader dr = cmd.ExecuteReader(CommandBehavior .CloseConnection);
21                         dataTable.Load(dr);
22                   }
23                   return dataTable;
24             }
25  
26              /// <summary>
27              /// 根据DataTable生成Json
28              /// </summary>
29              /// <param name="table"> datatable</param>
30              /// <returns> json</returns>
31             public string DataTableToJson(DataTable table)
32             {
33                   if (table == null || table.Rows.Count == 0)
34                   {
35                          return string .Empty;
36                   }
37  
38                   var sb = new StringBuilder();
39                   sb.Append( "[");
40  
41                   string[] columnName = new string[table.Columns.Count];//列名数组
42                   for (int i = 0; i < table.Columns.Count; i++)
43                   {
44                         columnName[i] = table.Columns[i].ColumnName.ToLower();//列名小写
45                   }
46                   //拼接列
47                   for (int i = 0; i < table.Rows.Count; i++)
48                   {
49                         sb.Append( "{");
50                         for (int j = 0; j < columnName.Length; j++)
51                         {
52                               sb.Append( "\"" + columnName[j] + "\":\"" + table.Rows[i][j].ToString() + "\"" );
53                               if (j < columnName.Length - 1)
54                               {
55                                     sb.Append( ",");
56                               }
57                         }
58                         sb.Append( "}");
59                         if (i < table.Rows.Count - 1)
60                         {
61                               sb.Append( ",");
62                         }
63                   }
64                   sb.Append( "]");
65  
66                   table = null;
67                   return sb.ToString();
68             }
69       }

四、编写WebService

这里编写一个GetUsersJson()方法，用于提供json数据，代码如下：

 1 　　　　/// <summary>
 2        /// WebService 的摘要说明
 3        /// </summary>
 4       [ WebService(Namespace = "http://tempuri.org/" )]
 5       [ WebServiceBinding(ConformsTo = WsiProfiles .BasicProfile1_1)]
 6       [System.ComponentModel. ToolboxItem(false )]
 7       [System.Web.Script.Services.ScriptService]
 8       public class WebService : System.Web.Services. WebService
 9       {
10             [ WebMethod]
11             [ ScriptMethod(UseHttpGet = true , ResponseFormat = ResponseFormat.Json)]
12             public void GetUsersJson()
13             {
14                   ExampleBLL BLL = new ExampleBLL();
15                   JavaScriptSerializer js = new JavaScriptSerializer();
16                   Context.Response.Clear();
17                   Context.Response.ContentType = "application/json";
18                   UserData data = new UserData();
19                   data.Message = BLL.DataTableToJson(BLL.GetDataTable());
20                   Context.Response.Write(js.Serialize(data.Message));
21             }
22  
23             public class UserData
24             {
25                    public string Message { get; set; }
26             }
27       }

这里要在web.config中system.web节点中添加WebService协议如点，代码如下：

1     < webServices>
2       < protocols>
3         < add name ="HttpGet "/>
4         < add name ="HttpPost "/>
5       </ protocols>
6     </ webServices>

五、访问WebService

这时访问WebService下的GetUsersJson()，得到如图：

六、编写html

在html中引用AngularJS,AngularJS的具体操作可以搜索官方文档，html代码如下：

 1 <html ng-app="serviceConsumer">
 2 <head>
 3     <title> web service</title >
 4     <style type="text/css">
 5         #tableResult
 6         {
 7             width: 500px ;
 8             margin-top: 15px ;
 9             border-top: 1px solid #3d3d3d;
10             border-left: 1px solid #3d3d3d;
11         }
12         #tableResult td
13         {
14             border-right: 1px solid #3d3d3d;
15             border-bottom: 1px solid #3d3d3d;
16         }
17     </style>
18     <script type="text/javascript" src="scripts/angular.min.js"></script>
19 </head>
20 <body>
21     <form id="form1" runat="server">
22     <div>
23         <div ng-controller="usersController">
24             搜索: <input type="text" ng-model="search" />
25             <table id="tableResult" cellspacing="0" cellpadding="3">
26                 <thead>
27                     <tr style="background-color : #eee;">
28                         <td>
29                             序号
30                         </td>
31                         <td>
32                             姓名
33                         </td>
34                     </tr>
35                 </thead>
36                 <tr ng-repeat="i in users | filter:search">
37                     <td style="width : 40px;">
38                         {{i.id}}
39                     </td>
40                     <td>
41                         {{i.name }}
42                     </td>
43                 </tr>
44             </table>
45         </div>
46         <br />
47     </div>
48     <script type="text/javascript">
49         var app = angular.module(‘serviceConsumer‘ , []);
50  
51         app.controller( ‘usersController‘, function ($scope, $http) {
52             var url = "Asmx/WebService.asmx/GetUsersJson" ;
53             $http.get(url).success( function (data) {
54                 var myjson = JSON.parse(data);
55                 $scope.users = JSON.parse(myjson);
56             })
57         })                        
58     </script>
59     </form>
60 </body>
61 </html>