在传统的webForms页面中,实现下拉列表三级联动甚至是8联动都是很简单的事情。可是在ASP.Net MVC中就不这么容易了。今天我就讲讲下拉三级联动,三级联动会了,那么8级9级也不在话下。
先看看Linq to class
![](https://i-blog.csdnimg.cn/blog_migrate/9594161063187b0377bf8ba3c7e7488b.png)
看见了吧就是这三张表分别是公司,变电站,设备。ok我们看看视图
![](https://i-blog.csdnimg.cn/blog_migrate/d1ab09389413a54a5353e520c330a18d.png)
好的,接下来我们看看代码的实现,先看后台控制器
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
第一个方法获取所有的公司列表,第二个方法根据公司Id获取变电站列表,第三个方法根据公司,变电站,获取设备。注意,这里的参数要全部是id,而且必须是id。为什么呢?因为你的路由器是id啊。这里估计很多人不注意,结果请求发不到控制器,也不知道怎么回事。说到这里看看路由
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d608a01840fefd0e145dfeac03617766.png)
第三个参数是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格式的数据以后,循环遍历。
![](https://i-blog.csdnimg.cn/blog_migrate/18a091fde7b16ec63cbe7d79c48f0942.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ffd8aac4d2d535725af6c69fbb07a501.png)
如果有什么疑问请联系我。