页面效果图：

数据库表结构：

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

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

index.cshtml：

 <body>

     <div>

         <select id="provinceId" >

          <option> 请选择省份</option>

         </select>

         <select id="cityId">

             <option>请选择市区</option>

         </select>

     </div>

     <script type="text/javascript">

         //用json从数据库里取一级列表的参数

         $(function () {

             $.getJSON("ErJLD/getProvince/", function (obj) {

                 $.each(obj, function (i, p) {

                     $("#provinceId").append("<option value='"+p.id+"'>" + p.areaValue + "</option>");

                 });

                 $("#provinceId").change(function () {

                     //用attr（）方法获取当前选择的option的value值（即p.id ,数据库里的id值，

                     //虽然在TestController中的getCity方法中传入的是string类型的形参，但是后来需要变换成int类型, 所以value值应该为数字）

                     var pName = $("#provinceId").attr("value");

                     $.getJSON("ErJLD/getCity?pName=" + pName, getcity);

                 });

             });

         });

         function getcity(obj) {

             $("#cityId").empty();

                         $.each(obj, function (m, v) {

                             $("#cityId").append("<option >" + v.areaValue + "</option>");

                         });

                     };

     </script>

 </body>

 Index.cshtml

ErJLDController.cs

 namespace Mvcproject.Controllers

 {

     //二级联动

     public class ErJLDController : Controller

     {

         ZjbEntities db = new ZjbEntities();

         //

         // GET: /Test/

         public ActionResult Index()

         {

             //pro_city province=new pro_city();

             return View();

         }

         public JsonResult getProvince() {

             List<pro_city> provinceList = (from p in db.pro_city where p.level ==  select p).ToList();

             JsonResult Jprovince = new JsonResult();

             Jprovince.Data = provinceList;

             Jprovince.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

             return Jprovince;

         }

         public JsonResult getCity(string pName)

         {

             //string pid = (from p in db.pro_city where p.areaValue == pName select p.id).ToString();

             //int id = int.Parse(pid);

             int id = int.Parse(pName);

             List<pro_city> cityList = (from p in db.pro_city where p.parentId == id select p).ToList();

             JsonResult Jcity = new JsonResult();

             Jcity.Data = cityList;

             Jcity.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

             return Jcity;

         }

     }

 }

 ErJLDController.cs

asp.net mvc jQuery 城市二级联动的更多相关文章

  1. jq简单城市二级联动实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

    上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...

  3. js实现城市二级联动列表

    这个是一个同事写的,我看着有用,就cv下来了. 程序功能主要逻辑是: 1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏 2.一级标签选中城市时,二级标签显示在页面,并列出响应市区 3.当 ...

  4. jQuery下拉列表二级联动插件

    jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...

  5. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

    上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...

  6. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作

    /****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENT ...

  7. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  8. jquery 城市三级联动

    js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...

  9. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

随机推荐

  1. Flume

    http://www.ibm.com/developerworks/cn/data/library/bd-1404flumerevolution/index.html https://flume.ap ...

  2. 项目总结笔记系列 Autonomy IDOL Server KT Session1

    在说上面这个图之前,先说一下背景知识. Autonomy地址: http://www.autonomy.com.cn http://www.autonomy.com.cn/content/home/i ...

  3. Scalaz（24）－ 泛函数据结构： Tree-数据游览及维护

    上节我们讨论了Zipper-串形不可变集合(immutable sequential collection)游标,在串形集合中左右游走及元素维护操作.这篇我们谈谈Tree.在电子商务应用中对于xml, ...

  4. js中对象使用

    简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一个含有两个属性的对象,x.y var o2={x:12,y:'12',name:'JS'}; ...

  5. ASP.NET MVC下使用文件上传

    这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3.  根目录下添加新 ...

  6. loadrunner录制回放常见问题及解决办法

    1．录制错误    1)录制本机 WebTours 或录制本地网站无法打开    当 使 用 Vista 以 后 的 操 作 系 统 时 , 会 出 现 该 问 题 . 这 是 由 于 在 本 地Wi ...

  7. Node.JS模块系统

    1.什么是模块? 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的.换言之,一个 Node.js ...

  8. shiro realm 注解失败问题解决过程

    做为一名在.net混了八九年的老兵油子,转战java时间并不长,刚开始做项目完全是凭借对C#的认识来做,虽然遇到一些问题,但实际结果显示C#在语言上和java还是有很大相似度,而且微软的MVC与Spr ...

  9. java 编译时的初始化顺序

    有的时候,java的初始化会对我的工作照成很大影响,所以简单介绍一下, 首先介绍简单的变量的初始化:在类的内部,变量定义的先后顺序决定了初始化的顺序,即使变量定义散布于方法定义之间,它也会先于构造器和 ...

  10. mesos 学习笔记1 -- mesos安装和配置

    参考资料: 官方文档:http://mesos.apache.org/documentation 中文翻译:http://mesos.mydoc.io/ GitHub:https://github.c ...