1.新建项目,MVC选择基本模板

2.新建类:Model/Student.cs,数据库信息有三个实体:分别是年级、班级和学生。

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web; namespace CascadeExample.Models
{
public class Grade
{
[Key]
public int GradeId { get; set; }
public string GradeName { get; set; }
public List<Class> Classes { get; set; } }
public class Class
{
[Key]
public int ClassId { get; set; }
public string ClassName { get; set; }
public int GradeId { get; set; }
public Grade Grades { get; set; }
public List<Student> Students { get;set; }
}
public class Student
{
[Key]
public int StudentId { get; set; }
public string StudentName { get; set; }
public int ClassId { get; set; }
public Class Classes { get; set; }
}
}

3.新建类:Model/StudentContext.cs

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web; namespace CascadeExample.Models
{
public class StudentContext : DbContext
{
public DbSet<Student> Students { get; set; } //代码中为每个实体都创建了一个DbSet的属性。
public DbSet<Class> Classes { get; set; }
public DbSet<Grade> Grades { get; set; }
public StudentContext()
: base("Connection")
{
Database.CreateIfNotExists(); //表示如果如果不存在此数据库,就去创建数据库。
}
}
}

4.修改Web.Config,数据存放在本地数据库上。

 <connectionStrings>
<add name="Connection" providerName="System.Data.SqlClient" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=Student;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\Student.mdf" />
</connectionStrings>

5.新建控制器:HomeControl

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CascadeExample.Models; namespace CascadeExample.Controllers
{
public class HomeController : Controller
{
public StudentContext StudentContexts=new StudentContext(); #region 获取年级数据GetGrade() public JsonResult GetGrade()
{
IQueryable<Grade> grades= StudentContexts.Grades;
List<Grade> gradeList = grades.ToList();
List<SelectListItem>gradeListItems=new List<SelectListItem>();
foreach (var i in gradeList)
{
gradeListItems.Add(new SelectListItem{Text = i.GradeName,Value = i.GradeId.ToString()});
}
return Json(gradeListItems, JsonRequestBehavior.AllowGet);
}
#endregion #region 获取班级数据GetClass() public JsonResult GetClass(int id)
{
int gradegradeId = id;
IQueryable<Class> classes = StudentContexts.Classes.Where(o => o.GradeId == gradegradeId);
List<Class> classlList = classes.ToList();
List<SelectListItem> classListItems = new List<SelectListItem>();
foreach (var i in classlList)
{
classListItems.Add(new SelectListItem {Text = i.ClassName,Value = i.ClassId.ToString()});
}
return Json(classListItems, JsonRequestBehavior.AllowGet);
}
#endregion #region 获取学生数据GetStudent() public JsonResult GetStudent(string id)
{
string[] ids = id.Split(",".ToCharArray());
string gradeId = ids[];
string classId = ids[];
int classesId= Convert.ToInt32(classId);
IQueryable<Student> students = StudentContexts.Students.Where(o => o.ClassId == classesId);
List<Student> studentList = students.ToList();
List<SelectListItem>studentListItems=new List<SelectListItem>();
foreach (var i in studentList)
{
studentListItems.Add(new SelectListItem{Text = i.StudentName,Value = i.StudentId.ToString()});
}
return Json(studentListItems, JsonRequestBehavior.AllowGet);
} #endregion #region Index()
public ActionResult Index()
{
return View();
}
#endregion
}
}

6.添加视图:View/Home/Index.cshtml

@model CascadeExample.Models.Grade

@{
ViewBag.Title = "三级联动例子";
Layout = "~/Views/Shared/_Layout.cshtml";
} <fieldset>
<legend>三级联动例子</legend>
<table>
<tr>
<td>
<select id="gradeSelect" name="grade" style="width:100px;">
<option>请选择年级</option>
</select>
</td> <td>
<select id="classSelect" name="classes" style="width:100px;">
<option>请选择班级</option>
</select>
</td> <td>
<select id="studentSelect" name="student" style="width:100px;">
<option>请选择学生</option>
</select>
</td>
</tr>
</table>
<input type="submit" name="submit" id="submit" />
</fieldset>
@section scripts
{
<script type="text/javascript" src="~/Scripts/jquery-ui.min-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
GetGrade();
$("#gradeSelect").change(function () {
GetClass();
GetStudent();
});
$("#classSelect").change(function () {
GetStudent();
});
}
); function GetGrade() {
$("#gradeSelect").empty();
var option = $("<option></option>").val(-).text("请选择年级");
$("#gradeSelect").append(option);
$.getJSON("/Home/GetGrade/", function (data) { $.each(data, function (i, item) {
$("<option></option>")
.val(item["Value"])
.text(item["Text"])
.appendTo("#gradeSelect");
});
});
} function GetClass() {
$("#classSelect").empty();
var option = $("<option></option>").val(-).text("请选择班级");
$("#classSelect").append(option);
var url = "/Home/GetClass/" + $("#gradeSelect").val() + "/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["Value"])
.text(item["Text"])
.appendTo("#classSelect");
});
}); } function GetStudent() {
$("#studentSelect").empty();
var option = $("<option></option>").val(-).text("请选择学生");
$("#studentSelect").append(option);
var url = "/Home/GetStudent/" + $("#gradeSelect").val() + "," + $("#classSelect").val() + "/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["Value"])
.text(item["Text"])
.appendTo("#studentSelect");
});
});
}
$("#submit").click(function () { var grade = document.getElementById("gradeSelect");
var gradeIndex = grade.selectedIndex; //索引的值
var gradeText = grade.options[gradeIndex].text; //绑定的DataValueField的值
var gradeValue = grade.options[gradeIndex].value; //绑定的DataTextField的值 var classes = document.getElementById("classSelect");
var classesIndex = classes.selectedIndex;
var classText = classes.options[classesIndex].text;
var classesValue = classes.options[classesIndex].value; var student = document.getElementById("studentSelect");
var studentIndex = student.selectedIndex;
var studentText = student.options[studentIndex].text;
var studentValue = student.options[studentIndex].value; if (gradeValue != - && classesValue != - && studentValue != -) {
alert("你的选择是: " + gradeText + classText + studentText + "。");
}
else {
alert("请选择年级、班级和学生信息");
}
});
</script>
}

7.运行程序。

8.去数据库添加数据:

年级表:

班级表:

学生表:

9.再次运行程序。

点击提交,出现:

10.完成。

(八)学习MVC之三级联动的更多相关文章

  1. MVC 下拉列表三级联动

    当前所做的项目,关于数据库设计的时候有点小意思,表A是三个联合主键,key1,key2,key3,表B是四个联合主键 key1,key2,key3,key4,其中表B的联合外键关联表A对应的联合主键, ...

  2. mvc关于三级联动修改时数据回显

    在网上找了好久,都没有找到自己想要的那种效果,最后还是自己写出来了, 虽然方法有点笨. 这是Controller里 public ActionResult Edit(string id) { //查询 ...

  3. MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动

    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...

  4. 白话学习MVC(八)Action的执行二

    一.概述 上篇博文<白话学习MVC(七)Action的执行一>介绍了ASP.NET MVC中Action的执行的简要流程,并且对TempData的运行机制进行了详细的分析,本篇来分析上一篇 ...

  5. 第八篇 一个用JS写的省市县三级联动

    前些天,做网站用需要用到一个省市县的三级联动,数据要从数据库里面读取,我想了下思路,动手写了下来.    一.思路           js利用Ajax读取控制器里面的函数,利用函数读取存储过程,返回 ...

  6. 学习MVC之租房网站(八)- 前台注册和登录

    在上一篇<学习MVC之租房网站(七)-房源管理和配图上传>完成了在后台新增.编辑房源信息以及上传房源配图的功能.到此后台开发便告一段落了,开始实现前台的功能,也是从用户的登录.注册开始. ...

  7. Django积木块八——三级联动

    三级联动 前端需要的效果,省之后市之后现,创建model,查询所有的省的信息,json传到前面,之后通过省的id找到对应的市,是用异步实现的. # model class Sheng(models.M ...

  8. 在ASP.NET MVC中实现一种不同于平常的三级联动、级联方式, 可用于城市、车型选择等多层级联场景

    三级或多级联动的场景经常会碰到,比如省.市.区,比如品牌.车系.车型,比如类别的多级联动......我们首先想到的是用三个select来展示,这是最通常的做法.但在另外一些场景中,比如确定搜索条件的时 ...

  9. MVC三级联动无刷新

    本篇实现有关客户.订单和产品的无刷新三级联动,先看最终效果: 没有选择时,后2个Select状态为禁用: 当选择第1个Select,第2个Select可供选择,第3个Select依旧禁用: 当选择第2 ...

随机推荐

  1. JQuery的鼠标滚动事件

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...

  2. 黑马程序员 c#单态的设计模式 (专题二)

    <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IO开发S</a> ...

  3. redis缓存的安装和使用

    Redis介绍    Redis本质上一个Key/Value数据库,与Memcached类似的NoSQL型数据库,但是他的数据可以持久化的保存在磁盘上,解决了服务重启后数据不丢失的问题,他的值可以是s ...

  4. 【BZOJ 2730】 [HNOI2012]矿场搭建

    Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使得无论哪一 ...

  5. 【tyvj1860】后缀数组

    描述 我们定义一个字符串的后缀suffix(i)表示从s[i]到s[length(s)]这段子串.后缀数组(Suffix array)SA[i]中存放着一个排列,满足suffix(sa[i])< ...

  6. 【BZOJ1468】Tree

    Description 给你一棵TREE,以及这棵树上边的距离.问有多少对点它们两者间的距离小于等于K Input N(n<=40000) 接下来n-1行边描述管道,按照题目中写的输入 接下来是 ...

  7. mysql-community-server 5.7.16 设置密码

    那是由于mysql-community-server 5.7的密码是一个默认的随机密码,这个初始密码,mysql又不告诉你,我们需要重设这个密码. service mysqld stop mysqld ...

  8. poj 1094 Sorting It All Out (拓扑排序)

    http://poj.org/problem?id=1094 Sorting It All Out Time Limit: 1000MS   Memory Limit: 10000K Total Su ...

  9. Java调用SQLCMD遇到的问题

    今天用Java调用SQLCMD命令时,一直提示找不到SQLCMD命令,但是通过CMD命令确可以使用,因为我的sqlcmd是新安装的,所以重新配置了新的path路径,而cmd可以调用是因为重新开一个cm ...

  10. [machine learning] Loss Function view

    [machine learning] Loss Function view 有关Loss Function(LF),只想说,终于写了 一.Loss Function 什么是Loss Function? ...