你的位置:首页 > ASP.net教程

[ASP.net教程]WebForm使用AngularJS实现下拉框多级联动


  1. 数据准备  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
  2. 服务准备 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
  3. 界面控件处理,并引入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
  4. 后台代码 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
  5. 说明
  • 需要引入angular.js和ui-bootstrap.js
  • AngularJS的$scope.$watch很有用
  • 借助隐藏域实现前台台数据传递
  • 源码地址:https://github.com/ReganHe/MyFrontEndExercise/tree/Develop/MyAngularJS/componentDemo