• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Asp.netMVC4下二级联动

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果图:

主要文件有Index.cshtml ,ErJLDController.cs ,还有数据库文件 。

1、首先在数据库中创建省级、城市的表,我的表如下:我用了一张表放下了省级、城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id

 1 namespace Mvcproject.Controllers
 2 {
 3     //二级联动
 4     public class ErJLDController : Controller
 5     {
 6 
 7         ZjbEntities db = new ZjbEntities();
 8         //
 9         // GET: /Test/
10         
11         public ActionResult Index()
12         {
13             //pro_city province=new pro_city();
14             
15             return View();
16         }
17 
18         public JsonResult getProvince() {
19             
20             List<pro_city> provinceList = (from p in db.pro_city where p.level == 1 select p).ToList();
21   
22 
23             JsonResult Jprovince = new JsonResult();
24             Jprovince.Data = provinceList;
25             Jprovince.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
26             return Jprovince;
27 
28         }
29 
30         public JsonResult getCity(string pName)
31         {
32 
33             //string pid = (from p in db.pro_city where p.areaValue == pName select p.id).ToString();
34             //int id = int.Parse(pid);
35             int id = int.Parse(pName);
36 
37             List<pro_city> cityList = (from p in db.pro_city where p.parentId == id select p).ToList();
38   
39             JsonResult Jcity = new JsonResult();
40             Jcity.Data = cityList;
41             Jcity.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
42             return Jcity;
43 
44         }
45        
46     }
47 }
ErJLDController.cs
 1 <body>
 2     <div>
 3         <select id="provinceId" >
 4          <option> 请选择省份</option>
 5         </select>
 6         <select id="cityId">
 7             <option>请选择市区</option>
 8         </select>
 9     </div>
10 
11     <script type="text/javascript">
12     
13         
14 
15         //用json从数据库里取一级列表的参数
16         $(function () {
17 
18             $.getJSON("ErJLD/getProvince/", function (obj) {
19                 $.each(obj, function (i, p) {
20                     $("#provinceId").append("<option value='"+p.id+"'>" + p.areaValue + "</option>");
21                 });
22 
23                 $("#provinceId").change(function () {
24                     //用attr()方法获取当前选择的option的value值(即p.id ,数据库里的id值,
25                     //虽然在TestController中的getCity方法中传入的是string类型的形参,但是后来需要变换成int类型, 所以value值应该为数字)
26                     var pName = $("#provinceId").attr("value");
27                     $.getJSON("ErJLD/getCity?pName=" + pName, getcity);
28                 });
29             });
30         });
31            
32       
33         
34 
35         function getcity(obj) {         
36             $("#cityId").empty();
37                         $.each(obj, function (m, v) {
38                             $("#cityId").append("<option >" + v.areaValue + "</option>");
39                         });
40        
41                     };
42                
43               
44             
45 
46     </script>
47 </body>
Index.cshtml

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap