ASP.NET MVC使用jQuery Ajax实现级联下拉列表
2015-03-07 13:59:55 By: shinyuu
简介
这篇文章展示了一个ASP.NET MVC级联下拉列表的一个例子、个人觉得这种功能在项目开发的过程中经常用到、所以分享一下、希望对一些哥们有用、在本实施例中、有两个下拉列表、当第一下拉列表选择被改变时、在第二个下拉列表中的选项是通过调用一个MVC的控制器改变、本Demo主要是利用ASP.NET Web表单和ASP.NET AJAX控件工具包CascadingDropDown来实现的
源代码分析
创建一个MVCController、并添加以下功能
public ActionResult GetCategories() { // Get all categories using entity framework and LINQ queries. NorthwindEntities db = new NorthwindEntities(); var categories = db.Categories .Select(c => new { c.CategoryID, c.CategoryName }) .OrderBy(c => c.CategoryName); return Json(categories, JsonRequestBehavior.AllowGet); } public ActionResult GetProducts(int intCatID) { // Get products of a category using entity framework and LINQ queries. NorthwindEntities db = new NorthwindEntities(); var products = db.Products .Where(p => p.CategoryID == intCatID) .Select(p => new { p.ProductID, p.ProductName }) .OrderBy(p => p.ProductName); return Json(products, JsonRequestBehavior.AllowGet); }
创建一个视图、并添加如下Div
<div> <span> <label for="category">Category</label> <select id="category" name="category"> <option value=""></option> </select> <label for="product">Product</label> <select id="product" name="product"> <option value=""></option> </select> </span> </div>
以下JavaScript代码添加到视图页面
<script src="../../Scripts/jquery-1.11.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { // Populate categories when the page is loaded. $.getJSON(´Home/GetCategories´, function (data) { // Ajax success callback function. //Populate dropdown from Json data returned from server. $(´#category option´).remove(); $(´#category´).append(´<option value=""></option´); for (i = 0; i < data.length; i ) { $(´#category´).append(´<option value="´ data[i].CategoryID ´">´ data[i].CategoryName ´</option´); } }).fail(function (jqXHR, textStatus, errorThrown) { // Ajax fail callback function. alert(´Error getting categories!´); }); // First dropdown selection change event handler $(´#category´).change(function () { var catid = $(this).find(":selected").val(); if (catid.length > 0) { // Populate products. $.getJSON(´Home/GetProducts´, { intCatID: catid }, function (data) { // Ajax success callback function. // Populate dropdown from Json data returned from server. $(´#product option´).remove(); $(´#product´).append(´<option value=""></option´); for (i = 0; i < data.length; i ) { $(´#product´).append(´<option value="´ data[i].ProductID ´">´ data[i].ProductName ´</option´); } }).fail(function (jqXHR, textStatus, errorThrown) { // Ajax fail callback function. alert(´Error getting products!´); }); } else { // Remove all second dropdown options if //empty option is selected in first dropdown. $(´#product option´).remove(); $(´#product´).append(´<option value=""></option´); } }); }); </script>
这样就可以实现一个.net mvc的级联下拉列表了、另外在Controller中使用到了NorthwindEntities和jQuery、如果你的Controller不是这样写的话、可以自行修改
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)
或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛
IMJMJ.COM小爱卖家 2022-12-21 09:19:27 1 评 | 回复
对新手太有用了