WebService和AngularJS實現模糊過濾查詢

時間 2019-11-09

標籤 webservice angularjs 實現模糊過濾查詢欄目 WebService 简体版

原文原文鏈接

【概要】

網上看到一個不錯的帖子，用WebService獲取json，而後在前端使用AngularJs進行過濾搜索，看完文章後，按本身的想法，寫了一個demo，給你們討論參考，本人技術通常，還望你們多加指點。

【術語】

WebService:是一個平臺獨立的，低耦合的，自包含的、基於可編程的web的應用程序，可以使用開放的XML（標準通用標記語言下的一個子集）標準來描述、發佈、發現、協調和配置這些應用程序，用於開發分佈式的互操做的應用程序

AngularJS:經過爲開發者呈現一個更高層次的抽象來簡化應用的開發。如同其餘的抽象技術同樣，這也會損失一部分靈活性。換句話說，並非全部的應用都適合用AngularJS來作。AngularJS主要考慮的是構建CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。可是要了解什麼適合用AngularJS構建，就得了解什麼不適合用AngularJS構建。

【完成效果】

例子執行成功後，默認是顯示全部用戶的列表，如圖：

當在搜索框中輸入「王」後，進行過濾，如圖：

下面一步一步的講下這個例子的完成。

1、建立數據庫

我在這裏用的是sqlite，你們能夠按本身的擅長和方便選擇數據庫，表結構如圖：

2、建立項目

在vs2010中新建一個web應用程序，而後添加Default.aspx、angular.min.js、WebService.asmx、BLL層，如圖：

3、編寫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       }

4、編寫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>

5、訪問WebService

這時訪問WebService下的GetUsersJson()，獲得如圖：

6、編寫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>