MVC 二级联动
后台代码,获取数据如下:
/// <summary>
/// 获取省份
/// </summary>
public JsonResult GetProvincelist()
{
return Json(db.Province.ToList(),JsonRequestBehavior.AllowGet);
}
/// <summary>
/// 获取城市
/// </summary>
/// <param name="pid"></param>
/// <returns></returns>
public JsonResult GetCitylist(int pid)
{
List<CityModel> list=db.City.Where(c => c.Province.PID == pid).ToList();
List<SelectListItem> item = new List<SelectListItem>();
foreach (var City in list)
{
item.Add(new SelectListItem { Text = City.CityName, Value = City.CID.ToString() });
}
return Json(item, JsonRequestBehavior.AllowGet);
}
定义两个下拉框:
<span>省份:</span>
<select id="Province" >
<option>请选择</option>
</select> <span>市:</span>
<select id="City">
<option>请选择</option>
</select>
使用jquery获取控制器里返回的值加载到下拉框中:
<script type="text/javascript">
$(function () {
GetProvince(); //加载省份
$("#Province").change(function () {
GetCity();
});
});
function GetProvince() {
// $("#Province").empty();
$.getJSON(
"/Home/GetProvincelist",
function (data) {
alert(data);
$.each(data, function (i, item) {
$("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));
})
});
// GetCity();
}
function GetCity() {
$("#City").empty();
$.getJSON(
"/Home/GetCitylist",
{ pid: $("#Province").val() },
function (data) {
$.each(data, function (i, item) {
$("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City")); })
});
}
</script>
MVC 二级联动的更多相关文章
- MVC二级联动使用$.ajax方法获取后端返回的字符串
在"MVC二级联动使用$.getJSON方法"中使用$.getJSON()获取后端返回的JSon. 本篇使用jQuery的$.ajax()获取后端返回的字符串,实现二级联动. ...
- MVC二级联动使用$.getJSON方法
本篇使用jQuery的$.getJSON()实现二级联动. □ View Models 1: namespace MvcApplication1.Models 2: { 3: public cla ...
- 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 ...
- Javascript中二级联动
主要使用到到了地址JSON格式,来做,没有涉及数据库的读取. <!DOCTYPE html><html><head> <meta charset=" ...
- JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串,和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动
JavaScript日历控件开发 概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...
- iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装
之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...
随机推荐
- MySQL(3)-MySQL Workbench
远程连接mysql不上,CentOS7下的防火墙关闭命令,别光看iptables的状态. # systemctl stop firewalld # systemctl mask firewalld ...
- Sql Server查询性能优化之不可小觑的书签查找
小小程序猿SQL Server认知的成长 1.没毕业或工作没多久,只知道有数据库.SQL这么个东东,浑然分不清SQL和Sql Server Oracle.MySql的关系,通常认为SQL就是SQL S ...
- Linux安装R记要
R在Linux上的安装有一些坑(Windows上安装会方便许多),在这里记录,希望可以减少读者不必要的麻烦.我的服务器是SUSE Linux 64位,无法接入互联网(安全原因,你懂的). 到R官网ht ...
- Linux之sort
sort是在Linux里非常常用的一个命令,管排序的,集中精力,五分钟搞定sort,现在开始! 1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按AS ...
- 将png图片转换为字体图标
字体图标不仅可以随意调整大小,而且可以避免在页面制作过程中引用N多的图片,发送请求造成的流量浪费,因此,我们可以将图标的icon转换成字体图标: 方法一: 1.将png格式的图片转换成svg格式: 网 ...
- Python3自定义http/https请求拦截mitmproxy脚本
[本文出自天外归云的博客园] 脚本内容 代码如下: from mitmproxy import http, ctx from multiprocessing import Lock class Fil ...
- 【css】css 中文字体 unicode 对照表
css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用 \5B8B\4F53 来表示.具体参考下表: 中文名 英文名 unicode 宋体 SimSun \5B8B\4F53 黑体 S ...
- Java知多少(30)多态和动态绑定
在Java中,父类的变量可以引用父类的实例,也可以引用子类的实例. 请大家先看一段代码: public class Demo { public static void main(String[] ar ...
- Java知多少(47)多重catch语句的使用
某些情况,由单个代码段可能引起多个异常.处理这种情况,你可以定义两个或更多的catch子句,每个子句捕获一种类型的异常.当异常被引发时,每一个catch子句被依次检查,第一个匹配异常类型的子句执行.当 ...
- Top useful .Net extension methods
Special extension methods were released in C# 3.0. Developers have continuously been looking for way ...