上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考。

要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化。如:选择中国,则另个一下拉框里显示中国各个省份。

传统的HTML方式比较简单,实际上基于MVC的实现方式也大同小异。

直接上代码:

public class DP_Provice
    {
        public int proviceID { get; set; }

public string ProviceName { get; set; }

public int ProviceNode { get; set; }

public virtual List<DP_City> citySource { get; set; }

}

public class DP_City
    {
        public int CityNode { get; set; }

public string CityName { get; set; }

public string ProviceNode { get; set; }

}

对以上涉及到的实体类予以赋值,暂时使用一个静态类初始化简单数据:

public static class DPDataSource
    {
        public static List<DP_Provice> InitalData()
        {
            List<DP_Provice> source = new List<DP_Provice>
            {
                new DP_Provice{ ProviceNode=1, ProviceName="北京", citySource=new List<DP_City>{
                 new DP_City{
                  CityNode=11, CityName="北京海淀"
                 },
                 new DP_City{
                 CityNode=12,CityName="北京西城"
                 }                
                }},

new DP_Provice{ ProviceNode=2, ProviceName="山东", citySource=new List<DP_City>{
                 new DP_City{
                  CityNode=21, CityName="济南"
                 },
                 new DP_City{
                 CityNode=22,CityName="德州"
                 }                
                }},

new DP_Provice{ ProviceNode=3, ProviceName="河北", citySource=new List<DP_City>{
                 new DP_City{
                  CityNode=31, CityName="石家庄"
                 },
                 new DP_City{
                 CityNode=32,CityName="衡水"
                 }                
                }}
            };

return source;
        }

}

具体在Controller中的调用,因为使用的JQuery中的AJAX方式,所以返回的结果类型为Json;

public ActionResult Index()
        {
            return View("DPShow");
        }

List<DP_Provice> source = DPDataSource.InitalData();

public JsonResult GetProvinceSource()
        {
            if (source == null || source.Count < 0)
            {
                source = DPDataSource.InitalData();
            }
            return Json(source, JsonRequestBehavior.AllowGet);
        }

public JsonResult GetCitySource(string proviceName)
        {
            source = DPDataSource.InitalData();
            List<DP_City> citySource = new List<DP_City>();
            citySource = source.Where(a => a.ProviceNode.ToString().Contains(proviceName)).First().citySource;
            return Json(citySource, JsonRequestBehavior.AllowGet);
        }

数据准备完毕,此时需要Razor视图中进行绑定和展示,代码如下:

@model MvcApplication.Models.DP_Provice
@{
    ViewBag.Title = "DPShow";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">

$(function myfunction() {
        GetPlant();

//初始化省份数据

$("#ddlProvince").change(function ff() {  //设置当省份下拉列表发生变化时,更新城市数据列表
            GetCity();
        });

});

function GetPlant() {
        $("#ddlProvince").empty();
        var url = "/Dropdown/GetProvinceSource/";

$.getJSON(url, function (data) {

$.each(data, function (i, item) {
                $("<option></option>")
                        .val(item["ProviceNode"])
                        .text(item["ProviceName"])
                        .appendTo($("#ddlProvince"));
            });
            GetCity();
        });
    }
    function GetCity() {
        $("#ddlCity").empty();
        var temp=$("#ddlProvince").val();
        var url ="@Url.Action("GetCitySource", "Dropdown")" ;

//使用MVC3中Url.Action 方法参数依次为:aciton ; controller ; area ;

$.getJSON(url,{"proviceName":temp}, function (data) {

//中间需要用到参数 所以采用在getJSON方法中实现

$.each(data, function (i, item) {
                $("<option></option>")
                    .val(item["CityNode"])
                    .text(item["CityName"])
                    .appendTo($("#ddlCity"));
            });
        });
    }

</script>
<! DOCTYPE html />
<h2>
    下拉列表联动</h2>
<table>
    <tr>
        <td>
            <select id="ddlProvince" />
        </td>
        <td>
            <select id="ddlCity" />
        </td>
    </tr>
</table>

说明:

一般来讲,采用MVC实现下拉列表绑定可以有多种方式,主要是数据绑定方式可以使用JQuery中的Ajax 方式,同时也可以使用自定义的基于MVC 的 Url.Acion 方式,个人建议使用基于MVC 的 Url.Acion。

一来是支持方式比较灵活,如果中间涉及到数据类型复杂,可以自定义,实现数据封装;

二来是JQuery 中URL在传递参数时需要格式化,否则将无法找到指定的Action。

如有大家对上述说法有异议或者更好的实现方案,请给予指正或说明,谢谢。

基于MVC3下拉列表联动(JQuery)的更多相关文章

  1. JQuery+Ajax实战三级下拉列表联动(八)

    本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...

  2. JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)

    ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载 ...

  3. JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)

    ajax 下拉列表联动的用法. ajax的定义: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...

  4. 无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two]

    无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...

  5. 下拉列表联动显示(Car表) 三级联动

    .Models namespace 下拉列表联动显示_Car表_.Models { public class ProductorBF { private MyDBDataContext _contex ...

  6. 基于Mvc3,Ef,领域驱动电子商务系统的EShop开发

    分享自己从代码小工一步步走向搭架子,ING... 简单了解UnitOfWork 摘要: UnitOfWorkUnit Of Work模式,即工作单元,它是一种数据访问模式.它是用来维护一个由已经被业务 ...

  7. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  8. 10分钟学会基于ASP.NET的 JQuery实例 (转)

    本文介绍如何在ASP.NET(ASP.NET/AJAX)里使用基于JQuery的AJAX技术.(源代码下载见最后) 在使用JQuery前,请到www.jquery.com下载最新版本的js代码,然后再 ...

  9. 基于HTML5 Canvas和jQuery 的绘图工具的实现

    简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...

随机推荐

  1. JavaScript移除数组元素

    //数组移除长度方法 var array=[]; array[0]="张三"; array[1]="李四"; array[2]="王五"; ...

  2. c++/c/java 资源共享群

    Hi,我邀请你加入360云盘文件共享群:c++&c&java, 打开邀请链接:http://qun.yunpan.360.cn/10005202 , 输入邀请码:1357

  3. FFT算法的物理意义

    FFT是离散傅立叶变换的高速算法,能够将一个信号变换到频域.有些信号在时域上是非常难看出什么特征的,可是如果变换到频域之后,就非常easy看出特征了.这就是非常多信号分析採用FFT变换的原因.另外,F ...

  4. CArray

    CArray是windows下的相当于动态数组的模板类.用起来及其方便,近期由于需要在JNI下的C语言中使用,自己参考CArray类函数,及其自己需要使用到的部分函数用C++实现出来,以供自己使用,在 ...

  5. linux ifconfig命令使用详解

    Linux下网卡命名规律:eth0,eth1.第一块以太网卡,第二块.lo为环回接口,它的IP地址固定为127.0.0.1,掩码8位.它代表你的机器本身. 1.ifconfig是查看网卡的信息. if ...

  6. uva--562Dividing coins +dp

    题意: 给定一堆硬币,然后将他们分成两部分,使得两部分的差值最小;输出这个最小的差值. 思路: 想了好久都没想到一个合适的状态转移方程.后面看了别人的题解后,才知道能够转成背包问题求解. 我们将全部的 ...

  7. boost库在工作(33)网络服务端之三

    在这个例子里,表示服务器与一个客户端的沟通渠道,就是一个连接,封装为类CConnect.它是当服务器接收到一个客户端连接请求之后创建的,主要用来就是管理这个连接的生命周期,以及数据的接收和发送.从生命 ...

  8. 贪心算法-找零钱(C#实现)

    找零钱这个问题很清楚,无非就是始终拿可以取的最大面值来找,最后就使得张数最小了,这个实现是在假设各种面值足够多的情况下. 首先拖出一个界面来,最下面是一个listbox控件 对应的代码:问题比较简单, ...

  9. [Android学习笔记]LayoutInflater的使用

    LayoutInflater用于动态载入布局,然后获取到布局中定义完成的控件引用 常在动态加载布局,和Adapter中用到 使用步骤:1.通过LayoutInflater加载xml布局文件2.从载入的 ...

  10. Android开发技术周报

    Android开发技术周报 原文  http://androidweekly.cn/android-dev-weekly-issue48/ 教程 深入理解Android之Gradle Gradle是当 ...