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

最新推荐文章于 2019-05-15 19:57:22 发布

原创最新推荐文章于 2019-05-15 19:57:22 发布 · 191 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#测试 #javascript #json #ViewUI

本文详细讲解了如何在 ASP.NET MVC 中实现下拉列表的三级联动功能，包括使用 LINQ 来获取公司、变电站和设备的数据，并通过 AJAX 请求与控制器交互来动态加载数据。

在传统的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格式的数据以后，循环遍历。