页面效果图：

数据库表结构：

首先在数据库中创建省级、城市的表，我的表如下：我用了一张表放下了省级、城市的数据，用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. MySQL Error Handling in Stored Procedures

    http://www.mysqltutorial.org/mysql-error-handling-in-stored-procedures/ mysql存储过程中的异常处理   定义异常捕获类型及处 ...

  3. Go语言的编程范式

    由于比较古怪的语言特性,感觉代码的封装性是一种不同的思路. 包管理的火热程度居然没有nodejs高,这是为什么 package form import ( "encoding/gob&quo ...

  4. PHP 导出Excel 文档

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  5. 【我的产品观】开发wangEditor一年总结

    1. 引言 标题说是一周年,其实是不是正好是一周年,我也忘记了,光从github的提交记录看也不准确.印象中觉得,如果要论想法,到现在一年多了,如果要论实际写代码,可能差不多正好一年. 从8月底在济南 ...

  6. Material UI – Material Design CSS 框架

    Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才 ...

  7. 刷新拜拜～gulp-livereload

    早就想要自动自动自动刷新了啊,曾经用grunt实现过,但是是yeoman建好的..其中很多任务我是用不到的啊,为了干净还是得要自己写啊哈哈(现在我只想要自动刷新). 首先node是必须的了-就不说怎么 ...

  8. VS无法启动 IISExpress web 服务器

    VS无法启动 IISExpress web 服务器     今天把原来的VS卸载重装了,重装之后启动一个web项目时发现启动不起来,提示如下:     在网上查找资料之后发现是由于WebMatrix也 ...

  9. AdaBoost算法实现

    # -*- coding: utf-8 -*- # -------------------------------------------------------------------------- ...

  10. UITableView中的cell的优化

    1.cell的重用 所谓的cell的重用就是,视图加载的时候只会创建当前视图中的cell,或者比当前视图多一点的cell, 当视图滚动的时候,滚出屏幕的cell会放进缓存中,滚进屏幕的cell会根据I ...