省市区联动(MVC分布视图)
1、调用分布视图
//Html辅助方法 返回参数的值 存储在ProvinceId、CityId、DistrictId中
@{Html.RenderAction("GetProvince","Home",new{ProvinceId=Model.provinceid,CityId=Model.cityid,DistrictId=Model,districtid});}
2、实体类
//省份
public class Province
{
public int ProvinceId{get;set;}
public string ProvinceName{get;set;}
} //市
public class City
{
public int CityId{get;set;}
public string CityName{get;set;}
} //县区
public class District
{
public int DistrictId{get;set;}
public string DistrictName{get;set;}
}
3、控制器方法
//省
public PartialViewResult GetProvince(int ProvinceId=,int CityId=,int DistrictId=)
{
ViewData["provinceID"]=ProvinceId;
ViewData["cityId"]=CityId;
ViewData["districtId"]=DistrictId;
List<Province> listPro=获取到省份的方法;
Return PartialView(listPro);
} //市
public PartialViewResult GetCity(int ProvinceId=,int CityId=,int DistrictId=)
{
if(ProvinceId==)
{
ViewData["provinceID"]=;
ViewData["cityId"]=;
ViewData["districtId"]=;
Return PartialView();
}
else
{
ViewData["provinceID"]=ProvinceId;
ViewData["cityId"]=CityId;
ViewData["districtId"]=DistrictId;
List<City> listPro=获取到城市的方法(ProvinceId);
Return PartialView(listPro);
}
} //县区
public ActionResult GetDistrict(int CityId=,int DistrictId=)
{
if(CityId==)
{
ViewData["cityId"]=;
ViewData["districtId"]=;
Return PartialView();
}
else
{
ViewData["cityId"]=CityId;
ViewData["districtId"]=DistrictId;
List<District> listPro=获取到县区的方法(CityId);
Return PartialView(listPro);
}
} //省市联动(异步刷新)
///<summary>
///根据传值的省份Id加载出隶属的城市
///</summary>
[HttpPost]
public JsonResult AsynGetCity()
{
string dealType=Request["GetCity"];
string id=Request["ID"];
List<City> listC=得到城市的方法(id);
return Json(listC);
} //市县区联动(异步刷新)
///<summary>
///根据传值的城市id加载出隶属的县区
///</summary>
[HttpPost]
public JsonResult AsynGetDistrict()
{
string dealType=Request["GetDistrict"];
string id=Request["ID"];
List<District> listDis=获取到县区的方法(id);
return Json(listDis);
}
4、省份视图
@model List<Province>
<select id="ddlregions1" selectset="regions" name="ddlregions1" onchange="getValue(this[selectedIndex].value)">
<option value="">--请选择--</option>
@foreach(var item in Model)
{
if((int)ViewDate["provinceID"]==item.ProvinceId)
<option value="@ViewData["provinceID"]" selected="selected">@item.ProvinceName</option>
else
<option value="@item.ProvinceId">@item.ProvinceName</option>
}
</select>
<span>省</span>
<!--市分布视图-->
@{Html.RenderAction("GetCity","Home",new {ProvinceId=ViewData["provinceID"],City=ViewData["cityId"],DistrictId=ViewData["districtId"]});} <!--Js-->
<!--Jquery引用。。。。。。。-->
<script>
function BindData(id,controlld)
{
$("#"+controlld).empty();
$("#"+controlld).append("<option value='0'>--请选择--</option>");
$.ajax({
type:"post",
url:"AsynGetCity",
dataType:"json",
data:{"dealType":"GetCity","ID":id},
success:function(result)
{
$(result).each(function(){
$("#"+controlld).append("<option value='"+this.CityId+"'>"+this.CityName+"</option>");
})
}
})
}
$(function(){
$("#ddlRegions1").change(function(){
var id=$(this).val();
$("#ddlRegions3").empty();
$("#ddlRegions3").append("<option value='0'>--请选择--</option>");
BindData(id,"ddlRegions2");
})
})
</script>
5、城市视图
@model List<City>
<select id="ddlRegions2" onchange="getValue(this[selectedIndex].value)" selectset="regions">
@if((int)ViewData["ProvinceID"]==)
{
<option value=''>--请选择--</option>
}else
{
<option value=''>--请选择--</option>
foreach(var item in Model)
{
if((int)ViewData["cityId"]==item.CityId || (int)ViewData["cityId"]==)
<option value="@ViewData["cityId"]" selected="selected">@item.CityName</option>
else
<option value="@item.CityId">@item.CityName</option>
}
}
</select>
<span>市</span>
<!--县区-->
@{Html.RenderAction("GetDistrict","Home",new{CityId=ViewData["cityId"],DistrictId=ViewData["districtId"]});} <!--Js-->
<!--jQuery引用-->
<script>
function BindData(id,controlld)
{
$("#"+controlld).empty();
$("#"+controlld).append("<option value='0'>--请选择--</option>");
$.ajax({
type:"post",
url:"AsynGetDistrict",
dataType:"json",
data:{"dealType":"GetDistrict","ID":id}
success:function(result)
{
$(result).each(function(){
$("#"+controlld).append("<option value='"+this.DistrictId+"'>"+this.DistrictName+"</option>")
})
}
})
}
$(function(){
$("#ddlRegions2").change(function(){
var id=$(this).val();
BindData(id,"ddlRegions3");
})
})
</script>
6、县区视图
@model List<District>
<select id="ddlRegions3" name="ddlRegions3" onchange="getValue(this[selectedIndex].value)" selectset="regions">
@if((int)ViewData["cityId"]==)
<option value="">--请选择--</option>
else
<option value="">--请选择--</option>
@foreach(var item in Model)
{
if((int)ViewData["districtId"]==item.DistrictId)
<option value="@ViewData["districtId"]">@item.DistrictName</option>
else
<option value="@item.DistrictId">@item.DistrictName</option>
}
</select>
<span>县/区</span>
省市区联动(MVC分布视图)的更多相关文章
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
js replace 全局替换 js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...
- MVC+EFCore 完整教程18 -- 升级分布视图至 View Component
之前我们详细介绍过分布视图(partial view),在有一些更加复杂的场景下,.net core为我们提供了更加强大的组件 view component, 可以认为view component是 ...
- 基于AngularJs + Bootstrap + AngularStrap 省市区联动实践
什么是 AngularJs?网上一大堆资料,没能真正说明白. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式, 有双向绑定,指令等特性,这是具有革命性 ...
- 【兼容写法】HttpServerUtility.Execute 在等待异步操作完成时被阻止。关键词:MVC,分部视图,异步
异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html MVC6之前的版本,对分部视图的异步支持不是很好 问题: 视图里面有分布视图:@{ ...
- ASP.NET MVC Razor视图(2)
昨天介绍了一些Razor的基本语法,几天接着向下说: 补成一个,上次介绍了怎么输出原样的文本,用<text></text>标签,下面再介绍一种语法: @{@:我爱北京} 这个 ...
- 使用asp.net mvc部分视图渲染html
为了提升用户体验,一般我们采用ajax加载数据然后根据数据渲染html,渲染html可以使用前端渲染和服务器端渲染. 前端渲染 使用前端模版引擎或MVC框架,例如underscore.js的templ ...
- MVC分部视图@Html.Partial
加载分布视图的方式: //1.以视图名使用当前文件夹下的视图(如果没有找到,则搜索 Shared 文件夹) @Html.Partial("_test") //加载对应文件 /Vie ...
- EF5+MVC4系列(11)在主视图中用Html.RenderPartial调用分部视图(ViewDate传值);在主视图中按钮用ajax调用子action并在子action中使用return PartialView返回分布视图(return view ,return PartialView区别)
一:主视图中使用Html.RenderPartial来调用子视图(注意,这里是直接调用子视图,而没有去调用子Action ) 在没有使用母版页的主视图中(也就是设置了layout为null的视图中), ...
- ASP.NET MVC——Razor视图引擎
Razor是MVC框架视图引擎,我们今天就来说一说Razor视图引擎. 首先还是来创建一个基础项目叫Razor来演示. 先来定义一个Model叫Product public class Product ...
随机推荐
- Python Counter()计数工具
Table of Contents 1. class collections.Counter([iterable-or-mapping]) 1.1. 例子 1.2. 使用实例 2. To Be Con ...
- C#基础--局部类型Partial
局部类型 原本来在同一个命名(namespace)空间下 是不允许相同的类(class)名存在的 但是partial关键字可以允许在同一个namespace下有想通过的类名存在 写法 下面的两个不 ...
- 在xml文件中写入&符号时需要对其进行转义
如:在xml文件中保存这样的测试文件: <?xml version="1.0" encoding="utf-8"?> <datas> & ...
- android 布局之滑动探究 scrollTo 和 scrollBy 方法使用说明
涉及到滑动,就涉及到VIEW,大家都知道,Android的UI界面都是由一个一个的View以及View的派生类组成,View作为基类,而常用的布局里面的各种布局就是它派生出来的ViewGroup的子类 ...
- 【Mood-18】github 使用指南
windows下使用教程: http://www.cnblogs.com/dongdong230/p/4211221.html repository not found error问题解决(需确定gi ...
- Jboss中不能正常的解析EL表达式
在写好EL表达是后发现在页面原封不动的现实成了${user.name}没有解析出来,我还以为那里出了问题,原来只要在页面添加上<%@ page isELIgnored="false&q ...
- 【MongoDB】MongoDB服务器搭建(Unix/Linux)
1.安装MongboDB安装包(开源免费的哟) 在Mac 下 brew install mongoDB 就可以啦 安装要等一会儿,大概200M 2. cd到MongboDB文件夹 - 如果是用home ...
- VMware系统运维(七)vCenter Inventory Server安装
1.vCenter Inventory Server安装即vCenter 清单服务 2.下一步 3.接受协议,下一步 4.选择安装位置,下一步 5.设置域名,注意在安装之前一定要加域,嘻嘻. 6.设置 ...
- ionic 项目的启动屏幕
首先要做好图片,图片的大小最好是192px*192px(icon.png).2208px*2208px(splash.png); 然后在APP项目中建立一个新文件夹,resources,将准备好的两张 ...
- hdu 3804 树链剖分
思路:将边权排序,然后插入线段树,这样就可以直接用二分查找确定答案. #pragma comment(linker, "/STACK:1024000000,1024000000") ...