MVC 三级联动下拉列表菜单

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

weixin_30776863

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

阅读量118

点赞数

文章标签：测试 json javascript ViewUI

原文链接：http://www.cnblogs.com/ziye16888/archive/2013/05/22/3092103.html

版权

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