欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

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

程序员文章站 2022-02-22 20:21:15
...

简介

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