级联菜单最有名的是省市级联，如果你还没有这样的数据库，请从这里下载Province.rar。
1：MODEL
准备3个Model，如下：
public
class
Province
{
public
int
id {
get
;
set
; }
public
string
provinceID {
get
;
set
; }
public
string
province {
get
;
set
; }
}
public
class
Province
{
public
int
id {
get
;
set
; }
public
string
provinceID {
get
;
set
; }
public
string
province {
get
;
set
; }
}
public
class
Area
{
public
int
id {
get
;
set
; }
public
string
areaID {
get
;
set
; }
public
string
area {
get
;
set
; }
public
string
father {
get
;
set
; }
}
|
2：Controller部分的数据获取
如下：
public
class
CityController : Controller
{
string
conn =
"Data Source=.;Initial Catalog=ForestFire;User Id=sa;Password=sa;"
;
public
ActionResult Index()
{
return
View(
""
);
}
public
ActionResult GetProvince()
{
if
(!Request.IsAjaxRequest())
{
return
Content(
"请不要非法方法,这是不道德的行为！"
);
}
string
sql =
"select * from dbo.povince"
;
using
(DataSet ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, sql))
{
var
provinces = DataTableHelper.DataTable2Objects<Province>(ds.Tables[0]);
return
Json(provinces, JsonRequestBehavior.AllowGet);
//return Json(provinces);
}
}
public
ActionResult GetCity(
string
id)
{
if
(!Request.IsAjaxRequest())
{
return
Content(
"请不要非法方法,这是不道德的行为！"
);
}
string
sql =
"select * from dbo.city where father=@fatherID"
;
SqlParameter p1 =
new
SqlParameter(
"@fatherID"
, id);
using
(DataSet ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, sql, p1))
{
var
citys = DataTableHelper.DataTable2Objects<City>(ds.Tables[0]);
return
Json(citys, JsonRequestBehavior.AllowGet);
//return Json(provinces);
}
}
public
ActionResult GetArea(
string
id)
{
if
(!Request.IsAjaxRequest())
{
return
Content(
"请不要非法方法,这是不道德的行为！"
);
}
string
sql =
"select * from dbo.area where father=@areaID"
;
SqlParameter p1 =
new
SqlParameter(
"@areaID"
, id);
using
(DataSet ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, sql, p1))
{
var
areas = DataTableHelper.DataTable2Objects<Area>(ds.Tables[0]);
return
Json(areas, JsonRequestBehavior.AllowGet);
//return Json(provinces);
}
}
}
|
3：前台
如下：
<%@ Page Title=
""
Language=
"C#"
MasterPageFile=
"~/Views/Shared/Site.Master"
Inherits=
"System.Web.Mvc.ViewPage<dynamic>"
%>
<asp:Content ID=
"Content1"
ContentPlaceHolderID=
"TitleContent"
runat=
"server"
>
Index.aspx
</asp:Content>
<asp:Content ID=
"Content2"
ContentPlaceHolderID=
"MainContent"
runat=
"server"
>
<script type=
"text/javascript"
>
$(document).ready(function () {
$(
"#getP"
).click(function () {
GetByJquery();
});
$(
"#ddlProvince"
).change(function () { GetCity() });
$(
"#ddlCity"
).change(function () { GetArea() });
});
function GetByJquery() {
$(
"#ddlProvince"
).empty();
// $.getJSON("GetProvince", function (result) {
// alert("abc");
// $.each(result, function (i, item) {
// $("<option></option>")
// .val(item["id"])
// .text(item["province"])
// .appendTo($("#ddlProvince"));
// });
// alert("xxx");
// //GetCity();
// });
htmlobj = $.ajax({
url:
"City/GetProvince"
,
async:
false
,
complete: function (XmlHttpRequest, textStatus) {
},
success: function (result) {
$.each(result, function (i, item) {
$(
"<option></option>"
)
.val(item[
"provinceID"
])
.text(item[
"province"
])
.appendTo($(
"#ddlProvince"
));
});
GetCity();
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
var
$errorPage = XmlHttpRequest.responseText;
alert($(
"#ErrorMsg"
, $errorPage).text());
//alert($("#ErrorMsg", XmlHttpRequest.responseText).text());
},
dataType:
"json"
});
}
function GetCity() {
$(
"#ddlCity"
).empty();
alert($(
"#ddlProvince"
).val());
htmlobj = $.ajax({
url:
"City/GetCity/"
+ $(
"#ddlProvince"
).val(),
async:
false
,
complete: function (XmlHttpRequest, textStatus) {
},
success: function (result) {
$.each(result, function (i, item) {
$(
"<option></option>"
)
.val(item[
"cityID"
])
.text(item[
"city"
])
.appendTo($(
"#ddlCity"
));
});
GetArea();
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
var
$errorPage = XmlHttpRequest.responseText;
alert($(
"#ErrorMsg"
, $errorPage).text());
//alert($("#ErrorMsg", XmlHttpRequest.responseText).text());
},
dataType:
"json"
});
}
function GetArea() {
$(
"#ddlArea"
).empty();
alert($(
"#ddlCity"
).val());
htmlobj = $.ajax({
url:
"City/GetArea/"
+ $(
"#ddlCity"
).val(),
async:
false
,
complete: function (XmlHttpRequest, textStatus) {
},
success: function (result) {
$.each(result, function (i, item) {
$(
"<option></option>"
)
.val(item[
"areaID"
])
.text(item[
"area"
])
.appendTo($(
"#ddlArea"
));
});
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
var
$errorPage = XmlHttpRequest.responseText;
alert($(
"#ErrorMsg"
, $errorPage).text());
//alert($("#ErrorMsg", XmlHttpRequest.responseText).text());
},
dataType:
"json"
});
}
</script>
<input id=
"getP"
name=
"getP"
type=
"button"
value=
"获取列表"
/>
<h2>
xxx</h2>
<table>
<tr>
<td>
<
select
id=
"ddlProvince"
/>
</td>
<td>
<
select
id=
"ddlCity"
/>
</td>
<td>
<
select
id=
"ddlArea"
/>
</td>
</tr>
</table>
</asp:Content>
|
最后的效果：
代码下载：MvcApplication520110801.rar
本文转自最课程陆敏技博客园博客，原文链接：http://www.cnblogs.com/luminji/archive/2011/08/01/2123960.html，如需转载请自行联系原作者
