MVC TIP6：级联菜单

最新推荐文章于 2024-09-07 17:02:25 发布
最新推荐文章于 2024-09-07 17:02:25 发布
阅读量93 收藏
点赞数
文章标签： 测试 json c#
原文链接：https://yq.aliyun.com/articles/351082
版权

级联菜单最有名的是省市级联，如果你还没有这样的数据库，请从这里下载Province.rar。

1：MODEL

准备3个Model，如下：

public  class  Province
{
     public  int  id { get ; set ; }
     public  string  provinceID { get ; set ; }
     public  string  province { get ; set ; }
}
public  class  Province
{
     public  int  id { get ; set ; }
     public  string  provinceID { get ; set ; }
     public  string  province { get ; set ; }
}
public  class  Area
{
     public  int  id { get ; set ; }
     public  string  areaID { get ; set ; }
     public  string  area { get ; set ; }
     public  string  father { get ; set ; }
}

2：Controller部分的数据获取

如下：

public  class  CityController : Controller
{
     string  conn = "Data Source=.;Initial Catalog=ForestFire;User Id=sa;Password=sa;" ;
 
     public  ActionResult Index()
     {
         return  View( "" );
     }
 
     public  ActionResult GetProvince()
     {
         if  (!Request.IsAjaxRequest())
         {
             return  Content( "请不要非法方法,这是不道德的行为！" );
         }
         string  sql = "select * from dbo.povince" ;
         using  (DataSet ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, sql))
         {
             var  provinces = DataTableHelper.DataTable2Objects<Province>(ds.Tables[0]);
             return  Json(provinces, JsonRequestBehavior.AllowGet);
             //return Json(provinces);
         }
     }
 
     public  ActionResult GetCity( string  id)
     {
         if  (!Request.IsAjaxRequest())
         {
             return  Content( "请不要非法方法,这是不道德的行为！" );
         }
         string  sql = "select * from dbo.city where father=@fatherID" ;
         SqlParameter p1 = new  SqlParameter( "@fatherID" , id);
         using  (DataSet ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, sql, p1))
         {
             var  citys = DataTableHelper.DataTable2Objects<City>(ds.Tables[0]);
             return  Json(citys, JsonRequestBehavior.AllowGet);
             //return Json(provinces);
         }
     }
 
     public  ActionResult GetArea( string  id)
     {
         if  (!Request.IsAjaxRequest())
         {
             return  Content( "请不要非法方法,这是不道德的行为！" );
         }
         string  sql = "select * from dbo.area where father=@areaID" ;
         SqlParameter p1 = new  SqlParameter( "@areaID" , id);
         using  (DataSet ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, sql, p1))
         {
             var  areas = DataTableHelper.DataTable2Objects<Area>(ds.Tables[0]);
             return  Json(areas, JsonRequestBehavior.AllowGet);
             //return Json(provinces);
         }
     }
 
}

3：前台

如下：

<%@ Page Title= ""  Language= "C#"  MasterPageFile= "~/Views/Shared/Site.Master"  Inherits= "System.Web.Mvc.ViewPage<dynamic>"  %>
 
<asp:Content ID= "Content1"  ContentPlaceHolderID= "TitleContent"  runat= "server" >
     Index.aspx
</asp:Content>
<asp:Content ID= "Content2"  ContentPlaceHolderID= "MainContent"  runat= "server" >
     <script type= "text/javascript" >
         $(document).ready(function () {
             $( "#getP" ).click(function () {
                 GetByJquery();
             });
             $( "#ddlProvince" ).change(function () { GetCity() });
             $( "#ddlCity" ).change(function () { GetArea() });
         });
 
         function GetByJquery() {
             $( "#ddlProvince" ).empty();
             //                        $.getJSON("GetProvince", function (result) {
             //                            alert("abc");
             //                            $.each(result, function (i, item) {
             //                                $("<option></option>")
             //                                .val(item["id"])
             //                                .text(item["province"])
             //                                .appendTo($("#ddlProvince"));
             //                            });
             //                            alert("xxx");
             //                            //GetCity();
             //                        });
             htmlobj = $.ajax({
                 url: "City/GetProvince" ,
                 async: false ,
                 complete: function (XmlHttpRequest, textStatus) {
                 },
                 success: function (result) {
                     $.each(result, function (i, item) {
                         $( "<option></option>" )
                                             .val(item[ "provinceID" ])
                                             .text(item[ "province" ])
                                             .appendTo($( "#ddlProvince" ));
                     });
                     GetCity();
                 },
                 error: function (XmlHttpRequest, textStatus, errorThrown) {
                     var  $errorPage = XmlHttpRequest.responseText;
                     alert($( "#ErrorMsg" , $errorPage).text());
                     //alert($("#ErrorMsg", XmlHttpRequest.responseText).text());
                 },
                 dataType: "json"
             });
         }
 
         function GetCity() {
             $( "#ddlCity" ).empty();
             alert($( "#ddlProvince" ).val());
             htmlobj = $.ajax({
                 url: "City/GetCity/"  + $( "#ddlProvince" ).val(),
                 async: false ,
                 complete: function (XmlHttpRequest, textStatus) {
                 },
                 success: function (result) {
                     $.each(result, function (i, item) {
                         $( "<option></option>" )
                                             .val(item[ "cityID" ])
                                             .text(item[ "city" ])
                                             .appendTo($( "#ddlCity" ));
                     });
                     GetArea();
                 },
                 error: function (XmlHttpRequest, textStatus, errorThrown) {
                     var  $errorPage = XmlHttpRequest.responseText;
                     alert($( "#ErrorMsg" , $errorPage).text());
                     //alert($("#ErrorMsg", XmlHttpRequest.responseText).text());
                 },
                 dataType: "json"
             });
         }
 
         function GetArea() {
             $( "#ddlArea" ).empty();
             alert($( "#ddlCity" ).val());
             htmlobj = $.ajax({
                 url: "City/GetArea/"  + $( "#ddlCity" ).val(),
                 async: false ,
                 complete: function (XmlHttpRequest, textStatus) {
                 },
                 success: function (result) {
                     $.each(result, function (i, item) {
                         $( "<option></option>" )
                                             .val(item[ "areaID" ])
                                             .text(item[ "area" ])
                                             .appendTo($( "#ddlArea" ));
                     });
                 },
                 error: function (XmlHttpRequest, textStatus, errorThrown) {
                     var  $errorPage = XmlHttpRequest.responseText;
                     alert($( "#ErrorMsg" , $errorPage).text());
                     //alert($("#ErrorMsg", XmlHttpRequest.responseText).text());
                 },
                 dataType: "json"
             });
         }
 
         
 
     </script>
     <input id= "getP"  name= "getP"  type= "button"  value= "获取列表"  />
     <h2>
         xxx</h2>
     <table>
         <tr>
             <td>
                 < select  id= "ddlProvince"   />
             </td>
             <td>
                 < select  id= "ddlCity"  />
             </td>
             <td>
                 < select  id= "ddlArea"  />
             </td>
         </tr>
     </table>
</asp:Content>

最后的效果：

image

代码下载：MvcApplication520110801.rar


本文转自最课程陆敏技博客园博客，原文链接：http://www.cnblogs.com/luminji/archive/2011/08/01/2123960.html，如需转载请自行联系原作者

weixin_33981932
关注
.netMVC架构下无刷新三级级联菜单源码
12-28
运用DropdownList、数据绑定、Mvc架构实现的无刷新数据库获取级联菜单。修改webconfig文件下的链接字，即可绑定到自己的数据库，快来试试吧。
mvc实现三级联动菜单例子（带数据库添加即可）
09-01
在MVC LINQ TO ENTITY中实现三级联动菜单
ASP.NET MVC中一个地区级联菜单的例子
dielianhuan1546的博客
09-06 155
前段时间，在项目中遇到了一个问题，在会员中心当会员注册或者会员修改自己地区信息的时候，如果选择最底级地区，整个地区回退到最顶级地区的选择菜单，整个详细的地区信息不能正常显示。于是，从前端js函数代码着手调查产生这个效果的原因。刚开始的时候,在前端js函数中增加判断所获取的地区是否是最底级地区的判断,,但是一直解决不了这个问题。后来，转变思路，在后台获取地区信息的函数中当用户选择是底级地区...
学习笔记之MVC级联及Ajax操作
汪飞的博客
03-06 660
由于刚转型到MVC，MVC的架构模式很多不是很清楚，比如今天就想做个级联的操作，因为之前的ASP.NET的方式是通过：控件-->添加事件-->后台编写级联事件进行触发，但是这个MVC就不同了。于是乎，开始网上搜寻相关的资料，大部分都是给了一部分，但是不给出详细的说明，练习的话都是半成品；所以为了大家的方便，我把级联的开发过程贴出来，当然大神级的就自动略过了。 第一、数据库数据准备（Mysql
MVC3小技巧09（MVC3树形控件）
wilsonke的专栏
10-23 4914
- 引言 MVC3 提供了基于jQuery、jQuery UI的基础应用，缺少许多常用的组件，例如：页面布局、导航菜单、树形、日期时间等等。 03-树形控件 MVC3 没有提供树形控件，很多初学者到处寻找MVC3 Razor 引擎使用的树形控件，可能无奈之下选择了Telerik、Devexpress、ComponentOne等整套开发组件，又是一个从头学习的开始。
HTML5 和 VS2015 高级教程（一）
龙哥盟
08-15 353
HTML5 涵盖了一系列广泛的技术，包括对 HTML 标记、级联样式表和客户端脚本的改进。此外，浏览器有一些重要的增强，使得提供一些优秀的 web 应用变得更加容易。虽然官方规范仍在发展中，浏览器供应商也在追赶，但已经有相当多的功能可用。此外，正如您将在接下来的几章中看到的，Visual Studio 和 ASP.NET 平台已经扩展到利用 HTML 特性集。Opera 以前的版本会显示刻度线来帮助分级范围控制，但是现在的版本没有，Chrome 也没有。但是，您可以使用datalist标签自己添加这些内容。
【译著】第1章 伟大的思想 — 《精通ASP.NET MVC 3框架》
weixin_34080571的博客
04-17 1634
C H A P T E R 1 ■ ■ ■ What’s the Big Idea? 伟大的思想 ASP.NET MVC is a web development framework from Microsoft that combines the effectiveness and tidiness of model-view-controller (MVC) architectur...
谷歌：级联语言模型是通用推理系统的未来.pdf
08-12
"谷歌：级联语言模型是通用推理系统的未来.pdf" 本文总结了谷歌Research团队关于级联语言模型（Language Model Cascades）在通用推理系统中的应用前景。级联语言模型是指通过多个语言模型的级联来实现复杂的多步...
JavaScript小案例：级联列表.html
05-26
1. 什么是级联列表？ 2. 级联列表有什么用？ 3. 怎么实现相应的操作？ 4. 两种方法实现对应省市的下拉操作 一、什么是级联？ 1.级联还指用来设计一对多关系。举个例子：一个表存放学生的信息:表A（姓名，性别，年龄...
Matlab级联失效代码-CascadedFailuresInPower:级联失效
06-13
Matlab级联失效代码#此存储库是用于控制相互依赖网络中的级联故障的 MATLAB 代码。 我的恢复过程有两个阶段： 避免进一步级联 恢复计划 避免进一步级联：对于电力网络级联故障的案例研究，我们可以使用直流潮流模型 ...
CascadingSDK:级联SDK
06-05
级联 2.7 SDK 该项目包含用于创建 Cascading SDK 版本的构建脚本。 可在线获取的 SDK 发行版在单个存档中包含 Cascading 2.6 和相关项目。 此 SDK 中包含的每个项目或扩展在下载并包含在由这些构建脚本创建的包中...
Matlab级联失效代码-cascading-faiulure:级联故障
06-13
在电力系统中，级联故障是一种复杂且严重的问题，它可能导致大规模停电。本文将深入探讨Matlab中处理级联故障的代码实现，以及如何利用直流潮流模型和JFNK（Justified Finite Difference Newton-Krylov）方法进行...
基于MVC的三级联动
博客
01-22 1155
Html代码：<div class="box"> <select class="make"> <option>请选择品牌</option> </select> <select class="model"> <option>请选择车型</option> </select> <select class="car">
下拉列表级联菜单封装(直接拿来使用)
专注web开发
08-15 3194
使用说明   var param={ data:subjectList, //处理的数据（必选）数据格式：[{object Object},{object Object}]  showId:'levelId',//显示的数据标签ID（必选） idKey:'subjectId',//数据的ID（必选） pidKey:'parentId',//数据的父ID（必选） nameKey:'s
F12抓包06-4：导出metersphere脚本
最新发布
土小帽_Tester的博客
09-07 383
本课再次使用线上接口测试网站https://httpbin.org/forms/post，演示操作，使用浏览器F12检查工具如何导出测试脚本到接口测试工具如postman、jmeter、metersphere，以及其他浏览器。
OpenCV对象检测：级联分类器训练教程
6. 应用：最后，将训练好的级联分类器保存为XML或YML文件，然后在实际应用中加载这个文件，用于图像中瓷碗的检测。 在执行上述步骤时，可能会遇到找不到文件、编译问题或其他配置错误。确保所有依赖项正确安装，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值