在传统的webForms页面中，实现下拉列表三级联动甚至是8联动都是很简单的事情。可是在ASP.Net MVC中就不这么容易了。今天我就讲讲下拉三级联动，三级联动会了，那么8级9级也不在话下。
先看看Linq to class
看见了吧就是这三张表分别是公司，变电站，设备。ok我们看看视图
好的，接下来我们看看代码的实现，先看后台控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using MvcApplication1.Models;
namespace MvcApplication1.Controllers
{
public
class TestController : Controller
{
TestDataContext testDataContext =
new TestDataContext();
public ActionResult Index()
{
return View(
"~/Views/Index.aspx");
}
public JsonResult GetCompany()
{
IQueryable<TCompany> queryResult = testDataContext.TCompany;
return Json(queryResult.ToList(),JsonRequestBehavior.AllowGet);
}
public JsonResult GetPlant(
string id)
{
return Json(testDataContext.TPlant.Where(P => P.companyId ==
int.Parse(id)).ToList(),JsonRequestBehavior.AllowGet);
}
public JsonResult GetLogicEquipment(
string id)
{
string[] ids = id.Split(
",".ToCharArray());
string companyId = ids[0];
string plantId = ids[1];
return Json(testDataContext.TLEquipment.Where(E => E.companyId ==
int.Parse(companyId) && E.plantId ==
int.Parse(plantId)).ToList(),JsonRequestBehavior.AllowGet);
}
}
}
第一个方法获取所有的公司列表，第二个方法根据公司Id获取变电站列表，第三个方法根据公司，变电站，获取设备。注意，这里的参数要全部是id，而且必须是id。为什么呢？因为你的路由器是id啊。这里估计很多人不注意，结果请求发不到控制器，也不知道怎么回事。说到这里看看路由
public
static
void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute(
"{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default",
// Route name
"{controller}/{action}/{id}",
// URL with parameters
new { controller =
"Home", action =
"Index", id = "" }
// Parameter defaults
);
}
第三个参数是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格式的数据以后，循环遍历。
本文转自 BruceAndLee 51CTO博客，原文链接：http://blog.51cto.com/leelei/347636，如需转载请自行联系原作者
