MVC3学习：利用mvc3+ajax实现级联下拉列表框
生活随笔
收集整理的這篇文章主要介紹了
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序列，將此序列綁定到城市下拉框里即可。
總結
以上是生活随笔為你收集整理的MVC3学习：利用mvc3+ajax实现级联下拉列表框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 东京高田马场附近的大型超市有哪些？
- 下一篇： 烤鸭肠为什么那么便宜？