javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 WebForm使用AngularJS实现下拉框多级联动 数据准备

javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo

javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo

1usingSystem.Collections.Generic;
2usingSystem.Linq;
3
4namespaceFourLevelDemo.Services
5{
6publicclassCategoryService
7{
8PRivatestaticListGetCategories()
9{
10returnnewList(new[]
11{
12newCategory
13{
14Cateid=1,
15CateName="A1",
16Depth=1,
17ParentId=0,
18SubCategories=newList(new[]
19{
20newCategory
21{
22CateId=101,
23CateName="A101",
24Depth=2,
25ParentId=1,
26SubCategories=newList(new[]
27{
28newCategory
29{
30CateId=10101,
31Depth=3,
32CateName="A10101",
33ParentId=101,
34SubCategories=newList(new[]
35{
36newCategory
37{
38CateId=1010101,
39CateName="A1010101",
40Depth=4,
41ParentId=10101,
42},
43newCategory
44{
45CateId=1010102,
46CateName="A1010102",
47Depth=4,
48ParentId=10101,
49},
50newCategory
51{
52CateId=1010103,
53CateName="A1010103",
54Depth=4,
55ParentId=10101,
56}
57})
58},
59newCategory
60{
61CateId=10102,
62CateName="A10102",
63Depth=3,
64ParentId=101,
65SubCategories=newList(new[]
66{
67newCategory
68{
69CateId=1010201,
70CateName="A1010201",
71Depth=4,
72ParentId=10102,
73},
74newCategory
75{
76CateId=1010202,
77CateName="A1010202",
78Depth=4,
79ParentId=10102,
80},
81newCategory
82{
83CateId=1010203,
84CateName="A1010203",
85Depth=4,
86ParentId=10102,
87}
88})
89},
90newCategory
91{
92CateId=10103,
93CateName="A10103",
94Depth=3,
95ParentId=101,
96SubCategories=newList(new[]
97{
98newCategory
99{
100CateId=1010301,
101CateName="A1010301",
102Depth=4,
103ParentId=10103,
104},
105newCategory
106{
107CateId=1010302,
108CateName="A1010302",
109Depth=4,
110ParentId=10103,
111},
112newCategory
113{
114CateId=1010303,
115CateName="A1010303",
116Depth=4,
117ParentId=10103,
118}
119})
120}
121})
122},
123newCategory
124{
125CateId=102,
126CateName="A102",
127Depth=2,
128ParentId=1,
129SubCategories=newList(new[]
130{
131newCategory
132{
133CateId=10201,
134CateName="A10201",
135Depth=3,
136ParentId=102,
137SubCategories=newList(new[]
138{
139newCategory
140{
141CateId=1020101,
142CateName="A1020101",
143Depth=4,
144ParentId=10201,
145},
146newCategory
147{
148CateId=1020102,
149CateName="A1020102",
150Depth=4,
151ParentId=10201,
152},
153newCategory
154{
155CateId=1020103,
156CateName="A1020103",
157Depth=4,
158ParentId=10201,
159}
160})
161},
162newCategory
163{
164CateId=10202,
165CateName="A10202",
166Depth=3,
167ParentId=102,
168SubCategories=newList(new[]
169{
170newCategory
171{
172CateId=1020201,
173CateName="A1020201",
174Depth=4,
175ParentId=10202,
176},
177newCategory
178{
179CateId=1020202,
180CateName="A1020202",
181Depth=4,
182ParentId=10202,
183},
184newCategory
185{
186CateId=1020203,
187CateName="A1020203",
188Depth=4,
189ParentId=10202,
190}
191})
192},
193newCategory
194{
195CateId=10203,
196CateName="A10203",
197Depth=3,
198ParentId=102,
199SubCategories=newList(new[]
200{
201newCategory
202{
203CateId=1020301,
204CateName="A1020301",
205Depth=4,
206ParentId=10203,
207},
208newCategory
209{
210CateId=1020302,
211CateName="A1020302",
212Depth=4,
213ParentId=10203,
214},
215newCategory
216{
217CateId=1020303,
218CateName="A1020303",
219Depth=4,
220ParentId=10203,
221}
222})
223}
224})
225}
226})
227},
228newCategory
229{
230CateId=2,
231CateName="A2",
232Depth=1,
233ParentId=0,
234SubCategories=newList(new[]
235{
236newCategory
237{
238CateId=201,
239CateName="A201",
240Depth=2,
241ParentId=2,
242SubCategories=newList(new[]
243{
244newCategory
245{
246CateId=20101,
247CateName="A20101",
248Depth=3,
249ParentId=201,
250SubCategories=newList(new[]
251{
252newCategory
253{
254CateId=2010101,
255CateName="A2010101",
256Depth=4,
257ParentId=20101,
258},
259newCategory
260{
261CateId=2010102,
262CateName="A2010102",
263Depth=4,
264ParentId=20101,
265},
266newCategory
267{
268CateId=2010103,
269CateName="A2010103",
270Depth=4,
271ParentId=20101,
272}
273})
274},
275newCategory
276{
277CateId=20102,
278CateName="A20102",
279Depth=3,
280ParentId=201,
281SubCategories=newList(new[]
282{
283newCategory
284{
285CateId=2010201,
286CateName="A2010201",
287Depth=4,
288ParentId=20102,
289},
290newCategory
291{
292CateId=2010202,
293CateName="A2010202",
294Depth=4,
295ParentId=20102,
296},
297newCategory
298{
299CateId=2010203,
300CateName="A2010203",
301Depth=4,
302ParentId=20102,
303}
304})
305},
306newCategory
307{
308CateId=20103,
309CateName="A20103",
310Depth=3,
311ParentId=201,
312SubCategories=newList(new[]
313{
314newCategory
315{
316CateId=2010301,
317CateName="A2010301",
318Depth=4,
319ParentId=20103,
320},
321newCategory
322{
323CateId=2010302,
324CateName="A2010302",
325Depth=4,
326ParentId=20103,
327},
328newCategory
329{
330CateId=2010303,
331CateName="A2010303",
332Depth=4,
333ParentId=20103,
334}
335})
336}
337})
338},
339newCategory
340{
341CateId=202,
342CateName="A202",
343Depth=2,
344ParentId=2,
345SubCategories=newList(new[]
346{
347newCategory
348{
349CateId=20201,
350CateName="A20201",
351Depth=3,
352ParentId=202,
353SubCategories=newList(new[]
354{
355newCategory
356{
357CateId=2020101,
358CateName="A2020101",
359Depth=4,
360ParentId=20201,
361},
362newCategory
363{
364CateId=2020102,
365CateName="A2020102",
366Depth=4,
367ParentId=20201,
368},
369newCategory
370{
371CateId=2020103,
372CateName="A2020103",
373Depth=4,
374ParentId=20201,
375}
376})
377},
378newCategory
379{
380CateId=20202,
381CateName="A20202",
382Depth=3,
383ParentId=202,
384SubCategories=newList(new[]
385{
386newCategory
387{
388CateId=2020201,
389CateName="A2020201",
390Depth=4,
391ParentId=20202,
392},
393newCategory
394{
395CateId=2020202,
396CateName="A2020202",
397Depth=4,
398ParentId=20202,
399},
400newCategory
401{
402CateId=2020203,
403CateName="A2020203",
404Depth=4,
405ParentId=20202,
406}
407})
408},
409newCategory
410{
411CateId=20203,
412CateName="A20203",
413Depth=3,
414ParentId=202,
415SubCategories=newList(new[]
416{
417newCategory
418{
419CateId=2020301,
420CateName="A2020301",
421Depth=4,
422ParentId=20203,
423},
424newCategory
425{
426CateId=2020302,
427CateName="A2020302",
428Depth=4,
429ParentId=20203,
430},
431newCategory
432{
433CateId=2020303,
434CateName="A2020303",
435Depth=4,
436ParentId=20203,
437}
438})
439}
440})
441}
442})
443}
444});
445}
446
447publicstaticListGetCategoryList()
448{
449VARcategoryList=newList();
450varcategories=GetCategories();
451GetCategories(categoryList,categories);
452returncategoryList;
453}
454
455privatestaticvoidGetCategories(ListallCategories,Listsubcategories)
456{
457foreach(varsubcategoryinsubcategories)
458{
459allCategories.Add(newCategory
460{
461CateId=subcategory.CateId,
462CateName=subcategory.CateName,
463Depth=subcategory.Depth,
464ParentId=subcategory.ParentId
465});
466if(subcategory.SubCategories!=null)
467{
468GetCategories(allCategories,subcategory.SubCategories);
469}
470
471}
472}
473
474}
475
476publicclassCategory
477{
478publicintCateId{get;set;}
479
480publicintDepth{get;set;}
481
482publicintParentId{get;set;}
483
484publicstringCateName{get;set;}
485
486publicListSubCategories{get;set;}
487}
488}View Code 服务准备

javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo

javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo

1
2
3usingSystem.Web;
4usingFourLevelDemo.Services;
5usingNewtonsoft.Json;
6
7publicclassHandler:IHttpHandler
8{
9
10publicvoidProcessRequest(HttpContextcontext)
11{
12vardata=CategoryService.GetCategoryList();
13varresult=JsonConvert.SerializeObject(data,Formatting.Indented,newJsonSerializerSettings
14{
15ContractResolver=newNewtonsoft.Json.Serialization.CamelCaseProPErtyNamesContractResolver()
16});
17
18context.Response.ContentType="text/plain";
19context.Response.WrITe(result);
20
21}
22
23publicboolIsReusable
24{
25get
26{
27returnfalse;
28}
29}
30
31}View Code界面控件处理,并引入AngularJS

javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo

javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo

1
2
3
4
5
6
7
8
9
10
11
12
89
90
91
110
111View Code后台代码

javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo

javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo

1usingSystem;
2
3publicpartialclaSSDefault:System.Web.UI.Page
4{
5publicintLoadCategoryId{get;set;}
6
7protectedvoidPage_Load(objectsender,Eventargse)
8{
9if(!IsPostBack)
10{
11LoadCategoryId=1010203;
12}
13}
14
15
16protectedvoidButton1_Click(objectsender,EventArgse)
17{
18Button1.Text=hfcategory.Value;
19}
20}View Code说明需要引入Angular.js和ui-bootstrap.js
AngularJS的$scope.$watch很有用借助隐藏域实现前台台数据传递码地址:https://github.COM/ReganHe/MyFrontEndExercise/tree/Develop/MyAngularJS/componentDemo

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo全部内容,希望文章能够帮你解决javascript代码实例教程-WebForm使用AngularJS实现下拉框多级联动 - heoo所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。