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:
.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; }
结果:
参考资料:
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来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
随机推荐
- SQL中rownum和order by的执行顺序的问题
在一个SQL中,如果同时使用rownum和order by,会有一个先后顺序的问题. 比如select id1,id2 from t_tablename where rownum<3 order ...
- nginx + tomcat 集群记录
昨天晚写的时候已经下班了.时间紧迫.写的略简! 昨天说过.接到部署的任务之后.首先想到的是apache httpserver 毕竟pache.我们接触的比较多!然而部署之后遇到了很多问题.比如apac ...
- JS格式化时间并比较
JS格式化时间,然后进行比较.工作遇到的情况,然后网上找到的,记下来,下次用! </head> <body> <button onclick="myFuncti ...
- WinForm界面开发之 启动界面
我们在开发桌面应用程序的时候,由于程序启动比较慢,往往为了提高用户的体验,增加一个闪屏,也就是SplashScreen,好处有:1.让用户看到加载的过程,提高程序的交互响应:2.可以简短展示或者介绍程 ...
- 一步一步学习IdentityServer3 (8)
IdentityServer3结合Hangfire及Cookies中间件实现授权 Idr3数据库Token过期管理 GlobalConfiguration.Configuration.UseSqlSe ...
- Jmeter和LR上传文件和下载
Jmeter和LR上传文件和下载 背景: 在某个申请业务中,需要上传附件文件,然后才能提交该申请 遇到的问题: 1, 在使用Jmeter或者LR进行录制时,无法录制到上传文件的请求,只能通过Fidd ...
- bzoj 1295 1295: [SCOI2009]最长距离
思路:对于每个点出发bfs做一次dp, dp[ i ][ j ][ k ] 表示从枚举的该点能不能经过k个障碍物到达(i , j). #include<bits/stdc++.h> #de ...
- win10字体大小设置
有时图形化界面不能正常显示,需要改变字体大小来查看 更改字体大小: 更改字体:
- java对对象排序
一.前言 有时我们需要对类按照类中的某一个属性(或者多个属性)来对类的对象进行排序,有两种方法可以实现,一种方法是类实现Comparable<T>接口,然后调用Collections.so ...
- 模拟界面请求到web服务器
客户端 package com.lsw.client; import java.io.*; import java.net.*; import java.util.*; public class HT ...