ASP.NET MVC中下拉列表的实现

最新推荐文章于 2022-02-03 12:06:40 发布

lvzhqi

最新推荐文章于 2022-02-03 12:06:40 发布

阅读量2.7k

点赞数

分类专栏： ASP.NET MVC 文章标签： asp.net mvc function jquery url class

本文链接：https://blog.csdn.net/lvzhqi/article/details/4268608

版权

ASP.NET MVC 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

可以通过jQuery的ajax请求在页面重实现级联列表的效果，主要步骤如下：

1，扩展jQuery函数，编写清空何加载下拉列表的函数，代码如下：

2，在controller中编写方法，从数据库中取得数据并序列化为JSON对象，源代码如下：

// //Get kinds public ActionResult getKinds() { //IQueryable<SelectData> sl; //SelectData[] sl = new SelectData[1]; //int i = 0; List<SelectData> sl = new List<SelectData>(); var kinds = infoRepository.FindAllKinds(); foreach (var kind in kinds) { SelectData sd = new SelectData() { caption = kind.kind_desc, value = kind.info_kind.ToString() }; sl.Add(sd); } return Json(sl); } // //Get classes public ActionResult getClasses(int info_kind) { List<SelectData> sl = new List<SelectData>(); var classes = infoRepository.FindClassesByKind(info_kind); foreach(var infoclass in classes) { SelectData sd = new SelectData() { caption = infoclass.class_desc, value = infoclass.info_class.ToString() }; sl.Add(sd); } return Json(sl); }

3，在view中通过JQUERY发出ajax请求在服务器段取得数据并生成下拉列表，在父列表中的change事件中动态改变子列表的option,源代码如下：

$(function() { var url = window.location.href.replace(/Create/, "getKinds"); $.getJSON(url, function(data) { $('#info_kind').loadSelect(data); }); var url2 = window.location.href.replace(/Create/, "getClasses"); // var kindValue = $(this).val(); // alert(kindValue); $.getJSON( url2, { info_kind: 0 }, function(data) { $('#info_class').loadSelect(data); } ); $('#info_kind').change(function() { var url = window.location.href.replace(/Create/, 'getClasses'); // alert(url); var kindValue = $(this).val(); var info_class = $('#info_class'); // alert(info_class); $.getJSON( url, { info_kind: kindValue }, function(data) { info_class.loadSelect(data); } ); }); } )