zoukankan      html  css  js  c++  java
  • Asp.net MVC4 下二级联动

    效果图:

    主要文件有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
  • 相关阅读:
    获取子进程的是否在线
    python基础知识(二)
    Linux入门50指令
    LInux升级Python版本2.7.11所遇问题汇总
    java开发(1)
    winfrom 水晶报表制作
    asp.net Dock布局开发设置
    winform 窗体最大化事件
    C# 委托于跨线程异步调用
    asp.net-html图片的上传
  • 原文地址:https://www.cnblogs.com/TeaTree/p/3824942.html
Copyright © 2011-2022 走看看