页面效果图：

数据库表结构：

首先在数据库中创建省级、城市的表，我的表如下：我用了一张表放下了省级、城市的数据，用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. Tsung测试Tigase

    用两台主机坐Tigase的Tsung测试,其中1台运行Tigase,另1台运行Tsung. 1.Tigase服务器设置 tigase.conf: #osgiEnabled=(true|false) # ...

  2. Scalaz（53）－ scalaz-stream: 程序运算器－application scenario

    从上面多篇的讨论中我们了解到scalaz-stream代表一串连续无穷的数据或者程序.对这个数据流的处理过程就是一个状态机器(state machine)的状态转变过程.这种模式与我们通常遇到的程序流 ...

  3. selenium webdriver自动化对日期控件的处理

    用JS去掉日期输入框的readOnly属性. 代码如下: ----------------------------------------------------------------------- ...

  4. 分布式环境下rabbitmq发布与订阅端

    假设rabbitmq配置了集群,且客户端连接rabbitmq-server通过lvs实现HA但一般情况下不建议做LB.在分布式系统的环境下,由于节点的非预知性,使用spring amqp模板进行配置不 ...

  5. Awesomplete - 零依赖的简单自动完成插件

    Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建.你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置 ...

  6. 变量作用域&函数作用域

    一. 变量作用域 1)全局变量 在全局环境下声明的变量被视为全局变量. 在没有使用var进行声明的时候,变量就被定义为全局变量.在ES5的严格模式下,如果变量没有使用var来声明是会报错的. 2)局部 ...

  7. 【初探移动前端开发03】jQuery Mobile（上）

    前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...

  8. Junit单元测试笔记

    什么是单元测试? 单元测试是开发者编写的一小段代码,用于检验被测代码的一个很小的.很明确的功能是否正确. 单元测试目的? 执行单元测试,是为了证明某段代码的行为确实和开发者所期望的一致. 白盒测试和单 ...

  9. READ TABLE ..... BINARY SEARCH问题

    Read Table 的语法很多,这里说一种特殊情况,Read Table 中查询的时候对标准内表经常有一种二分优化查找,用Binary search的时候首先必须要有查询条件:但如果查询条件满足的项 ...

  10. Xcode 7中http通信出现如下错误：Application Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

    原因 在iOS9 beta1中,苹果将原http协议改成了https协议,使用 TLS1.2 SSL加密请求数据. 解决方法 编辑 info.plist,加入如下设置: <plist> & ...