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很有用
借助隐藏域实现前台台数据传递
源码地址

相关阅读:
作业第十六周
web、app、小程序测试异同点
接口测试用例演进
Python中“if __name__=='__main__':”
iPhone发布内测程序的方法
我的2020
python 参数笔记 --> 位置参数关键字参数命名参数形式参数默认参数可变参数可选参数位置顺序
uwsgi 热部署热启动热更新
Supervisor 进程管理工具笔记
spring Boot----注解驱动开发

原文地址：https://www.cnblogs.com/markhe/p/5627897.html