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控制器

  public class dropController : Controller
    {
        private dropContext db = new dropContext();
        public ActionResult Index()
        {
            //生成省份列表
            ViewBag.pro = new SelectList(db.province, "proID", "proName");
            //生成城市列表
            ViewBag.city = new SelectList(db.city, "cityID", "cityName");
            return View();
        }
        public ActionResult getData(int ID)
        {
            if(Request.IsAjaxRequest()) //判断是否使用ajax
            {
                var q = from c in db.city
                        where c.proID == ID
                        select new { c.cityID, c.cityName }; //不能查询出c.proID，否则会出错
            return Json(q,JsonRequestBehavior.AllowGet); //返回json数据
            }
            return View();
        }
    }

三、视图

添加视图Index.cshtml

<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","请选择")

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