標籤：
這個是 首先分析下，我們需要兩個下拉框 首先要動態綁定班級的，這個很好實現，怎麼讓學生下拉框也出來，並顯示請選擇學生呢？
public ActionResult Index() { ViewData["class"] = getByItem(); ViewData["stu"] = new List<SelectListItem>() { new SelectListItem {Text = "請選則學生", Value = "-1"} }; return View(); } //班級資料來源 public List<SelectListItem> getByItem() { var quert = db.classes; List<SelectListItem> list = new List<SelectListItem>(); foreach (var itm in quert) { list.Add(new SelectListItem { Text = itm.name, Value = itm.id.ToString() }); } list.Insert(0, new SelectListItem { Text = "選擇班級", Value = "-1" }); return list;} view視圖裡面： 現在的效果： 接下來就要進行班級下拉框的onchange事件處理，獲得當前班級的value，班級和學生是主外鍵關係，通過班級id可以找到所在這個班級的學生。 這個是班級和學生表的資料 那麼接下來就可以通過JQuery來實現獲得班級下拉框的value，然後再把傳給學生表資料 在控制器裡面實現獲得學生的資訊，通過傳過來的班級id擷取，然後再把資料返回json，view視圖頁面就可以擷取資料了
[HttpPost] public ActionResult Stu(string id) { object obj = getStu(id); return Json(obj); } //學生下拉框資料 public List<SelectListItem> getStu(string id) { List<SelectListItem> list = new List<SelectListItem>(); int ids = int.Parse(id); if (ids > 0) { var stu = db.student.Where(a => a.c_id == ids).ToList(); foreach (var ss in stu) { list.Add(new SelectListItem {Text = ss.name, Value = ss.id.ToString()}); } } // list.Insert(0, new SelectListItem{Text = "請選則學生",Value = "-1"}); return list;} 前台的JQuery：
$(function() { $("#class").change(function() { var $id = $(this).val(); $.post("/Class/Stu", { "id": $id }, function (data) { $("#stu").html(""); $.each(data, function(i, j) { var op = new Option(); op.text = j.Text; op.value = j.Value; document.getElementById("stu").add(op); }); }); });}) 是不是很簡單？ 跟ASP.NET Webform差不多？ 下面是完整的Controller 控制器代碼：
public class ClassController : Controller { readonly Stu1DataContext db = new Stu1DataContext(); public ActionResult Index() { ViewData["class"] = getByItem(); ViewData["stu"] = new List<SelectListItem>() { new SelectListItem {Text = "請選則學生", Value = "-1"} }; return View(); } //班級資料來源 public List<SelectListItem> getByItem() { var quert = db.classes; List<SelectListItem> list = new List<SelectListItem>(); foreach (var itm in quert) { list.Add(new SelectListItem { Text = itm.name, Value = itm.id.ToString() }); } list.Insert(0, new SelectListItem { Text = "選擇班級", Value = "-1" }); return list; } [HttpPost] public ActionResult Stu(string id) { object obj = getStu(id); return Json(obj); } //學生下拉框資料 public List<SelectListItem> getStu(string id) { List<SelectListItem> list = new List<SelectListItem>(); int ids = int.Parse(id); if (ids > 0) { var stu = db.student.Where(a => a.c_id == ids).ToList(); foreach (var ss in stu) { list.Add(new SelectListItem {Text = ss.name, Value = ss.id.ToString()}); } } // list.Insert(0, new SelectListItem{Text = "請選則學生",Value = "-1"}); return list; }} 完整的view視圖代碼：
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <!DOCTYPE html> <html><head runat="server"> <title>Index</title> <script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#class").change(function() { var $id = $(this).val(); $.post("/Class/Stu", { "id": $id }, function (data) { $("#stu").html(""); $.each(data, function(i, j) { var op = new Option(); op.text = j.Text; op.value = j.Value; document.getElementById("stu").add(op); }); }); }); }) </script></head><body> <div> 班級：<%=Html.DropDownList("class") %> 學生:<%=Html.DropDownList("stu") %> </div></body></html>若有疑問可以聯絡我www.jiangyong.net.cn,裡面有我的QQ
ASP.NET MVC 下拉框級聯
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
