MVC控制器传递多个Model到视图,使用ViewData, ViewBag, 部分视图, TempData, ViewModel, Tuple

从控制器传递多个Model到视图，可以通过ViewData, ViewBag, PartialView, TempData, ViewModel，Tuple等，本篇逐一体验。本篇源码在github。

在视图页面，下拉框选择课程触发事件，分别显示老师课程表、学生上课表，如图：

相关的Model：

    public class Course

        public int Id { get; set; }

        public string Name { get; set; }

    public class Teacher

        public int Id { get; set; }

        public string Name { get; set; }

        public List<Course> Courses { get; set; }

    public class Student

        public int Id { get; set; }

        public string Name { get; set; }

        public List<Course> Courses { get; set; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

使用ViewData传递多个Model

□ HomeController

        public ActionResult Index()

            ViewData["Courses"] = _repository.GetCourses();

            ViewData["Students"] = _repository.GetStudents();

            ViewData["Teachers"] = _repository.GetTeachers();

            return View();

□ Home/Index.cshtml

@using MvcApplication1.Models

@using System.Web.Helpers;

@{

    Layout = null;

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>ViewDataDemo</title>

    <script src="~/Scripts/jquery-1.8.2.js"></script>

    <script type="text/javascript">

        $(function () {

            //隐藏

            $('#students').hide();

            $('#teachers').hide();

            //点击课程下拉框

            $('#sel').change(function() {

                selectedCourseName = $('#sel').val().trim();

                if (selectedCourseName == "--选择课程--") {

                    $('#students').hide();

                    $('#teachers').hide();

                } else {

                    getTeacherTable();

                    getStudentTable();

                    $('#students').show();

                    $('#teachers').show();

});

});

        var selectedCourseName;

        //创建老师课程表

        function getTeacherTable() {

            $('#teachersTable').empty();

            $('#teachersTable').append("<table id='tblTeachers'><tr><th>编号</th><th>姓名</th></tr></table>");

            //把所有老师转换成json格式

            var teachers = @Html.Raw(Json.Encode(ViewData["Teachers"]));

            for (var i = 0; i < teachers.length; i++) {

                var courses = teachers[i].Courses;

                for (var j = 0; j < courses.length; j++) {

                    if (courses[j].Name == selectedCourseName) {

                        $('#tblTeachers').append("<tr><td>"+courses[i].Id+"</td><td>"+courses[i].Name+"</td></tr>");

        //创建学生上课表

        function getStudentTable() {

            $('#studentsTable').empty();

            $('#studentsTable').append("<table id='tblStudents'><tr><th>编号</th><th>姓名</th></tr></table>");

            var students = @Html.Raw(Json.Encode(ViewData["Students"]));

            for (var i = 0; i < students.length; i++) {

                var courses = students[i].Courses;

                for (var j = 0; j < courses.length; j++) {

                    if (courses[j].Name == selectedCourseName) {

                        $('#tblStudents').append("<tr><td>"+courses[j].Id+"</td><td>"+courses[j].Name+"</td></tr>");

    </script>

</head>

<body>

    <div>

        <table>

            <tr>

                <td><h3>选择课程</h3></td>

                <td>

                    <select id="sel">

                        <option>--选择课程--</option>

                        @foreach (var course in ViewData["Courses"] as List<Course>)

                            <option>@course.Name</option>

                    </select>

                </td>

            </tr>

        </table>

    </div>

    <div id="teachers">

        <h4>老师课程表</h4>

        <div id="teachersTable"></div>

    </div>

    <div id="students">

        <h4>学生上课表</h4>

        <div id="studentsTable"></div>

    </div>

</body>

</html>

@Html.Raw(Json.Encode(ViewData["Students"]))是把Model转换成json字符串，需要用到System.Web.Helpers，把此类库引用到项目，并且必须设置"复制到本地属性"为true,否则报错。

使用ViewBag传递多个Model

□ HomeController

        public ActionResult ViewBagDemo()

            ViewBag.Courses = _repository.GetCourses();

            ViewBag.Students = _repository.GetStudents();

            ViewBag.Teachers = _repository.GetTeachers();

            return View();

□ Home/ViewBagDemo.cshtml

下拉框遍历课程改成：

@foreach (var course in ViewBag.Courses)

getTeacherTable()方法中改成：

var teachers = @Html.Raw(Json.Encode(ViewBag.Teachers));

getStudentTable()方法中改成：

var students = @Html.Raw(Json.Encode(ViewBag.Students));

使用部分视图传递多个Model

□ HomeController

        public ActionResult PartialViewDemo()

            List<Course> courses = _repository.GetCourses();

            return View(courses);

        public ActionResult StudentsToPVDemo(string courseName)

            IEnumerable<Course> courses = _repository.GetCourses();

            var selectedCourseId = (from c in courses

                                    where c.Name == courseName

                                    select c.Id).FirstOrDefault();

            IEnumerable<Student> students = _repository.GetStudents();

            var studentsInCourse = students.Where(s => s.Courses.Any(c => c.Id == selectedCourseId)).ToList();

            return PartialView("StudentPV", studentsInCourse);

        public ActionResult TeachersToPVDemo(string courseName)

            IEnumerable<Course> courses = _repository.GetCourses();

            var selectedCourseId = (from c in courses

                                    where c.Name == courseName

                                    select c.Id).FirstOrDefault();

            IEnumerable<Teacher> teachers = _repository.GetTeachers();

            var teachersForCourse = teachers.Where(t => t.Courses.Any(c => c.Id == selectedCourseId)).ToList();

            return PartialView("TeacherPV", teachersForCourse);

□ Home/PartialViewDemo.cshmtl

@model IEnumerable<MvcApplication1.Models.Course>

@{

    Layout = null;

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>PatialViewDemo</title>

    <script src="~/Scripts/jquery-1.8.2.js"></script>

    <script type="text/javascript">

        $(function () {

            //隐藏

            $('#students').hide();

            $('#teachers').hide();

            //点击课程下拉框

            $('#sel').change(function() {

                selectedCourseName = $('#sel').val().trim();

                if (selectedCourseName == "--选择课程--") {

                    $('#students').hide();

                    $('#teachers').hide();

                } else {

                    getTeacherTable();

                    getStudentTable();

                    $('#students').show();

                    $('#teachers').show();

});

});

        var selectedCourseName;

        //创建老师课程表

        function getTeacherTable() {

            $.ajax({

                url: "@Url.Action("TeachersToPVDemo","Home")",

                type: 'Get',

                data: { courseName: selectedCourseName },

                success: function(data) {

                    $('#teachersTable').empty().append(data);

},

                error: function() {

                    alert("sth wrong");

});

        //创建学生上课表

        function getStudentTable() {

            $.ajax({

                url: "@Url.Action("StudentsToPVDemo","Home")",

                type: 'Get',

                data: { courseName: selectedCourseName },

                success: function (data) {

                    $('#studentsTable').empty().append(data);

},

                error: function () {

                    alert("sth wrong");

});

    </script>

</head>

<body>

    <div>

        <table>

            <tr>

                <td><h3>选择课程</h3></td>

                <td>

                    <select id="sel">

                        <option>--选择课程--</option>

                        @foreach (var course in Model)

                            <option>@course.Name</option>

                    </select>

                </td>

            </tr>

        </table>

    </div>

    <div id="teachers">

        <h4>老师课程表</h4>

        <div id="teachersTable"></div>

    </div>

    <div id="students">

        <h4>学生上课表</h4>

        <div id="studentsTable"></div>

    </div>

</body>

</html>

□ TeacherPV.cshtml与StudentPV.cshtml

@model IEnumerable<MvcApplication1.Models.Teacher>

<table id="tblTeacherDetail">

    <tr>

        <th>编号</th>

        <th>名称</th>

    </tr>

    @foreach (var item in Model)

        <tr>

            <td>@item.Id</td>

            <td>@item.Name</td>

        </tr>

</table>

使用TempData传递多个Model

□ HomeController

        public ActionResult TempDataDemo()

            //第一次从数据库读取数据放到TempData中，以后的请求从TempData中获取数据

            TempData["Courses"] = _repository.GetCourses();

            //让TempData保存数据，直到下一次请求

            TempData.Keep("Courses");

            return View();

        public ActionResult TeachersTempData(string courseName)

            var courses = TempData["Courses"] as IEnumerable<Course>;

            //由于TempData["Courses"]还要被下一次请求，继续TempData保存数据

            TempData.Keep("Courses");

            var selectedCourseId = (from c in courses

                where c.Name == courseName

                select c.Id).FirstOrDefault();

            IEnumerable<Teacher> teachers = _repository.GetTeachers();

            var teachersForCourse = teachers.Where(t => t.Courses.Any(c => c.Id == selectedCourseId)).ToList();

            return PartialView("TeacherPV", teachersForCourse);

        public ActionResult StudentsTempData(string courseName)

            var courses = TempData["Courses"] as IEnumerable<Course>;

            //由于TempData["Courses"]还要被下一次请求，继续TempData保存数据

            TempData.Keep("Courses");

            var selectedCourseId = (from c in courses

                                    where c.Name == courseName

                                    select c.Id).FirstOrDefault();

            IEnumerable<Student> students = _repository.GetStudents();

            var studentsForCourse = students.Where(s => s.Courses.Any(c => c.Id == selectedCourseId)).ToList();

            return PartialView("StudentPV", studentsForCourse);

□ Home/TempDataDemo.cshtml

下拉框遍历课程：

@foreach (var course in Model)

ajax请求老师课程表：

@Url.Action("TeachersTempData","Home")

ajax请求学生上课表：

@Url.Action("StudentsTempData","Home")

使用ViewModel传递多个Model

□ View Model

    public class SchoolVm

        public List<Course> Courses { get; set; }

        public List<Student> Students { get; set; }

        public List<Teacher> Teachers { get; set; }

□ HomeController

        public ActionResult ViewModelDemoVM()

            SchoolVm vm = new SchoolVm();

            vm.Courses = _repository.GetCourses();

            vm.Teachers = _repository.GetTeachers();

            vm.Students = _repository.GetStudents();

            return View(vm);

□ Home/ViewModelDemoVM.cshtml

@model MvcApplication1.Models.SchoolVm

下拉框遍历课程：

@foreach (var course in Model.Courses)

ajax请求老师课程表和学生上课表：

@Html.Raw(Json.Encode(Model.Teachers))

@Html.Raw(Json.Encode(Model.Students))

使用Tuple传递多个Model

□ HomeController

        public ActionResult TupleDemo()

            var allModels = new Tuple<List<Course>, List<Teacher>, List<Student>>(_repository.GetCourses(),

                _repository.GetTeachers(), _repository.GetStudents()) {};

            return View(allModels);

□ Home/TupleDemo.cshtml

@model Tuple <List <MvcApplication1.Models.Course>, List <MvcApplication1.Models.Teacher>, List <MvcApplication1.Models.Student>>

下拉框遍历课程：

@foreach (var course in Model.Item1)

ajax请求老师课程表和学生上课表：

@Html.Raw(Json.Encode(Model.Item2))

@Html.Raw(Json.Encode(Model.Item3))

参考资料：

※ Using Multiple Models in a View in ASP.NET MVC 4 / MVC 5

MVC控制器传递多个Model到视图,使用ViewData, ViewBag, 部分视图, TempData, ViewModel, Tuple的更多相关文章

MVC控制器传递多个实体类集合到视图的方案总结
MVC控制器向视图传递数据包含多个实体类的解决方案有很多,这里主要针对视图模型.动态模型以及Tuple三种方法进行一些总结与记录. 基础集合类:TableA namespace ViewModelSt ...
.net mvc控制器传递方法到视图
很多人都是在视图里面定义方法,然后再使用.我个人也是这么干的.但是为了验证是否可以将方法从控制器传递到视图,所以做了个测试.结果真的可以.原理是利用了委托(delegate),因为委托本身就是一种类型 ...
MVC使用jQuery从视图向控制器传递Model,数据验证,MVC HTML辅助方法小结
//MVC HTML辅助类常用方法记录 (1)@Html.DisplayNameFor(model => model.Title)是显示列名, (2)@Html.DisplayFor(model ...
MVC使用jQuery从视图向控制器传递Model的2种方法
http://blog.csdn.net/make1828/article/details/29846003 using System.ComponentModel.DataAnnotations; ...
ASP.NET MVC 5 - 将数据从控制器传递给视图
在我们讨论数据库和数据模型之前,让我们先讨论一下如何将数据从控制器传递给视图.控制器类将响应请求来的URL.控制器类是给您写代码来处理传入请求的地方,并从数据库中检索数据,并最终决定什么类型的返回结果 ...
Asp.Net Mvc 控制器与视图的数据传递
数据传递也就是控制器和视图之间的交互,比如在视图中提交的数据,在控制器怎么获取,或者控制器从业务层获得一些数据,怎么传递到视图中,让视图显示在客户端呢?带着这些疑问,我们接着看.. 下面 ...
ASP.NET MVC 5 学习教程：控制器传递数据给视图
原文 ASP.NET MVC 5 学习教程:控制器传递数据给视图起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器添加视图修改视图和布局页控制器传递数据给视图添加模型创建连接字 ...
MVC 5 - 将数据从控制器传递给视图
MVC 5 - 将数据从控制器传递给视图在我们讨论数据库和数据模型之前,让我们先讨论一下如何将数据从控制器传递给视图.控制器类将响应请求来的URL.控制器类是给您写代码来处理传入请求的地方,并从数据 ...
【ASP.NET MVC系列】浅谈ASP.NET MVC 视图与控制器传递数据
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

随机推荐

5 个非常有用的 Laravel Blade 指令，你用过哪些？
接下来我将带大家认识下五个 Laravel Blade 指令,这些指令将让你在解决特定问题时如虎添翼.如果你是刚接触 Laravel 的用户,这些小技巧能带你认识到 Laravel Blade 模板引 ...
apachebench对网站进行并发测试
,安装apache ,打开cmd进入apache安装目录的bin目录(有ab.exe) ,执行ab命令格式:ab -n -c http://localhost:80/test/test.php 说明 ...
SQL之DELETE
在SQL中DELETE语句用于删除表中的行. 语法 1.删除特定行 DELETE FROM 表名称 WHERE 列名称 = 值 2.删除所有行:在不删除表的情况下删除所有的行.删除之后表的结构.属性和 ...
13 在 O(1) 时间内删除链表节点
删除链表的一个结点,用下一个结点覆盖掉要删除的结点,再释放掉要删结点的下一个结点的内存 Java: public ListNode deleteNode(ListNode head, ListNode ...
mongodb优化篇
在掌握了mongo的体系结构和基本操作后,开始学习 mongodb的优化,由于资源有限,只能网络上整理一些资料,我大致理解的mongo的优化分为以下几步: 1.监控 mongodb可以通过profi ...
USACO 6.5 Closed Fences
Closed Fences A closed fence in the plane is a set of non-crossing, connected line segments with N c ...
Hadoop CapacitySchedule配置
下面是Hadoop中CapacitySchedule配置,包含了新建队列和子队列 <configuration> <property> <name>yarn.sch ...
Socket 编程之 TCP 实现
前几天介绍了计算机网络的一些概念,并介绍了几个协议.下面就说说 Java 中的 Socket 编程,服务器和客户端是如何通信的呢? 首先要介绍一下 Socket ,我们知道在 TCP/IP 协议簇中, ...
2017 Idea 最简易破解（无需jar包）（个人整理）
首先修改host文件: 文件路径:C:\Windows\System32\drivers\etc\hosts 修改:将“0.0.0.0 account.jetbrains.com”追加到hosts文 ...
Oracle win32_11gR2_client.zip
先将下载下来的ZIP文件解压,并运行setup.exe文件. 第一步:选择管理员(0MB)(A),然后点击下一步第二步:选择语言,点击下一步第三步:选择安装的路径,然后点击下一步第四步:执行到第 ...

MVC控制器传递多个Model到视图,使用ViewData, ViewBag, 部分视图, TempData, ViewModel, Tuple

MVC控制器传递多个Model到视图,使用ViewData, ViewBag, 部分视图, TempData, ViewModel, Tuple的更多相关文章

随机推荐

热门专题