WebForm使用AngularJS實現下拉框多級聯動

時間 2019-11-17

標籤 webform 使用 angularjs 實現下拉多級聯動欄目 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
說明