ASP.NET MVC中一个地区级联菜单的例子

最新推荐文章于 2018-07-16 10:48:58 发布
最新推荐文章于 2018-07-16 10:48:58 发布
阅读量154 收藏
点赞数
文章标签： 测试 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/jerry01/archive/2012/09/06/2673808.html
版权

前段时间，在项目中遇到了一个问题，在会员中心当会员注册或者会员修改自己地区信息的时候，如果选择最底级地区，整个地区回退到最顶级地区的选择菜单，整个详细的地区信息不能正常显示。于是，从前端js函数代码着手调查产生这个效果的原因。刚开始的时候,在前端js函数中增加判断所获取的地区是否是最底级地区的判断,,但是一直解决不了这个问题。后来，转变思路，在后台获取地区信息的函数中当用户选择是底级地区(不存在子级地区)的时候，将它对应的所有父级地区信息全部保存起来。这样当选择底级地区的时候，锁获取的地区信息就不为空。

所以特意来记录一下。

前台调用后台代码：

   1: <span id="RegionSpan"></span>
   2:                                   <script type="text/javascript">
   3:               window.onload = function () {
   4:                   getCascadeNoStyle(<%=Model == null ? 0 : Model.RegionId%>, "RegionId", "RegionId", "/Region/AjaxRegion", "RegionSpan");                  
   5:               }
   6:  
   7:                                   </script>
   8: 
js函数getCascadeNoStyle()定义在Membership.js文件中的定义如下： 
   1: //  地区联动菜单
   2: //  id 当前id
   3: //  idName 列名
   4: //  key 后台接收属性名
   5: //  url 请求分类地址
   6: //  spanId放的位置
   7: function getCascadeNoStyle(id, idName, key, url, spanId) {
   8:  
   9:     $.getJSON(url + "/" + id, { rnum: Math.random() }, function (result) {
  10:  
  11:         var html = "";
  12:         var str = ',"' + idName + '","' + key + '","' + url + '","' + spanId + '"';
  13:         if (result.length < 1) {
  14:             html += "<select hncetype='area' id='lbArea' name='lbArea'  οnchange='getCascadeNoStyle(this.options[this.selectedIndex].value" + str + ")'>";
  15:             html += '<option value="0" >请选择</option>';
  16:             html += '</select>';
  17:         }
  18:  
  19:         for (var i = result.length - 1; i > -1; i--) {
  20:             html += "<select hncetype='area' id='lbArea' name='lbArea' οnchange='getCascadeNoStyle(this.options[this.selectedIndex].value" + str + ")'>";
  21:             html += '<option value="0" >请选择</option>';
  22:             for (var j = 0; j < result[i].Lists.length; j++) {
  23:                 if (eval("result[" + i + "].Lists[" + j + "]" + "." + idName) == result[i].SelectId) {
  24:                     html += '<option value="' + eval("result[" + i + "].Lists[" + j + "]" + "." + idName) + '" selected>' + result[i].Lists[j].Name + '</option>';
  25:                 }
  26:                 else {
  27:                     html += '<option value="' + eval("result[" + i + "].Lists[" + j + "]" + "." + idName) + '">' + result[i].Lists[j].Name + '</option>';
  28:                 }
  29:             }
  30:             html += '</select>';
  31:         }
  32:         html += "<input type='hidden' value='" + id + "' name='" + key + "' id='" + key + "'/>";
  33:         document.getElementById(spanId).innerHTML = html;
  34:     });
  35: }
  36: 

后台RgionController.cs中AjaxRegion() 的定义如下所示：      

   1: public ActionResult AjaxRegion(int id)
   2:       {
   3:           List<MultipleViewData<RegionDTO>> viewDatas = new List<MultipleViewData<RegionDTO>>();
   4:  
   5:           int level = 1;
   6:           level = RegionBiz.Instance.GetLevelByRegionId(id, ref level);
   7:           int nowId = id;
   8:           int selectId = 0;
   9:           int regionsCount = RegionBiz.Instance.GetCountByParentId(nowId);
 
   
 10:  //当选择的地区是底级地区，即不存在子级地区的时候，必须将这个底级地区的所有父级地区获取并且保存
 
   
 //level=1,表"",level=2,表示省级，level=3，表示市级，level=4,表示县级，level=5，表示乡级
 
   
  11:           if (regionsCount == 0)
 
   
  12:           {
 
   
  13:               if (level == 5)
 
   
  14:               {
 
   
  15:                   RegionDTO r1 = RegionBiz.Instance.GetById(nowId);
 
   
  16:                   List<RegionDTO> region = RegionBiz.Instance.GetRegionByParentId(r1.ParentId);
 
   
  17:                   selectId = r1.RegionId;
 
   
  18:                   MultipleViewData<RegionDTO> review1 = new MultipleViewData<RegionDTO>() { Lists = region, Level = level - 1, SelectId = selectId };
 
   
  19:                   viewDatas.Add(review1);
 
   
  20:  
 
   
  21:  
 
   
  22:                   RegionDTO r2 = RegionBiz.Instance.GetById(r1.ParentId);
 
   
  23:                   List<RegionDTO> region2 = RegionBiz.Instance.GetRegionByParentId(r2.ParentId);
 
   
  24:                   selectId = r2.RegionId;
 
   
  25:                   MultipleViewData<RegionDTO> review2 = new MultipleViewData<RegionDTO>() { Lists = region2, Level = level - 2, SelectId = selectId };
 
   
  26:                   viewDatas.Add(review2);
 
   
  27:  
 
   
  28:  
 
   
  29:                   RegionDTO r3 = RegionBiz.Instance.GetById(r2.ParentId);
 
   
  30:                   List<RegionDTO> region3 = RegionBiz.Instance.GetRegionByParentId(r3.ParentId);
 
   
  31:                   selectId = r3.RegionId;
 
   
  32:                   MultipleViewData<RegionDTO> review3 = new MultipleViewData<RegionDTO>() { Lists = region3, Level = level - 3, SelectId = selectId };
 
   
  33:                   viewDatas.Add(review3);
 
   
  34:  
 
   
  35:  
 
   
  36:  
 
   
  37:                   RegionDTO r4 = RegionBiz.Instance.GetById(r3.ParentId);
 
   
  38:                   List<RegionDTO> region4 = RegionBiz.Instance.GetRegionByParentId(r4.ParentId);
 
   
  39:                   selectId = r4.RegionId;
 
   
  40:                   MultipleViewData<RegionDTO> review4 = new MultipleViewData<RegionDTO>() { Lists = region4, Level = level - 4, SelectId = selectId };
 
   
  41:                   viewDatas.Add(review4);
 
   
  42:               }
 
   
  43:               else if (level == 4)
 
   
  44:               {
 
   
  45:                   RegionDTO r1 = RegionBiz.Instance.GetById(nowId);
 
   
  46:                   List<RegionDTO> region = RegionBiz.Instance.GetRegionByParentId(r1.ParentId);
 
   
  47:                   selectId = r1.RegionId;
 
   
  48:                   MultipleViewData<RegionDTO> review1 = new MultipleViewData<RegionDTO>() { Lists = region, Level = level - 1, SelectId = selectId };
 
   
  49:                   viewDatas.Add(review1);
 
   
  50:  
 
   
  51:                   RegionDTO r2 = RegionBiz.Instance.GetById(r1.ParentId);
 
   
  52:                   List<RegionDTO> region2 = RegionBiz.Instance.GetRegionByParentId(r2.ParentId);
 
   
  53:                   selectId = r2.RegionId;
 
   
  54:                   MultipleViewData<RegionDTO> review2 = new MultipleViewData<RegionDTO>() { Lists = region2, Level = level - 2, SelectId = selectId };
 
   
  55:                   viewDatas.Add(review2);
 
   
  56:  
 
   
  57:  
 
   
  58:                   RegionDTO r3 = RegionBiz.Instance.GetById(r2.ParentId);
 
   
  59:                   List<RegionDTO> region3 = RegionBiz.Instance.GetRegionByParentId(r3.ParentId);
 
   
  60:                   selectId = r3.RegionId;
 
   
  61:                   MultipleViewData<RegionDTO> review3 = new MultipleViewData<RegionDTO>() { Lists = region3, Level = level - 3, SelectId = selectId };
 
   
  62:                   viewDatas.Add(review3);
 
   
  63:               }
 
   
  64:               else if (level == 3)
 
   
  65:               {
 
   
  66:                   RegionDTO r1 = RegionBiz.Instance.GetById(nowId);
 
   
  67:                   List<RegionDTO> region = RegionBiz.Instance.GetRegionByParentId(r1.ParentId);
 
   
  68:                   selectId = r1.RegionId;
 
   
  69:                   MultipleViewData<RegionDTO> review1 = new MultipleViewData<RegionDTO>() { Lists = region, Level = level - 1, SelectId = selectId };
 
   
  70:                   viewDatas.Add(review1);
 
   
  71:  
 
   
  72:                   RegionDTO r2 = RegionBiz.Instance.GetById(r1.ParentId);
 
   
  73:                   List<RegionDTO> region2 = RegionBiz.Instance.GetRegionByParentId(r2.ParentId);
 
   
  74:                   selectId = r2.RegionId;
 
   
  75:                   MultipleViewData<RegionDTO> review2 = new MultipleViewData<RegionDTO>() { Lists = region2, Level = level - 2, SelectId = selectId };
 
   
  76:                   viewDatas.Add(review2);
 
   
  77:               }
 
   
  78:               else if (level == 2)
 
   
  79:               {
 
   
  80:                   RegionDTO r1 = RegionBiz.Instance.GetById(nowId);
 
   
  81:                   List<RegionDTO> region = RegionBiz.Instance.GetRegionByParentId(r1.ParentId);
 
   
  82:                   selectId = r1.RegionId;
 
   
  83:                   MultipleViewData<RegionDTO> review1 = new MultipleViewData<RegionDTO>() { Lists = region, Level = level - 1, SelectId = selectId };
 
   
  84:                   viewDatas.Add(review1);
 
   
  85:               }
 
   
  86:           }
 
   
  87:         
 
   
  88:           for (int i = 0; i < level; i++)
 
   
  89:           {
 
   
  90:               List<RegionDTO> region = RegionBiz.Instance.GetRegionByParentId(nowId);
 
   
  91:               if (region.Count == 0)
 
   
  92:               {
 
   
  93:                   RegionDTO r = RegionBiz.Instance.GetById(nowId);
 
   
  94:                   region = RegionBiz.Instance.GetRegionByParentId(r.ParentId);
 
   
  95:                   selectId = r.RegionId;
 
   
  96:               }
 
   
  97:               else if (region.Count > 0)
 
   
  98:               {
 
   
  99:                   RegionDTO UpRegion = RegionBiz.Instance.GetById(nowId);
 
   
 100:                   MultipleViewData<RegionDTO> review = new MultipleViewData<RegionDTO>() { Lists = region, Level = i, SelectId = selectId };
 
   
 101:                   viewDatas.Add(review);
 
   
 102:                   if (UpRegion != null)
 
   
 103:                   {
 
   
 104:                       nowId = UpRegion.ParentId;
 
   
 105:                       selectId = UpRegion.RegionId;
 
   
 106:                   }
 
   
 107:               }
 
   
 108:           }
 
   
 109:           //if ((regionsCount == 0) && (viewDatas.Count>0)) { viewDatas.Remove(viewDatas[0]); }
 
   
 110:           return Json(viewDatas, JsonRequestBehavior.AllowGet);
 
   
 111:       }
 
   
 112:  
 
   
 113:  
 
   
 114:  
 
   
 115:  
 
  
 
 
 
 
 
 
 
运行效果如下所示：
 
 
image
 

 

转载于:https://www.cnblogs.com/jerry01/archive/2012/09/06/2673808.html

                

        

        




    




    

      

        

            

              
                
                  dielianhuan1546
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
mvc实现三级联动菜单例子（带数据库添加即可）

				
			

			

				

					09-01
				

			

		

		

			
				
在MVC LINQ TO ENTITY中实现三级联动菜单

			
		

	



                

              
                



	

		

			

				
					
MVC TIP6：级联菜单

				
			

			

				

					weixin_33981932的博客
				

				

					07-06
					
					92
					
				

			

		

		

			
				
级联菜单最有名的是省市级联，如果你还没有这样的数据库，请从这里下载Province.rar。
1：MODEL
准备3个Model，如下：





publicclassProvince

{

publicintid { get; set; }


publicstringprovinceID { get; set; }

...

			
		

	



                


  
              

                


	

		

			

				
					
asp.net MVC 下拉多级联动及编辑

				
			

			

				

					weixin_30374009的博客
				

				

					09-07
					
					263
					
				

			

		

		

			
				
多级联动实现，附源码。当前，部分代码是参与博客园其它网友。
新增，前台代码：






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
...

			
		

	





	

		

			

				
					
.netMVC架构下无刷新三级级联菜单源码

				
			

			

				

					12-28
				

			

		

		

			
				
运用DropdownList、数据绑定、Mvc架构实现的无刷新数据库获取级联菜单。修改webconfig文件下的链接字，即可绑定到自己的数据库，快来试试吧。

			
		

	



		

			
		



	

		

			

				
					
ASP.NET MVC省市县三级级联(JQuery)

				
			

			

				

					07-05
				

			

		

		

			
				
ASP.NET MVC是一个强大的框架，用于构建可维护性和可测试性高的Web应用程序。在这个特定的项目中，"省市县三级级联"是指在一个Web应用中实现省、市、县（或区）的三级联动选择功能，这在地址输入或区域划分等场景中...

			
		

	





	

		

			

				
					
MVC3 ASP.NET AJAX DropDownList 级联

				
			

			

				

					10-30
				

			

		

		

			
				
该标题与描述明确指出了一个在MVC3（Model-View-Controller架构版本3）框架下，利用ASP.NET AJAX技术实现的级联DropDownList控件的具体应用。级联DropDownList是一种常用的前端交互设计模式，用于展示具有层次关系的...

			
		

	





	

		

			

				
					
ASP动态级联菜单实现代码

				
			

			

				

					10-30
				

			

		

		

			
				
在ASP（Active Server Pages）开发中，动态级联菜单是一种常见的交互式网页元素，它允许用户在选择一级菜单后，二级菜单会根据所选的一级菜单内容动态加载相关的选项。这种功能在网站导航、分类选择等方面非常实用。...

			
		

	





	

		

			

				
					
asp动态级联菜单代码

				
			

			

				

					10-30
				

			

		

		

			
				
asp动态级联菜单代码 ...本例中使用了ASP技术、数据库交互、Recordset对象、JavaScript技术、DOM、事件处理、数据绑定、级联菜单、表单处理和JavaScript数组等技术，实现了一个动态级联菜单的功能。

			
		

	





	

		

			

				
					
无限级级联菜单源码，asp.net，ajax

				
			

			

				

					03-04
				

			

		

		

			
				
通过理解和应用这个无限级级联菜单源码，开发者可以学习到如何在ASP.NET和AJAX环境下创建动态、交互性强的用户界面，提高Web应用的用户体验。同时，这个源码也适合初学者研究和学习，加深对ASP.NET和AJAX技术的理解...

			
		

	





	

		

			

				
					
asp.net 实现国家省市三级级联菜单

				
			

			

				

					01-03
				

			

		

		

			
				
js实现，国家省市的级联，简单好用。。。。。

			
		

	





	

		

			

				
					
省市区级联sql脚本.zip

				
			

			

				

					08-05
				

			

		

		

			
				
mysql之Explain详解中使用的sql脚本：https://editor.csdn.net/md?articleId=107807440

			
		

	





	

		

			

				
					
asp.net mvc2 三级联动

				
			

			

				

					weixin_30394633的博客
				

				

					08-20
					
					123
					
				

			

		

		

			
				
申明：某些没素质的人转载了这篇文章都没留下作者的信息或来源，很是气愤。虽然首次发帖，也不用这样吧。

转帖请注明地址：http://www.cnblogs.com/yzyeilin/archive/2011/10/18/eilin_yong.html



本人首次发帖，希望高人指点。
一.先看看表：

看看效果：

二.视图层:
-----...

			
		

	





	

		

			

				
					
springmvc框架下的国内地区级联效果(共享一下给学习的小伙伴)

				
			

			

				

					小静的专栏
				

				

					05-30
					
					9289
					
				

			

		

		

			
				
前台页面html

                    		--请选择地区--
							
								${configArea.extraAttr.cn}
							
                    	
                    	
						
							--请选择城市--
                    	
前台js
//点击省份级联要

			
		

	





	

		

			

				
					
MVC实现多级联动

				
			

			

				

					weixin_33806914的博客
				

				

					01-13
					
					179
					
				

			

		

		

			
				
前言
多级联动（省级联动）的效果，网上现成的都有很多，各种JS实现，Jquery实现等等，今天我们要讲的是在MVC里面，如何更方便、更轻量的实现省级联动呢？
实现效果如下：

具体实现
如图所示，在HTML页非常简单，放几个下拉框即可，可参考如下代码：

<div style="margin: 50px 0">
    <span&gt...

			
		

	





	

		

			

				
					
asp.net mvc中使用jquery H5省市县三级地区选择控件

				
			

			

				

					aixian6166的博客
				

				

					11-16
					
					236
					
				

			

		

		

			
				
地区选择是项目开发中常用的操作，本文讲的控件是在手机端使用的选择控件，不仅可以用于实现地区选择，只要是3个级别的选择都可以实现，比如专业选择、行业选择、职位选择等。效果如下图所示：

附：本实例asp.net mvc中使用jquery H5省市县三级地区选择控件及中国省市县标准地区库下载地址
咨询QQ：806693619
一、实现原理
一般常用输入控件是input，当点击inp...

			
		

	





	

		

			

				
					
ASP.NET MVC页面UI之联动下拉选择控件（省、市、县联动选择）

				
			

			

				

					aixian6166的博客
				

				

					09-06
					
					409
					
				

			

		

		

			
				
地区选择操作在WEB应用中比较常见的操作，本文在.net mvc3下实现了省市县三级联动选择功能。
本文博客出处：http://www.kwstu.com/ArticleView/admin_201392171455268 转载请注明！
一、效果图：

二、页面代码

<script src="../../Content/Js/selectlist.js">&lt...

			
		

	





	

		

			

				
					
.net省 市 县 街道 小区 五级联动实现JS及后台代码

				
			

			

				

					Candy_TangZhen的专栏
				

				

					07-16
					
					1411
					
				

			

		

		

			
				
.net+mvc 实现省 市 县 街道 小区 五级联动界面效果如图：View层代码：@model Dlx.Models.ViewModel.System.Sys_BuildingView
@{
    Layout = null;
    IEnumerable&lt;SelectListItem&gt; prolist = ViewBag.ProvinceList;   
}

&lt;inpu...

			
		

	





	

		

			

				
					
asp.net MVC4——省市三级联动

				
			

			

				

					diaoluoqu7450的博客
				

				

					05-17
					
					527
					
				

			

		

		

			
				
转载注明出处：http://www.cnblogs.com/breakman/p/5501971.html
controller：

public ActionResult GetCity(string id)
        {
            AreaService _areaSvc = new AreaService();
            List&l...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值