本篇使用jQuery的$.getJSON()实现二级联动。

 

□ View Models

   1:  namespace MvcApplication1.Models
   2:  {
   3:      public class Province
   4:      {
   5:          public int ID { get; set; }
   6:          public string Name { get; set; }
   7:      }
   8:   
   9:      public class City 
  10:      {
  11:          public int ID { get; set; }
  12:          public int ProvinceID { get; set; }
  13:          public string Name { get; set; }
  14:          public string ZipCode { get; set; }
  15:      }
  16:  }
  17:   

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

□ 模拟一个服务层获取数据

   1:  using System.Collections.Generic;
   2:  using System.Linq;
   3:  using MvcApplication1.Models;
   4:   
   5:  namespace MvcApplication1
   6:  {
   7:      public static class Service
   8:      {
   9:          public static List<Province> GetProvices()
  10:          {
  11:              List<Province> result = new List<Province>();
  12:              result.Add(new Province(){ID = 1,Name = "山东省"});
  13:              result.Add(new Province(){ID = 2,Name = "江苏省"});
  14:              return result;
  15:          }
  16:   
  17:          public static List<City> GetCitiesByProvince(int provinceId)
  18:          {
  19:              List<City> result = new List<City>();
  20:              result.Add(new City(){ID=1,Name = "济南市",ProvinceID = 1,ZipCode = "001"});
  21:              result.Add(new City() { ID = 2, Name = "青岛市", ProvinceID = 1, ZipCode = "002"});
  22:              result.Add(new City() { ID = 3, Name = "南京市", ProvinceID = 2, ZipCode = "003" });
  23:              result.Add(new City() { ID = 4, Name = "苏州市", ProvinceID = 2, ZipCode = "004" });
  24:   
  25:              return result.Where(r => r.ProvinceID == provinceId).ToList();
  26:          }
  27:      }
  28:  }
  29:   

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

□ HomeController

遍历集合，以List<SelectListItem>返回给前台视图。

   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Web.Mvc;
   4:  using MvcApplication1.Models;
   5:   
   6:  namespace MvcApplication1.Controllers
   7:  {
   8:      public class HomeController : Controller
   9:      {
  10:          public ActionResult Index()
  11:          {
  12:              return View();
  13:          }
  14:   
  15:          public JsonResult GetProvinces()
  16:          {
  17:              List<SelectListItem> items = new List<SelectListItem>();
  18:              var provinces = Service.GetProvices();
  19:              foreach (Province p in provinces)
  20:              {
  21:                  items.Add(new SelectListItem()
  22:                  {
  23:                      Text = p.Name,
  24:                      Value = Convert.ToString(p.ID)
  25:                  });
  26:              }
  27:              if (!items.Count.Equals(0))
  28:              {
  29:                  items.Insert(0, new SelectListItem(){Text = "请选择",Value = ""});
  30:              }
  31:              return Json(items, JsonRequestBehavior.AllowGet);
  32:          }
  33:   
  34:          public JsonResult GetCities(string id)
  35:          {
  36:              List<SelectListItem> items = new List<SelectListItem>();
  37:              if (!string.IsNullOrEmpty(id))
  38:              {
  39:                  var cities = Service.GetCitiesByProvince(int.Parse(id));
  40:                  foreach (City c in cities)
  41:                  {
  42:                      items.Add(new SelectListItem()
  43:                      {
  44:                          Text = string.Concat(c.ZipCode, " ",c.Name),
  45:                          Value = c.ID.ToString()
  46:                      });
  47:                  }
  48:                  if (!items.Count.Equals(0))
  49:                  {
  50:                      items.Insert(0, new SelectListItem(){Text = "请选择",Value = ""});
  51:                  }
  52:              }
  53:              return Json(items, JsonRequestBehavior.AllowGet);
  54:          }
  55:          
  56:      }
  57:  }
  58:   

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

□ Home/Index.cshtml视图

   1:  @{
   2:      ViewBag.Title = "Index";
   3:      Layout = "~/Views/Shared/_Layout.cshtml";
   4:  }
   5:   
   6:  选择省：<select id="p"></select> <br/>
   7:  选择市：<select id="c"></select>
   8:   
   9:  @section scripts
  10:  {
  11:      <script type="text/javascript">
  12:          $(function() {
  13:              getProvince();
  14:   
  15:              $('#p').change(function() {
  16:                  changeCity();
  17:              });
  18:          });
  19:   
  20:          //加载省
  21:          function getProvince() {
  22:              $.getJSON('@Url.Action("GetProvinces","Home")', function (data) {
  23:                  $('#p').empty();
  24:                  $.each(data, function(i, item) {
  25:                      $('#p').append($('<option></option>').val(item.Value).text(item.Text));
  26:                  });
  27:              });
  28:          }
  29:   
  30:          //设置城市清空
  31:          function emptyCity() {
  32:              $('#c').empty();
  33:              $('#c').append($('<option></option>').val('').text('请选择'));
  34:          }
  35:   
  36:          //根据省加载城市
  37:          function changeCity() {
  38:              var selectedProvinceId = $.trim($('#p option:selected').val());
  39:              if (selectedProvinceId.length == 0) {
  40:                  emptyCity();
  41:              } else {
  42:                  $.getJSON('@Url.Action("GetCities","Home")', { id: selectedProvinceId }, function (data) {
  43:                      $('#c').empty();
  44:                      $.each(data, function(i, item) {
  45:                          $('#c').append($('<option></option>').val(item.Value).text(item.Text));
  46:                      });
  47:                  });
  48:              }
  49:          }
  50:      </script>
  51:  }
  52:   

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

结果：

参考资料：

※ Kevin Tseng

MVC二级联动使用$.getJSON方法的更多相关文章

  1. MVC二级联动使用$.ajax方法获取后端返回的字符串

    在"MVC二级联动使用$.getJSON方法"中使用$.getJSON()获取后端返回的JSon. 本篇使用jQuery的$.ajax()获取后端返回的字符串,实现二级联动.   ...

  2. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动（xml方法）

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

  3. Html.DropDownListFor() 二级联动 （$.getJSON）

    Control: public ActionResult GetPositionName(int parentid) //发布新职位页面中的根据职位类别,获取职位名称 { List<Catego ...

  4. MVC 二级联动

    后台代码,获取数据如下: /// <summary> /// 获取省份 /// </summary> public JsonResult GetProvincelist() { ...

  5. MVC 二级联动 可以试试

    后台代码,获取数据如下: /// <summary> 2 /// 获取省份 3 /// </summary> 4 public JsonResult GetProvinceli ...

  6. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  7. Spring MVC中Ajax实现二级联动

    今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody p ...

  8. C# MVC LayUI实现下拉框二级联动

    一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...

  9. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

随机推荐

  1. POJ 3376 Finding Palindromes（manacher求前后缀回文串+trie）

    题目链接:http://poj.org/problem?id=3376 题目大意:给你n个字符串,这n个字符串可以两两组合形成n*n个字符串,求这些字符串中有几个是回文串. 解题思路:思路参考了这里: ...

  2. 由结构体成员地址计算结构体地址——list_entry()原理详解

    #define list_entry(ptr, type, member) container_of(ptr, type, member) 在进行编程的时候,我们经常在知道结构体地址的情况下,寻找其中 ...

  3. Zookeeper安装以及配置说明（三）

    Zookeeper的安装和配置非常的简单,既可以配置成单机模式,也可以配置成集群模式.如下图所示: 下面将分别进行介绍: 单机模式 下载最新稳定版本zookeeper的安装包之后(看第一篇博文), 解 ...

  4. kafka基本版与kafka acl版性能对比(单机版)

    一.场景 线上已经有kafka集群,服务运行稳定.但是因为产品升级,需要对kakfa做安全测试,也就是权限验证. 但是增加权限验证,会不会对性能有影响呢?影响大吗?不知道呀! 因此,本文就此来做一下对 ...

  5. python 删除前3天的文件

    一.需求分析 1. 删除前3天的文件 2.如果目录为空,也一并删除掉 如果使用shell脚本,一条命令就搞定了.干啥还要用python? 1. 因为需要记录一些日志,使用shell不好实现 2. 作为 ...

  6. Struts DynaActionForm example

    The Struts DynaActionForm class is an interesting feature to let you create a form bean dynamically ...

  7. Visual Studio 2017各版本安装包离线下载

    关于Visual Studio 2017各版本安装包离线下载.更新和安装的方法以及通过已下载版本减少下载量的办法 微软最近发布了正式版Visual Studio 2017并公开了其下载方式,不过由于V ...

  8. FileBeat读取特征目录及特征文件，为不同的path生成不同的Kafka Topic

    进入日志收集及监控报警这个领域,感觉一切都要从新学习. 现在周五,这周有两天用来踩坑了. 作些记录. 第一个遇到的问题,就是不同的应用组件,在k8s里,会生成不同的日志,如何采集到这些不同的日志呢? ...

  9. Html5和Css3扁平化风格网页

    前言 扁平化概念的核心意义 去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来.同时在设计元素上,则强调了抽 ...

  10. 警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclipse.jst.jee.server:fhcq-oa' did not find a matching property.

    当你在使用Eclipse运行web项目时,你可能会看到控制台出现: 警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Settin ...