zoukankan      html  css  js  c++  java
  • asp.net mvc jQuery 城市二级联动

    页面效果图:

    数据库表结构:

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

    主要文件有:index.cshtml,ErJLDController.cs ,数据处理层,业务处理层,还有数据库文件 。

    index.cshtml:

     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>
    48 
    49 Index.cshtml
    View Code

     ErJLDController.cs

     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 }
    48 
    49 ErJLDController.cs
    View Code
  • 相关阅读:
    20080619 SQL SERVER 输入 NULL 的快捷键
    20090406 Adobe的“此产品的许可已停止工作”错误的解决办法
    20080908 Office Powerpoint 2007 不能输入中文的解决办法
    20080831 ClearGertrude Blog Skin 's cnblogs_code class
    20080603 Facebook 平台正式开放
    20080519 安装 Microsoft SQL Server 2000 时提示 创建挂起的文件操作
    test
    Linux—fork函数学习笔记
    SOA的设计理念
    Why BCP connects to SQL Server instance which start with account of Network Service fail?
  • 原文地址:https://www.cnblogs.com/zhangpengnike/p/5159970.html
Copyright © 2011-2022 走看看