ASP.NET MVC使用jQuery Ajax实现级联下拉列表

简介

这篇文章展示了一个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不是这样写的话、可以自行修改