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

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

传统的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. iot表输出按主键列排序,heap表不是

    <pre name="code" class="html"> create table t1 (id char(10) primary key,a1 ...

  2. Hadoop大数据零基础高端实战培训系列配文本挖掘项目

  3. char *和char[]的区别,困扰很长时间了,总结下

    char c1[] = "hello";// char *c2 = "hello";// 区别1: c1是一个局部数组,c2是一个全局数组. 局部数组c1是局部 ...

  4. Android使用SharedPreferences保存数组

    核心原理: 对象序列化 步骤 1.要保存的对象实现序列化Serializable 2.将序列化的对象保存String(本文的做法是保存为byte数组在转为16进制的String类型保存起来) 3.将保 ...

  5. 【ASP.NET Web API教程】4.2 路由与动作选择

    原文:[ASP.NET Web API教程]4.2 路由与动作选择 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内容. 4.2 Routing ...

  6. 与众不同 windows phone (16) - Media(媒体)之编辑图片, 保存图片到相册, 与图片的上下文菜单“应用程序...”和“共享...”关联, 与 Windows Phone 的图片中心集成

    原文:与众不同 windows phone (16) - Media(媒体)之编辑图片, 保存图片到相册, 与图片的上下文菜单"应用程序..."和"共享..." ...

  7. HDU 1254 推箱子游戏(搞了一下午。。。)

    中文题目:http://acm.hdu.edu.cn/showproblem.php?pid=1254 一开始常规的人用来做主导,想着想着不对劲,其实是箱子为主导,人只是箱子能否推进的一个判断. 可以 ...

  8. STL 之 queue、priority_queue 源代码剖析

    /* * Copyright (c) 1994 * Hewlett-Packard Company * * Permission to use, copy, modify, distribute an ...

  9. Android Studio中如何打JAR包

    Android Studio中对于library类型的Moudle,默认打出来的是AAR包, 但有时候我们的SDK还需要共享给一些其他eclipse的项目使用,这样我们就需要输出JAR包, 可以通过在 ...

  10. STM32学习笔记2-系统时钟知识及程序配置

    一:基本知识 1.  STM32F103ZE有5个时钟源:HSI.HSE.LSI.LSE.PLL.   ①.HSI是快速内部时钟,RC振荡器,频率为8MHz,精度不高.   ②.HSE是快速外部时钟, ...