ASP.NET MVC2 Jquery 下拉列表三级联动-CSDN博客

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

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