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浏览器(操作 ...

随机推荐

POJ 3286 How many 0's（数位DP模板）
题目链接:http://poj.org/problem?id=3286 题目大意: 输入n,m,求[n,m]的所有数字中,0出现的总数是多少,前导零不算. 解题思路: 模板题,设dp[pos][num ...
gtk+学习笔记（六）
今天用到了滚动窗口和微调按钮,根据网上的信息,简单总结下用法. 滚动窗口只能添加一个控件到其中 scrolled=gtk_scrolled_window_new(NULL,NULL); /*创建滚动窗 ...
最邻近规则分类KNN算法
例子: 求未知电影属于什么类型: 算法介绍: 步骤: 为了判断未知实例的类别,以所有已知类别的实例作为参照选择参数K 计算未知实例与所有已知实例的距离选择最近K个已 ...
PHP性能调优，PHP慢日志---善用php-fpm的慢执行日志slow log，分析php性能问题
众所周知,MySQL有slow query log,根据慢查询日志,我们可以知道那些sql语句有性能问题.作为mysql的好搭档,php也有这样的功能.如果你使用php-fpm来管理php的话,你可以 ...
CCF CSP 201703-2 学生排队
博客中的文章均为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201703-2 学生排队问题描述体育老师小明要将自己班上的学生按顺序排队.他首先让学生按学号从小到大的顺序排成一排, ...
python开发学习-day16(Django框架初识)
s12-20160507-day16 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
初识angularJS的基本概念
今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angular的时候,还真的不知道它到底有什么作用,直到我开始学习它,并且运用到它的时候,才知道angular这么强大.作为一个前 ...
react篇章-React State(状态)-将生命周期方法添加到类中
将生命周期方法添加到类中在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...
【小思考】Python的float转换精度损失所想到的
首先,为啥会要讨论这个问题. 我得为昨天拖了小组后腿深表歉意.其实程序逻辑很快就理通了的,但自己总是会因为各种各样的小问题束缚手脚,看接下来这个图片: 稍微有数据敏感性的同学就能看出,中间这么一大堆又 ...
mysql正则表达式，实现多个字段匹配多个like模糊查询
现在有这么一个需求一个questions表,字段有题目(TestSubject),选项(AnswerA,AnswerB,AnswerC,AnswerD,AnswerE) 要求字段不包含png,jpg ...

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

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

随机推荐

热门专题