MVC3学习：利用mvc3+ajax实现级联下拉列表框

本例使用的是EF first code操作数据库。

一、准备数据库

级联下拉列表框，比较经典的就是省市数据表，在Model里同时创建三个类：province.cs、city.cs和dropContext.cs

1、province.cs

[Table("province")]
public class province
{
[Key]
public int proID { get; set; }
public string proName { get; set; }
public virtual IEnumerable<city> city { get; set; }
}

2、city.cs

public class city
{
public int cityID { set; get; }
public string cityName { set; get; }
public int proID { set; get; }
public virtual province pronvince { set; get; }
}

3、dropContext.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data; //必须添加
using System.Data.Entity; //必须添加
using System.Data.Entity.ModelConfiguration.Conventions;

namespace dropdown.Models
{
public class dropContext : DbContext
{
public dropContext()
: base("name=constr")
{

}
public DbSet<city> city { get; set; }
public DbSet<province> province { get; set; }
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
//base.OnModelCreating(modelBuilder);
modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();

}
}

}

二、控制器

新建dropController控制器

<script type="text/javascript">
$(function () {
$("#city").find("option").remove();
$("#pro").change(function () {
var pid = $(this).val();
$("#city").find("option").remove();
$.post("/drop/getData",{ID:pid},
function(data)
{
$.each(data,function(i,item)
{
$("<option></option>").val(item["cityID"]).text(item["cityName"]).appendTo($("#city"));
});
});
});
});

</script>

<h2>下拉列表</h2>
@Html.DropDownList("pro", "请选择")
@Html.DropDownList("city","请选择")

View Code
利用JQuery ajax将参数ID传递给getData方法进行处理，getData方法处理完后返回JSON序列，将此序列绑定到城市下拉框里即可。