WebService和AngularJS实现模糊过滤查询
【概要】
网上看到一个不错的帖子，用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>
七、完成效果
执行完成后，输入关键字就可以过滤结果，如图：
八、参考
分类: C#