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


本文转自 BruceAndLee 51CTO博客,原文链接:http://blog.51cto.com/leelei/347636,如需转载请自行联系原作者

相关文章
|
4天前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
27 0
|
4天前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
48 0
|
3天前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
4天前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
23 0
|
4天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
32 0
|
4天前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
122 5
|
9月前
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
126 0
|
10月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
67 0
|
10月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
121 0
|
6月前
|
开发框架 自然语言处理 前端开发
基于ASP.NET MVC开发的、开源的个人博客系统
基于ASP.NET MVC开发的、开源的个人博客系统
52 0

相关课程

更多