ASP.NET MVC 下拉框级联

这个是效果图 首先分析下,我们需要两个下拉框 首先要动态绑定班级的,这个很好实现,怎么让学生下拉框也出来,并显示请选择学生呢?

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

时间: 2024-11-04 09:22:44

ASP.NET MVC 下拉框级联的相关文章

ASP.NET MVC 下拉框的传值的两种方式

以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownList 控制器代码: public ActionResult Index() { //1.1查询YzSeriesEntity的数据 List<Model.YzSeriesEntity> seriesList = seriesBLL.LoadEnities().ToList(); //1.2将YzS

ASP.NET MVC 下拉框传值方式

在MVC中使用DropDownList接受从Controller传过来的值的方式: 控制器代码:  public ActionResult Index()         {             dk.bll.edu.EduBll<dk.model.edu.SetupRecord> setUpBll = new dk.bll.edu.EduBll<dk.model.edu.SetupRecord>();             List<dk.model.edu.Setu

Jquery+Ajax下拉框级联查询

Jquery代码 <script type="text/javascript">          $(function(){ //提交事件           $("#ImageButton1").click(function(){ //省Id        var provinceId=$("#selProvince").val(); //市Id        var cityId=$("#selCity").

ASP.NET MVC之下拉框绑定四种方式(十)

前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC中下拉框中绑定枚举的几种方式. 话题引入 一般在下拉框中绑定数据的话,分为几种情况. (1)下拉框中的数据是写死的,我们直接给出死代码即可. (2)下拉框中的数据从数据库中读取出来,从而进行显示. (3)下拉框中直接用枚举显示. (4)下拉框中一个选择的值改变另外一个下拉框中的值. 关于下拉框中绑定

mvc 下拉框赋值

以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownList 控制器代码: public ActionResult Index() { //1.1查询YzSeriesEntity的数据 List<Model.YzSeriesEntity> seriesList = seriesBLL.LoadEnities().ToList(); //1.2将YzS

MVC下拉框的传值的两种方式

http://www.cnsendblog.com/index.php/?p=137GPS平台.网站建设.软件开发.系统运维,找森大网络科技!http://cnsendnet.taobao.com 以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownList 控制器代码: 1. public ActionResult Index() 2. { 3. 4

java 下拉框级联及相关(转)

ActionLintsner是所有监听器的父类,其它监听器可以监听的事件都可以被它捕获ItemListener用于捕获带有item的组件产生的事件,如ComboBox,CheckBox,RadioButton,ToggleButton,接口中定义的itemStateChanged(ItemEvent e)将执行需要在已选定(或已取消选定)项时发生的操作 import java.awt.Dimension; import java.awt.Font; import java.awt.Rectang

MVC+knocKout.js 实现下拉框级联

数据库:部门表和员工表 在控制器里面的操作: 1 public ActionResult Index3() 2 { 3 ViewBag.departments = new SelectList(getDepartments(),"d_id","d_name");//部门数据 4 return View(); 5 } 6 7 private List<department> getDepartments() 8 { 9 List<department

C#---ASP页面的下拉框模糊查询功能

基础方法支持: 一. DataTable 转换成 Json 换句话说如何在ASP.NET将一个DataTable序列化为 Json数组,或者如何从一个DataTable返回一个Json字符串. 使用 JavaScriptSerializer. 首先我们添加System.Web.Script.Serialization命名空间,如下: using System.Web.Script.Serialization; JavaScriptSerializer这个类是由异步通信层内部使用来序列化和反序列化