MVC二级联动使用$.getJSON方法

本篇使用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:

□ 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:

□ 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:

结果：

参考资料：

※ Kevin Tseng

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

MVC二级联动使用$.ajax方法获取后端返回的字符串
在"MVC二级联动使用$.getJSON方法"中使用$.getJSON()获取后端返回的JSon. 本篇使用jQuery的$.ajax()获取后端返回的字符串,实现二级联动. ...
通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动（xml方法）
之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题第一种方法是xml方法 1 ...
Html.DropDownListFor() 二级联动（$.getJSON）
Control: public ActionResult GetPositionName(int parentid) //发布新职位页面中的根据职位类别,获取职位名称 { List<Catego ...
MVC 二级联动
后台代码,获取数据如下: /// <summary> /// 获取省份 /// </summary> public JsonResult GetProvincelist() { ...
MVC 二级联动可以试试
后台代码,获取数据如下: /// <summary> 2 /// 获取省份 3 /// </summary> 4 public JsonResult GetProvinceli ...
asp.net mvc jQuery 城市二级联动
页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...
Spring MVC中Ajax实现二级联动
今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody p ...
C# MVC LayUI实现下拉框二级联动
一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...
(实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果大类: 前端技术 ...

随机推荐

算法笔试题整理——升级蓄水池 && 字符串数字表达式计算值 && 求旅游完所有景点需要的最少天数 && 宝箱怪
1. 小米笔试题——升级蓄水池题目描述: 在米兔生活的二维世界中,建造蓄水池非常简单. 一个蓄水池可以用n个坐标轴上的非负整数表示,代表区间为[0-n]范围内宽度为1的墙壁的高度. 如下图1,黑色部 ...
CentOS6.5配置rsyslog
如何在RHEL 6.5安装和配置rsyslog现在7.6版本/ CentOS的6.5 .The情况是,安装和RHEL / CentOS的6.5安装rsyslog现在集中式日志服务器上.所有的客户端服务 ...
#CSS 文本溢出部分显示省略号
单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...
Redis（二）CentOS7安装Redis4.0.10与集群搭建
一 Redis单机安装 1 Redis下载安装 1.1 检查依赖环境(Redis是C语言开发,编译依赖gcc环境) [root@node21 redis-]$ gcc -v -bash: gcc: c ...
CentOS7.5搭建ELK6.2.4集群及插件安装
一简介 Elasticsearch是一个高度可扩展的开源全文搜索和分析引擎.它允许您快速,近实时地存储,搜索和分析大量数据.它通常用作支持具有复杂搜索功能和需求的应用程序的底层引擎/技术. 下载地址 ...
2015 icpc北京赛区 D 最小割
题目大意:给你一棵技能树,如果要学习一个技能,那么它之前的技能要全部学完,第 i 个点需要ai 能学习每条边有一个消耗c 如果支付c那么就能去掉这条边, 你还可以kejin 花费di 就能直接学习 ...
002 Ajax中传输格式为HTML
一: 1.介绍返回的数据可以直接插入到需要的地方. 2.优缺点二:程序大纲 1.结构三:程序 1.css body { background: #ffb url("logo.png&q ...
32：从1到n整数中1出现的次数
import java.util.Arrays; /** * 面试题32:从1到n整数中1出现的次数求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数? * 为此他特别数了 ...
python获取当前系统的桌面的路径
一,用内置的winreg(推荐) import winregdef get_desktop(): key = winreg.OpenKey(winreg.HKEY_CURRENT_USER,\ ...
Ninject
一.为什么要使用依赖注入框架依赖注入框架也叫IoC容器.它的作用使类与类之间解耦我们看看为什么要用依赖注入框架,举个几个梨子: 1,高度耦合的类有一个Order类,Order类是用于订单操作的, ...

MVC二级联动使用$.getJSON方法

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

随机推荐

热门专题