本篇使用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. ROS二进制日志包 ROS binary logger package

    原文网址: 1 http://www.ros.org/news/2017/02/ros-binary-logger-package.html 2 https://github.com/CNR-ITIA ...

  2. python 统计MySQL大于100万的表

    一.需求分析 线上的MySQL服务器,最近有很多慢查询.需要统计出行数大于100万的表,进行统一优化. 需要筛选出符合条件的表,统计到excel中,格式如下: 库名 表名 行数 db1 users 1 ...

  3. 涨姿势系列之——内核环境下花式获得CSRSS进程id

    这个是翻别人的代码时看到的,所以叫涨姿势系列.作者写了一个获取CSRSS进程PID的函数,结果我看了好久才看懂是这么一个作用.先放上代码 HANDLE GetCsrPid() { HANDLE Pro ...

  4. CF 586A 找1的个数和101的个数

    Sample test(s) input 50 1 0 1 1 output 4 input 71 0 1 0 0 1 0 output 4 input 10 output 0 # include & ...

  5. 支持多个title，解决主副标题分别对齐

  6. 【51nod】1773 A国的贸易

    题解 FWT板子题 可以发现 \(dp[i][u] = \sum_{i = 0}^{N - 1} dp[i - 1][u xor (2^i)] + dp[i - 1][u]\) 然后如果把异或提出来可 ...

  7. poj1611 The Suspects（并查集）

    题目链接 http://poj.org/problem?id=1611 题意 有n个学生,编号0~n-1,m个社团,每个社团有k个学生,如果社团里有1个学生是SARS的疑似患者,则该社团所有人都要被隔 ...

  8. Java 中的数据类型

    我们学习Java就是为了编写程序完成功能,而什么是程序呢?程序 = 数据结构 + 算法. 分开看,数据结构指的是数据与数据之间的关系,那我们先来了解一下Java中的数据都是怎么表示的呢 ?也就是说数据 ...

  9. Effective C++ —— 模板与泛型编程（七）

    C++ templates的最初发展动机很直接:让我们得以建立“类型安全”的容器如vector,list和map.然而当愈多人用上templates,他们发现templates有能力完成愈多可能的变化 ...

  10. [leetcode shell]192. Word Frequency

    统计words.txt中每个单词出现的次数并排序 解法1: cat words.txt | tr -s ' ' '\n' | sort | uniq -c | sort -r | awk '{prin ...