这是第一使用Jquery实现城市三级数据联动的实例!之前本人没有使用过Jquery,在WebForm的开发过程中,很多时候用的是ASP.NET
Ajax,ajaxPro +JavaScript,从未使用过JS框架,最近在学习ASP.NET MVC,在最新的发布版本中,已经集成了Jquery
1.3.1,自然,也要学一学!发现使用Jquery代码果然写得比原始JS优雅!只是语法和方法太多,现在还没弄熟,还需要时间来学习.....这次是第一次使用Jquery写客户端脚本,如果大家发现更好的实现方法,请给我留言!谢谢!
注明:ASP.NET MVC 1.0 ,作者:0x001;
View
:
<script type="text/javascript">
$(document).ready(function()
{
GetByJquery();
$("#ddlProvince").change(function() {
GetCity() });
$("#ddlCity").change(function() { GetDistrict()
});
});
function GetByJquery() {
$("#ddlProvince").empty(); //清空省份SELECT控件
$.getJSON("/ajax/GetProvinceList", function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["ProvinceID"])
.text(item["ProvinceName"])
.appendTo($("#ddlProvince"));
});
GetCity();
});
}
function GetCity() {
$("#ddlCity").empty(); //清空城市SELECT控件
var url
="/ajax/GetCityList/" + $("#ddlProvince").val();
$.getJSON(url,
function(data) {
$.each(data, function(i, item)
{
$("<option></option>")
.val(item["CityID"])
.text(item["CityName"])
.appendTo($("#ddlCity"));
});
GetDistrict();
});
}
function GetDistrict() {
$("#ddlDistrict").empty();
//清空市区SELECT控件
var url = "/ajax/GetDistrictList/" +
$("#ddlCity").val();
$.getJSON(url, function(data)
{
$.each(data, function(i, item) {
$("<option></option>")
.val(item["DistrictID"])
.text(item["DistrictName"])
.appendTo($("#ddlDistrict"));
});
});
}
</script>
<table><tr><td><select
id="ddlProvince"/></td><td><select
id="ddlCity"/></td><td><select id="ddlDistrict"
/></td></tr></table>
Controller
:
using System;
using System.Collections.Generic;
using
System.Linq;
using System.Web;
using System.Web.Mvc;
using
System.Web.Mvc.Ajax;
namespace MvcBBS.Controllers
{
public class AjaxController :
Controller
{
//
// GET: /Ajax/
/// <summary>
/// 获取所有[省份]数据
///
</summary>
public ActionResult GetProvinceList()
{
if (!Request.IsAjaxRequest())
{
return Content("请不要非法方法,这是不道德的行为!");
}
BLL.Province bll = new MvcBBS.BLL.Province();
List<MvcBBS.Model.S_Province> modellist = bll.GetProvinceList();
return Json(modellist);
}
/// <summary>
/// 获取某[省份]的所有[城市]数据
///
</summary>
public ActionResult GetCityList(int id)
{
if (!Request.IsAjaxRequest())
{
return Content("请不要非法方法,这是不道德的行为!");
}
BLL.Province bll = new MvcBBS.BLL.Province();
List<MvcBBS.Model.S_City> modellist = bll.GetCityList(id);
return Json(modellist);
}
/// <summary>
/// 获取某[城市]的所有[市区]数据
///
</summary>
public ActionResult GetDistrictList(int
id)
{
if (!Request.IsAjaxRequest())
{
return Content("请不要非法方法,这是不道德的行为!");
}
BLL.Province bll = new MvcBBS.BLL.Province();
List<MvcBBS.Model.S_District> modellist = bll.GetDistrict(id);
return Json(modellist);
}
}
}
我比较喜欢使用三层+工厂模式来读写数据,O/R
Mapping不太适合我的要求!我们写的项目经常不是为了方便移植,而是选择明确的数据库,需要更高的性能,更强的业务逻辑!大家看到上面的代码,应该很熟悉,从数据库读数据到List<>中返回,并使有ASP.NET
MVC内置的Json方法转换数据并Response.
DAL
:
// BLL,Model就不贴出来了!
using System;
using System.Data;
using System.Text;
using
System.Data.SqlClient;
using System.Collections.Generic;
using
DBUtility;//请先添加引用
namespace MvcBBS.DAL
{
public class Province
{
public Province()
{}
/// <summary>
/// 获取所有省份数据
///
</summary>
/// <returns></returns>
public List<Model.S_Province> GetProvinceList()
{
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT ProvinceID,ProvinceName ");
strSql.Append("
FROM S_Province ");
List<Model.S_Province> modelList = new
List<MvcBBS.Model.S_Province>();
SqlDataReader dr =
DbHelperSQL.ExecuteReader(strSql.ToString());
while
(dr.Read())
{
Model.S_Province _model = new
MvcBBS.Model.S_Province();
_model.ProvinceID =
int.Parse(dr["ProvinceID"].ToString());
_model.ProvinceName
= dr.GetString(1);
modelList.Add(_model);
}
dr.Close();
return modelList;
}
/// <summary>
/// 获取某省份的所有城市数据
///
</summary>
/// <param
name="ProvinceID"></param>
///
<returns></returns>
public List<Model.S_City>
GetCityList(int ProvinceID)
{
StringBuilder strSql =
new StringBuilder();
strSql.Append("SELECT
CityID,CityName,ZipCode");
strSql.Append(" FROM S_City
");
strSql.Append(" WHERE ProvinceID=");
strSql.Append(ProvinceID.ToString());
List<Model.S_City> modelList = new
List<MvcBBS.Model.S_City>();
SqlDataReader dr =
DbHelperSQL.ExecuteReader(strSql.ToString());
while
(dr.Read())
{
Model.S_City _model = new
MvcBBS.Model.S_City();
_model.CityID =
int.Parse(dr["CityID"].ToString());
_model.CityName =
dr.GetString(1);
_model.ZipCode =
dr.GetString(2);
_model.ProvinceID =
ProvinceID;
modelList.Add(_model);
}
dr.Close();
return modelList;
}
/// <summary>
/// 获取某城市的所有市区
///
</summary>
/// <param
name="CityID"></param>
///
<returns></returns>
public List<Model.S_District>
GetDistrict(int CityID)
{
StringBuilder strSql = new
StringBuilder();
strSql.Append("SELECT
DistrictID,DistrictName");
strSql.Append(" FROM S_District
");
strSql.Append(" WHERE CityID=");
strSql.Append(CityID.ToString());
List<Model.S_District> modelList = new
List<MvcBBS.Model.S_District>();
SqlDataReader dr =
DbHelperSQL.ExecuteReader(strSql.ToString());
while
(dr.Read())
{
Model.S_District _model = new
MvcBBS.Model.S_District();
_model.DistrictID =
int.Parse(dr["DistrictID"].ToString());
_model.DistrictName =
dr.GetString(1);
_model.CityID = CityID;
modelList.Add(_model);
}
dr.Close();
return modelList;
}
}
}
转载请注明: 0x001.com ,谢谢!大家多多提点建议!本人需要学习和改进的动力!
分享到:
相关推荐
asp.net Dropdownlist结合CheckBoxList多选下拉框
纯正的ASP.NET MVC下拉框联动,可以实现无刷新更换第二下拉框内的值。内部写了两种实现方式,第一种是读取控制器/模型[数据库]的值放入下拉列表框;第二种是在视图中分别定义下拉列表框的值。希望对大家有帮助
该项目适用于WebForm转MVC开发的人员:运用BootStrap,MVC5,EF 6,多层架构,中英文切换,自定义显示列,分页控件应有尽有下载来看看把,里面有详细的教程代码:运用范围很广泛
主要为大家详细介绍了ASP.NET MVC下拉框联动实现方法,感兴趣的小伙伴们可以参考一下
主要介绍了详解ASP.NET MVC之下拉框绑定四种方式,详细的讲诉了4种方法,具有一定的参考价值,有需要的可以了解一下。
asp二级联动下拉框,三级联动下拉框,asp二级联动下拉框,三级联动下拉框, 可能传错了 sorry
基于ASP.NET实现的可编辑的下拉框控件程序例子
纯净SSM简单整合,数据库资源根据实体类自己创建。内有ssm增删改查,ajax结合jquery做下拉框,省市联动,多选框等。所有jar包都放在lib里,搭好数据库完美可用。供新手学习。
jQuery模拟select下拉框三级城市联动代码.zip
jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框
Ajax实现下拉框三级联动,实现数据库动态连接,无刷新动态更新 MyEclipse+Ajax+SQL Server 2005
ajax+asp+acces实现联动无限级下拉框
Asp+Ajax无限级联动下拉框菜单Access版
主要介绍了asp.net中js+jquery添加下拉框值和后台获取的具体实现,需要的朋友可以参考下
Ajax实现二级/三级联动下拉框---servlet版
js+ajax 实现select下拉框无限级动态添加,代码简洁方便,哥想了很久才做出来的,欢迎使用
一直想自己做个博客网站,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的...