WebForm使用AngularJS实现下拉框多级联动

数据准备
  1 using System.Collections.Generic;
  2 using System.Linq;
  3
  4 namespace FourLevelDemo.Services
  5 {
  6     public class CategoryService
  7     {
  8         private static List<Category> GetCategories()
  9         {
10             return new List<Category>(new[]
11             {
12                 new Category
13                 {
14                     CateId = 1,
15                     CateName = "A1",
16                     Depth = 1,
17                     ParentId = 0,
18                     SubCategories = new List<Category>(new[]
19                     {
20                         new Category
21                         {
22                             CateId = 101,
23                             CateName = "A101",
24                             Depth = 2,
25                             ParentId = 1,
26                             SubCategories = new List<Category>(new[]
27                             {
28                                 new Category
29                                 {
30                                     CateId = 10101,
31                                     Depth = 3,
32                                     CateName = "A10101",
33                                     ParentId = 101,
34                                     SubCategories = new List<Category>(new[]
35                                     {
36                                         new Category
37                                         {
38                                             CateId = 1010101,
39                                             CateName = "A1010101",
40                                             Depth = 4,
41                                             ParentId = 10101,
42                                         },
43                                         new Category
44                                         {
45                                             CateId = 1010102,
46                                             CateName = "A1010102",
47                                             Depth = 4,
48                                             ParentId = 10101,
49                                         },
50                                         new Category
51                                         {
52                                             CateId = 1010103,
53                                             CateName = "A1010103",
54                                             Depth = 4,
55                                             ParentId = 10101,
56                                         }
57                                     })
58                                 },
59                                 new Category
60                                 {
61                                     CateId = 10102,
62                                     CateName = "A10102",
63                                     Depth = 3,
64                                     ParentId = 101,
65                                     SubCategories = new List<Category>(new[]
66                                     {
67                                         new Category
68                                         {
69                                             CateId = 1010201,
70                                             CateName = "A1010201",
71                                             Depth = 4,
72                                             ParentId = 10102,
73                                         },
74                                         new Category
75                                         {
76                                             CateId = 1010202,
77                                             CateName = "A1010202",
78                                             Depth = 4,
79                                             ParentId = 10102,
80                                         },
81                                         new Category
82                                         {
83                                             CateId = 1010203,
84                                             CateName = "A1010203",
85                                             Depth = 4,
86                                             ParentId = 10102,
87                                         }
88                                     })
89                                 },
90                                 new Category
91                                 {
92                                     CateId = 10103,
93                                     CateName = "A10103",
94                                     Depth = 3,
95                                     ParentId = 101,
96                                     SubCategories = new List<Category>(new[]
97                                     {
98                                         new Category
99                                         {
100                                             CateId = 1010301,
101                                             CateName = "A1010301",
102                                             Depth = 4,
103                                             ParentId = 10103,
104                                         },
105                                         new Category
106                                         {
107                                             CateId = 1010302,
108                                             CateName = "A1010302",
109                                             Depth = 4,
110                                             ParentId = 10103,
111                                         },
112                                         new Category
113                                         {
114                                             CateId = 1010303,
115                                             CateName = "A1010303",
116                                             Depth = 4,
117                                             ParentId = 10103,
118                                         }
119                                     })
120                                 }
121                             })
122                         },
123                         new Category
124                         {
125                             CateId = 102,
126                             CateName = "A102",
127                             Depth = 2,
128                             ParentId = 1,
129                             SubCategories = new List<Category>(new[]
130                             {
131                                 new Category
132                                 {
133                                     CateId = 10201,
134                                     CateName = "A10201",
135                                     Depth = 3,
136                                     ParentId = 102,
137                                     SubCategories = new List<Category>(new[]
138                                     {
139                                         new Category
140                                         {
141                                             CateId = 1020101,
142                                             CateName = "A1020101",
143                                             Depth = 4,
144                                             ParentId = 10201,
145                                         },
146                                         new Category
147                                         {
148                                             CateId = 1020102,
149                                             CateName = "A1020102",
150                                             Depth = 4,
151                                             ParentId = 10201,
152                                         },
153                                         new Category
154                                         {
155                                             CateId = 1020103,
156                                             CateName = "A1020103",
157                                             Depth = 4,
158                                             ParentId = 10201,
159                                         }
160                                     })
161                                 },
162                                 new Category
163                                 {
164                                     CateId = 10202,
165                                     CateName = "A10202",
166                                     Depth = 3,
167                                     ParentId = 102,
168                                     SubCategories = new List<Category>(new[]
169                                     {
170                                         new Category
171                                         {
172                                             CateId = 1020201,
173                                             CateName = "A1020201",
174                                             Depth = 4,
175                                             ParentId = 10202,
176                                         },
177                                         new Category
178                                         {
179                                             CateId = 1020202,
180                                             CateName = "A1020202",
181                                             Depth = 4,
182                                             ParentId = 10202,
183                                         },
184                                         new Category
185                                         {
186                                             CateId = 1020203,
187                                             CateName = "A1020203",
188                                             Depth = 4,
189                                             ParentId = 10202,
190                                         }
191                                     })
192                                 },
193                                 new Category
194                                 {
195                                     CateId = 10203,
196                                     CateName = "A10203",
197                                     Depth = 3,
198                                     ParentId = 102,
199                                     SubCategories = new List<Category>(new[]
200                                     {
201                                         new Category
202                                         {
203                                             CateId = 1020301,
204                                             CateName = "A1020301",
205                                             Depth = 4,
206                                             ParentId = 10203,
207                                         },
208                                         new Category
209                                         {
210                                             CateId = 1020302,
211                                             CateName = "A1020302",
212                                             Depth = 4,
213                                             ParentId = 10203,
214                                         },
215                                         new Category
216                                         {
217                                             CateId = 1020303,
218                                             CateName = "A1020303",
219                                             Depth = 4,
220                                             ParentId = 10203,
221                                         }
222                                     })
223                                 }
224                             })
225                         }
226                     })
227                 },
228                 new Category
229                 {
230                     CateId = 2,
231                     CateName = "A2",
232                     Depth = 1,
233                     ParentId = 0,
234                     SubCategories = new List<Category>(new[]
235                     {
236                         new Category
237                         {
238                             CateId = 201,
239                             CateName = "A201",
240                             Depth = 2,
241                             ParentId = 2,
242                             SubCategories = new List<Category>(new[]
243                             {
244                                 new Category
245                                 {
246                                     CateId = 20101,
247                                     CateName = "A20101",
248                                     Depth = 3,
249                                     ParentId = 201,
250                                     SubCategories = new List<Category>(new[]
251                                     {
252                                         new Category
253                                         {
254                                             CateId = 2010101,
255                                             CateName = "A2010101",
256                                             Depth = 4,
257                                             ParentId = 20101,
258                                         },
259                                         new Category
260                                         {
261                                             CateId = 2010102,
262                                             CateName = "A2010102",
263                                             Depth = 4,
264                                             ParentId = 20101,
265                                         },
266                                         new Category
267                                         {
268                                             CateId = 2010103,
269                                             CateName = "A2010103",
270                                             Depth = 4,
271                                             ParentId = 20101,
272                                         }
273                                     })
274                                 },
275                                 new Category
276                                 {
277                                     CateId = 20102,
278                                     CateName = "A20102",
279                                     Depth = 3,
280                                     ParentId = 201,
281                                     SubCategories = new List<Category>(new[]
282                                     {
283                                         new Category
284                                         {
285                                             CateId = 2010201,
286                                             CateName = "A2010201",
287                                             Depth = 4,
288                                             ParentId = 20102,
289                                         },
290                                         new Category
291                                         {
292                                             CateId = 2010202,
293                                             CateName = "A2010202",
294                                             Depth = 4,
295                                             ParentId = 20102,
296                                         },
297                                         new Category
298                                         {
299                                             CateId = 2010203,
300                                             CateName = "A2010203",
301                                             Depth = 4,
302                                             ParentId = 20102,
303                                         }
304                                     })
305                                 },
306                                 new Category
307                                 {
308                                     CateId = 20103,
309                                     CateName = "A20103",
310                                     Depth = 3,
311                                     ParentId = 201,
312                                     SubCategories = new List<Category>(new[]
313                                     {
314                                         new Category
315                                         {
316                                             CateId = 2010301,
317                                             CateName = "A2010301",
318                                             Depth = 4,
319                                             ParentId = 20103,
320                                         },
321                                         new Category
322                                         {
323                                             CateId = 2010302,
324                                             CateName = "A2010302",
325                                             Depth = 4,
326                                             ParentId = 20103,
327                                         },
328                                         new Category
329                                         {
330                                             CateId = 2010303,
331                                             CateName = "A2010303",
332                                             Depth = 4,
333                                             ParentId = 20103,
334                                         }
335                                     })
336                                 }
337                             })
338                         },
339                         new Category
340                         {
341                             CateId = 202,
342                             CateName = "A202",
343                             Depth = 2,
344                             ParentId = 2,
345                             SubCategories = new List<Category>(new[]
346                             {
347                                 new Category
348                                 {
349                                     CateId = 20201,
350                                     CateName = "A20201",
351                                     Depth = 3,
352                                     ParentId = 202,
353                                     SubCategories = new List<Category>(new[]
354                                     {
355                                         new Category
356                                         {
357                                             CateId = 2020101,
358                                             CateName = "A2020101",
359                                             Depth = 4,
360                                             ParentId = 20201,
361                                         },
362                                         new Category
363                                         {
364                                             CateId = 2020102,
365                                             CateName = "A2020102",
366                                             Depth = 4,
367                                             ParentId = 20201,
368                                         },
369                                         new Category
370                                         {
371                                             CateId = 2020103,
372                                             CateName = "A2020103",
373                                             Depth = 4,
374                                             ParentId = 20201,
375                                         }
376                                     })
377                                 },
378                                 new Category
379                                 {
380                                     CateId = 20202,
381                                     CateName = "A20202",
382                                     Depth = 3,
383                                     ParentId = 202,
384                                     SubCategories = new List<Category>(new[]
385                                     {
386                                         new Category
387                                         {
388                                             CateId = 2020201,
389                                             CateName = "A2020201",
390                                             Depth = 4,
391                                             ParentId = 20202,
392                                         },
393                                         new Category
394                                         {
395                                             CateId = 2020202,
396                                             CateName = "A2020202",
397                                             Depth = 4,
398                                             ParentId = 20202,
399                                         },
400                                         new Category
401                                         {
402                                             CateId = 2020203,
403                                             CateName = "A2020203",
404                                             Depth = 4,
405                                             ParentId = 20202,
406                                         }
407                                     })
408                                 },
409                                 new Category
410                                 {
411                                     CateId = 20203,
412                                     CateName = "A20203",
413                                     Depth = 3,
414                                     ParentId = 202,
415                                     SubCategories = new List<Category>(new[]
416                                     {
417                                         new Category
418                                         {
419                                             CateId = 2020301,
420                                             CateName = "A2020301",
421                                             Depth = 4,
422                                             ParentId = 20203,
423                                         },
424                                         new Category
425                                         {
426                                             CateId = 2020302,
427                                             CateName = "A2020302",
428                                             Depth = 4,
429                                             ParentId = 20203,
430                                         },
431                                         new Category
432                                         {
433                                             CateId = 2020303,
434                                             CateName = "A2020303",
435                                             Depth = 4,
436                                             ParentId = 20203,
437                                         }
438                                     })
439                                 }
440                             })
441                         }
442                     })
443                 }
444             });
445         }
446
447         public static List<Category> GetCategoryList()
448         {
449             var categoryList = new List<Category>();
450             var categories = GetCategories();
451             GetCategories(categoryList, categories);
452             return categoryList;
453         }
454
455         private static void GetCategories(List<Category> allCategories, List<Category> subcategories)
456         {
457             foreach (var subcategory in subcategories)
458             {
459                 allCategories.Add(new Category
460                 {
461                     CateId = subcategory.CateId,
462                     CateName = subcategory.CateName,
463                     Depth = subcategory.Depth,
464                     ParentId = subcategory.ParentId
465                 });
466                 if (subcategory.SubCategories != null)
467                 {
468                     GetCategories(allCategories, subcategory.SubCategories);
469                 }
470
471             }
472         }
473
474     }
475
476     public class Category
477     {
478         public int CateId { get; set; }
479
480         public int Depth { get; set; }
481
482         public int ParentId { get; set; }
483
484         public string CateName { get; set; }
485
486         public List<Category> SubCategories { get; set; }
487     }
488 }
View Code
服务准备
1 <%@ WebHandler Language="C#" Class="Handler" %>
2
3 using System.Web;
4 using FourLevelDemo.Services;
5 using Newtonsoft.Json;
6
7 public class Handler : IHttpHandler
8 {
9
10     public void ProcessRequest(HttpContext context)
11     {
12         var data = CategoryService.GetCategoryList();
13         var result = JsonConvert.SerializeObject(data, Formatting.Indented, new JsonSerializerSettings
14         {
15             ContractResolver = new Newtonsoft.Json.Serialization.CamelCasePropertyNamesContractResolver()
16         });
17
18         context.Response.ContentType = "text/plain";
19         context.Response.Write(result);
20
21     }
22
23     public bool IsReusable
24     {
25         get
26         {
27             return false;
28         }
29     }
30
31 }
View Code
界面控件处理，并引入AngularJS
  1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
  2
  3 <!DOCTYPE html>
  4
  5 <html ng-app="categoryApp">
  6 <head runat="server">
  7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8     <title></title>
  9     <script src="Scripts/lib/angular.min.js"></script>
10     <script src="Scripts/lib/ui-bootstrap-1.1.1.min.js"></script>
11     <script src="Scripts/jquery-1.10.2.js"></script>
12     <script type="text/javascript">
13         var app = angular.module('categoryApp', ['ui.bootstrap']);
14         app.controller('CategoryController', ['$scope', '$http', function ($scope,$http) {
15             var getCategory = function () {
16                 $http.get('Handler.ashx', null)
17                     .success(function(data) {
18                         $scope.tempCate = data;
19                         $scope.categories = new Array(5);
20                         $scope.c = new Array(5);
21                         $scope.categories[1] = $scope.tempCate.filter(function(value, index, array) {
22                             return value.depth == 1;
23                         });
24
25                         $scope.$watch('c[1]', function(newVal, oldVal) {
26                             $scope.categories[2] = null;
27                             $scope.categories[3] = null;
28                             $scope.categories[4] = null;
29                             if (newVal) {
30                                 $("#hfCategory").val(newVal.cateId);
31                                 $scope.categories[2] = $scope.tempCate.filter(function(value, index, array) {
32                                     return value.depth == 2 && value.parentId == newVal.cateId;
33                                 });
34
35                             }
36                         });
37
38                         $scope.$watch('c[2]', function(newVal, oldVal) {
39                             if (newVal) {
40                                 $("#hfCategory").val(newVal.cateId);
41                                 $scope.categories[3] = $scope.tempCate.filter(function(value, index, array) {
42                                     return value.depth == 3 && value.parentId == newVal.cateId;
43                                 });
44                                 $scope.categories[4] = null;
45                             }
46                         });
47
48                         $scope.$watch('c[3]', function(newVal, oldVal) {
49                             if (newVal) {
50                                 $("#hfCategory").val(newVal.cateId);
51                                 $scope.categories[4] = $scope.tempCate.filter(function(value, index, array) {
52                                     return value.depth == 4 && value.parentId == newVal.cateId;
53                                 });
54                             }
55                         });
56
57                         $scope.$watch('c[4]', function(newVal, oldVal) {
58                             if (newVal) {
59                                 $("#hfCategory").val(newVal.cateId);
60                             }
61                         });
62
63                         if ($scope.categoryId) {
64                             var category = $scope.tempCate.filter(function(value, index, array) {
65                                 return value.cateId == $scope.categoryId;
66                             })[0];
67                             $scope.c[category.depth] = category;
68                             var parentId = category.parentId;
69                             for (var i = category.depth - 1; i > 0; i--) {
70                                 var currentCate = $scope.tempCate.filter(function(value, index, array) {
71                                     return value.cateId == parentId;
72                                 })[0];
73                                 parentId = currentCate.parentId;
74                                 $scope.c[i] = currentCate;
75                             }
76                         }
77                     });
78             };
79
80             var init = function () {
81                 $scope.categoryId = <%=LoadCategoryId%>;
82                 getCategory();
83             };
84
85             init();
86
87         }]);
88     </script>
89 </head>
90 <body ng-controller="CategoryController">
91     <form id="form1" runat="server">
92         <div class="form-group course-category">
93             <label for="courseName" class="form-item-title">所属类目</label>
94             <select class="form-control" id="category1" name="category1" ng-model="c[1]" ng-show="categories[1]" ng-options="category as category.cateName for category in categories[1]">
95                 <option value="">请选择类目</option>
96             </select>
97             <select class="form-control" id="category2" name="category2" ng-model="c[2]" ng-show="categories[2] && categories[2][0]" ng-options="category as category.cateName for category in categories[2]">
98                 <option value="">请选择类目</option>
99             </select>
100             <select class="form-control" id="category3" name="category3" ng-model="c[3]" ng-show="categories[3] && categories[3][0]" ng-options="category as category.cateName for category in categories[3]">
101                 <option value="">请选择类目</option>
102             </select>
103             <select class="form-control" id="category4" name="category4" ng-model="c[4]" ng-show="categories[4] && categories[4][0]" ng-options="category as category.cateName for category in categories[4]">
104                 <option value="">请选择类目</option>
105             </select>
106             <asp:HiddenField runat="server" ID="hfCategory" />
107         </div>
108         <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" Style="height: 21px" />
109     </form>
110 </body>
111 </html>
View Code
后台代码
1 using System;
2
3 public partial class Default : System.Web.UI.Page
4 {
5     public int LoadCategoryId { get; set; }
6
7     protected void Page_Load(object sender, EventArgs e)
8     {
9         if (!IsPostBack)
10         {
11             LoadCategoryId = 1010203;
12         }
13     }
14
15
16     protected void Button1_Click(object sender, EventArgs e)
17     {
18         Button1.Text = hfCategory.Value;
19     }
20 }
View Code
说明

需要引入angular.js和ui-bootstrap.js
AngularJS的$scope.$watch很有用
借助隐藏域实现前台台数据传递
源码地址

posted on 2016-06-29 18:37 heoo 阅读(1198) 评论(0) 编辑收藏举报

刷新页面返回顶部

公告