页面效果图：

数据库表结构：

首先在数据库中创建省级、城市的表，我的表如下：我用了一张表放下了省级、城市的数据，用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. marquee标签滚动效果

    <marquee></marquee>标签,默认从最右侧往左滚动: direction:设置滚动的方向: height:设置标签高度, width:设置标签宽度: behavi ...

  2. 【背景建模】SOBS

    SOBS(self-Organizing through artificial neural networks)是一种基于自组织神经网络的背景差分算法,主要是借鉴神经网络的特性,一个网络输入节点,对应 ...

  3. windows根据端口号找进程

    d:\>netstat -ano | findstr "7777" TCP 127.0.0.1:7776 127.0.0.1:7777 ESTABLISHED 11764 T ...

  4. easyui textarea回车导致datagrid 数据无法展示的问题

    textarea换行 在easyui中的datagrid中使用行内编辑时textarea的换行保存到mysql数据库为\n在textarea中输入回车符 在js读取textarea中的值有\r\n然后 ...

  5. NotSerializableException解决方法

    NotSerializableException 问题描述: 想要写入对象的时候的时候回抛出NotSerializableException:类名 原因: 写入的对象没有序列化,即没有实现java.i ...

  6. 国际化支持(I18N)

    本章译者:@nixil 使用国际化支持(I18N)能够使你的应用根据用户所在地区的不同选择不同的语言.下面介绍如何在引用中使用国际化. 只允许使用UTF-8 Play只支持UTF-8一种字符编码.这是 ...

  7. [转]精通JS正则表达式

    原文路径:http://www.jb51.net/article/25313.htm 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式 ...

  8. HTML中网页超链接设计

    一.超链接的概念: 1>用<a>标签实现.href属性设置了要链接的网址. 链接路径URL:Uniform Resource Locator的缩写.统一资源定位符. 4部分组成:协议 ...

  9. sql搜索数据库中具有某列的表

    在接口中明明有某个节点,但在数据库中却找不到,为此本人写了一个sql,以供快速查找. Select distinct syscolumns.name,sysobjects.name from sysc ...

  10. [deviceone开发]-购物车的简单示例

    一.简介 主要是演示listview所在的ui和模板cell所在的ui之间数据的交互,点击一行,可以通过加减数量,自动把所有选中的汽车价格显示在底部. 二.效果图 三.示例地址: http://sou ...