ASP.NET MVC2 Jquery 下拉列表三级联动

在传统的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 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>

前台通过发送Ajax请求向控制器索取数据。得到Json格式的数据以后，循环遍历。

如果有什么疑问请联系我。