在传统的webForms页面中,实现下拉列表三级联动甚至是8联动都是很简单的事情。可是在ASP.Net MVC中就不这么容易了。今天我就讲讲下拉三级联动,三级联动会了,那么8级9级也不在话下。
先看看Linq to class
![](http://blog.51cto.com/attachment/201007/201007111278828120546.jpg?x-oss-process=image/resize,w_1400/format,webp)
看见了吧就是这三张表分别是公司,变电站,设备。ok我们看看视图
![](http://leelei.blog.51cto.com/attachment/201007/201007111278829040109.jpg?x-oss-process=image/resize,w_1400/format,webp)
好的,接下来我们看看代码的实现,先看后台控制器
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
第一个方法获取所有的公司列表,第二个方法根据公司Id获取变电站列表,第三个方法根据公司,变电站,获取设备。注意,这里的参数要全部是id,而且必须是id。为什么呢?因为你的路由器是id啊。这里估计很多人不注意,结果请求发不到控制器,也不知道怎么回事。说到这里看看路由
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
![](http://blog.51cto.com/images/editer/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
第三个参数是id,如果你实在不想在控制器传id这么个参数,那你就去改路由吧。
<
%@ Page
Title
="" Language="C#"
MasterPageFile
="~/Views/Shared/Site.Master"
Inherits
="System.Web.Mvc.ViewPage" %
>
< asp:Content ID ="Content1" ContentPlaceHolderID ="TitleContent" runat ="server" >
</asp:Content>
< asp:Content ID ="Content2" ContentPlaceHolderID ="MainContent" runat ="server" >
< script src ="../Scripts/jquery-1.3.2.min.js" type ="text/javascript" > </script>
< script type ="text/javascript" >
$(document).ready(function () {
GetByJquery();
$("#ddlCompany").change(function () { GetPlant() });
$("#ddlPlant").change(function () { GetLogicEquipment() });
});
function GetByJquery() {
$("#ddlCompany").empty();
$.getJSON("/Test/GetCompany/",function (data) {
$.each(data, function (i, item) {
$(" < option > </option>")
.val(item["companyId"])
.text(item["companyName"])
.appendTo($("#ddlCompany"));
});
GetPlant();
});
}
function GetPlant() {
$("#ddlPlant").empty();
var url = "/Test/GetPlant/" + $("#ddlCompany").val()+"/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$(" < option > </option>")
.val(item["plantId"])
.text(item["plantName"])
.appendTo($("#ddlPlant"));
});
GetLogicEquipment();
});
}
function GetLogicEquipment() {
$("#ddlLogicEquipment").empty();
var url = "/Test/GetLogicEquipment/"+$("#ddlCompany").val()+","+$("#ddlPlant").val()+"/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$(" < option > </option>")
.val(item["LogicEquipmentId"])
.text(item["logiEquipmentName"])
.appendTo($("#ddlLogicEquipment"));
});
});
}
</script>
< table >
< tr >
< td >
< select id ="ddlCompany" />
</td>
< td >
< select id ="ddlPlant" />
</td>
< td >
< select id ="ddlLogicEquipment" />
</td>
</tr>
</table>
</asp:Content>
< asp:Content ID ="Content1" ContentPlaceHolderID ="TitleContent" runat ="server" >
</asp:Content>
< asp:Content ID ="Content2" ContentPlaceHolderID ="MainContent" runat ="server" >
< script src ="../Scripts/jquery-1.3.2.min.js" type ="text/javascript" > </script>
< script type ="text/javascript" >
$(document).ready(function () {
GetByJquery();
$("#ddlCompany").change(function () { GetPlant() });
$("#ddlPlant").change(function () { GetLogicEquipment() });
});
function GetByJquery() {
$("#ddlCompany").empty();
$.getJSON("/Test/GetCompany/",function (data) {
$.each(data, function (i, item) {
$(" < option > </option>")
.val(item["companyId"])
.text(item["companyName"])
.appendTo($("#ddlCompany"));
});
GetPlant();
});
}
function GetPlant() {
$("#ddlPlant").empty();
var url = "/Test/GetPlant/" + $("#ddlCompany").val()+"/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$(" < option > </option>")
.val(item["plantId"])
.text(item["plantName"])
.appendTo($("#ddlPlant"));
});
GetLogicEquipment();
});
}
function GetLogicEquipment() {
$("#ddlLogicEquipment").empty();
var url = "/Test/GetLogicEquipment/"+$("#ddlCompany").val()+","+$("#ddlPlant").val()+"/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$(" < option > </option>")
.val(item["LogicEquipmentId"])
.text(item["logiEquipmentName"])
.appendTo($("#ddlLogicEquipment"));
});
});
}
</script>
< table >
< tr >
< td >
< select id ="ddlCompany" />
</td>
< td >
< select id ="ddlPlant" />
</td>
< td >
< select id ="ddlLogicEquipment" />
</td>
</tr>
</table>
</asp:Content>
前台通过发送Ajax请求向控制器索取数据。得到Json格式的数据以后,循环遍历。
![](http://leelei.blog.51cto.com/attachment/201007/201007111278829216453.png?x-oss-process=image/resize,w_1400/format,webp)
![](http://leelei.blog.51cto.com/attachment/201007/201007111278829167390.png?x-oss-process=image/resize,w_1400/format,webp)
本文转自 BruceAndLee 51CTO博客,原文链接:http://blog.51cto.com/leelei/347636,如需转载请自行联系原作者