ASP.NET MVC传递Model到视图的多种方式总结
ASP.NET MVC传递Model到视图的多种方式总结
有多种方式可以将数据传递到视图,如下所示:
ViewData
ViewBag
PartialView
TempData
ViewModel
Tuple
场景:
在视图页面,下拉框选择课程触发事件,分别显示老师课程表、学生上课表,如图:
相关的Model:

1 public class Course 2 { 3 public int Id { get; set; } 4 public string Name { get; set; } 5 } 6 7 public class Teacher 8 { 9 public int Id { get; set; } 10 public string Name { get; set; } 11 public List<Course> Courses { get; set; } 12 } 13 14 public class Student 15 { 16 public int Id { get; set; } 17 public string Name { get; set; } 18 public List<Course> Courses { get; set; } 19 }

一、使用ViewData传递多个Model
□ HomeController

1 public ActionResult Index() 2 { 3 ViewData["Courses"] = _repository.GetCourses(); 4 ViewData["Students"] = _repository.GetStudents(); 5 ViewData["Teachers"] = _repository.GetTeachers(); 6 return View(); 7 }

□ Home/Index.cshtml

1 @using MvcApplication1.Models 2 @using System.Web.Helpers; 3 @{ 4 Layout = null; 5 } 6 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta name="viewport" content="width=device-width" /> 11 <title>ViewDataDemo</title> 12 <script src="~/Scripts/jquery-1.8.2.js"></script> 13 <script type="text/javascript"> 14 $(function () { 15 //隐藏 16 $('#students').hide(); 17 $('#teachers').hide(); 18 19 //点击课程下拉框 20 $('#sel').change(function() { 21 selectedCourseName = $('#sel').val().trim(); 22 if (selectedCourseName == "--选择课程--") { 23 $('#students').hide(); 24 $('#teachers').hide(); 25 } else { 26 getTeacherTable(); 27 getStudentTable(); 28 $('#students').show(); 29 $('#teachers').show(); 30 } 31 }); 32 }); 33 34 var selectedCourseName; 35 //创建老师课程表 36 function getTeacherTable() { 37 $('#teachersTable').empty(); 38 $('#teachersTable').append("<table id='tblTeachers'><tr><th>编号</th><th>姓名</th></tr></table>"); 39 //把所有老师转换成json格式 40 var teachers = @Html.Raw(Json.Encode(ViewData["Teachers"])); 41 for (var i = 0; i < teachers.length; i++) { 42 var courses = teachers[i].Courses; 43 for (var j = 0; j < courses.length; j++) { 44 if (courses[j].Name == selectedCourseName) { 45 $('#tblTeachers').append("<tr><td>"+courses[i].Id+"</td><td>"+courses[i].Name+"</td></tr>"); 46 } 47 } 48 } 49 } 50 51 //创建学生上课表 52 function getStudentTable() { 53 $('#studentsTable').empty(); 54 $('#studentsTable').append("<table id='tblStudents'><tr><th>编号</th><th>姓名</th></tr></table>"); 55 var students = @Html.Raw(Json.Encode(ViewData["Students"])); 56 for (var i = 0; i < students.length; i++) { 57 var courses = students[i].Courses; 58 for (var j = 0; j < courses.length; j++) { 59 if (courses[j].Name == selectedCourseName) { 60 $('#tblStudents').append("<tr><td>"+courses[j].Id+"</td><td>"+courses[j].Name+"</td></tr>"); 61 } 62 } 63 } 64 } 65 </script> 66 </head> 67 <body> 68 <div> 69 <table> 70 <tr> 71 <td><h3>选择课程</h3></td> 72 <td> 73 <select id="sel"> 74 <option>--选择课程--</option> 75 @foreach (var course in ViewData["Courses"] as List<Course>) 76 { 77 <option>@course.Name</option> 78 } 79 </select> 80 </td> 81 </tr> 82 </table> 83 </div> 84 <div id="teachers"> 85 <h4>老师课程表</h4> 86 <div id="teachersTable"></div> 87 </div> 88 <div id="students"> 89 <h4>学生上课表</h4> 90 <div id="studentsTable"></div> 91 </div> 92 </body> 93 </html>

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

1 public ActionResult ViewBagDemo() 2 { 3 ViewBag.Courses = _repository.GetCourses(); 4 ViewBag.Students = _repository.GetStudents(); 5 ViewBag.Teachers = _repository.GetTeachers(); 6 return View(); 7 }

□ 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

1 public ActionResult PartialViewDemo() 2 { 3 List<Course> courses = _repository.GetCourses(); 4 return View(courses); 5 } 6 7 public ActionResult StudentsToPVDemo(string courseName) 8 { 9 IEnumerable<Course> courses = _repository.GetCourses(); 10 var selectedCourseId = (from c in courses 11 where c.Name == courseName 12 select c.Id).FirstOrDefault(); 13 IEnumerable<Student> students = _repository.GetStudents(); 14 var studentsInCourse = students.Where(s => s.Courses.Any(c => c.Id == selectedCourseId)).ToList(); 15 return PartialView("StudentPV", studentsInCourse); 16 } 17 18 public ActionResult TeachersToPVDemo(string courseName) 19 { 20 IEnumerable<Course> courses = _repository.GetCourses(); 21 var selectedCourseId = (from c in courses 22 where c.Name == courseName 23 select c.Id).FirstOrDefault(); 24 IEnumerable<Teacher> teachers = _repository.GetTeachers(); 25 var teachersForCourse = teachers.Where(t => t.Courses.Any(c => c.Id == selectedCourseId)).ToList(); 26 return PartialView("TeacherPV", teachersForCourse); 27 }

□ Home/PartialViewDemo.cshmtl

1 @model IEnumerable<MvcApplication1.Models.Course> 2 @{ 3 Layout = null; 4 } 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <meta name="viewport" content="width=device-width" /> 9 <title>PatialViewDemo</title> 10 <script src="~/Scripts/jquery-1.8.2.js"></script> 11 <script type="text/javascript"> 12 $(function () { 13 //隐藏 14 $('#students').hide(); 15 $('#teachers').hide(); 16 17 //点击课程下拉框 18 $('#sel').change(function() { 19 selectedCourseName = $('#sel').val().trim(); 20 if (selectedCourseName == "--选择课程--") { 21 $('#students').hide(); 22 $('#teachers').hide(); 23 } else { 24 getTeacherTable(); 25 getStudentTable(); 26 $('#students').show(); 27 $('#teachers').show(); 28 } 29 }); 30 }); 31 32 var selectedCourseName; 33 //创建老师课程表 34 function getTeacherTable() { 35 $.ajax({ 36 url: "@Url.Action("TeachersToPVDemo","Home")", 37 type: 'Get', 38 data: { courseName: selectedCourseName }, 39 success: function(data) { 40 $('#teachersTable').empty().append(data); 41 }, 42 error: function() { 43 alert("sth wrong"); 44 } 45 }); 46 } 47 48 //创建学生上课表 49 function getStudentTable() { 50 $.ajax({ 51 url: "@Url.Action("StudentsToPVDemo","Home")", 52 type: 'Get', 53 data: { courseName: selectedCourseName }, 54 success: function (data) { 55 $('#studentsTable').empty().append(data); 56 }, 57 error: function () { 58 alert("sth wrong"); 59 } 60 }); 61 } 62 </script> 63 </head> 64 <body> 65 <div> 66 <table> 67 <tr> 68 <td><h3>选择课程</h3></td> 69 <td> 70 <select id="sel"> 71 <option>--选择课程--</option> 72 @foreach (var course in Model) 73 { 74 <option>@course.Name</option 75 } 76 </select> 77 </td> 78 </tr> 79 </table> 80 </div> 81 <div id="teachers"> 82 <h4>老师课程表</h4> 83 <div id="teachersTable"></div> 84 </div> 85 <div id="students"> 86 <h4>学生上课表</h4> 87 <div id="studentsTable"></div> 88 </div> 89 </body> 90 </html>

□ TeacherPV.cshtml与StudentPV.cshtml

1 @model IEnumerable<MvcApplication1.Models.Teacher> 2 <table id="tblTeacherDetail"> 3 <tr> 4 <th>编号</th> 5 <th>名称</th> 6 </tr> 7 @foreach (var item in Model) 8 { 9 <tr> 10 <td>@item.Id</td> 11 <td>@item.Name</td> 12 </tr> 13 } 14 </table>

四、使用TempData传递多个Model
□ HomeController

1 public ActionResult TempDataDemo() 2 { 3 //第一次从数据库读取数据放到TempData中,以后的请求从TempData中获取数据 4 TempData["Courses"] = _repository.GetCourses(); 5 //让TempData保存数据,直到下一次请求 6 TempData.Keep("Courses"); 7 return View(); 8 } 9 10 public ActionResult TeachersTempData(string courseName) 11 { 12 var courses = TempData["Courses"] as IEnumerable<Course>; 13 //由于TempData["Courses"]还要被下一次请求,继续TempData保存数据 14 TempData.Keep("Courses"); 15 var selectedCourseId = (from c in courses 16 where c.Name == courseName 17 select c.Id).FirstOrDefault(); 18 IEnumerable<Teacher> teachers = _repository.GetTeachers(); 19 var teachersForCourse = teachers.Where(t => t.Courses.Any(c => c.Id == selectedCourseId)).ToList(); 20 return PartialView("TeacherPV", teachersForCourse); 21 } 22 23 public ActionResult StudentsTempData(string courseName) 24 { 25 var courses = TempData["Courses"] as IEnumerable<Course>; 26 //由于TempData["Courses"]还要被下一次请求,继续TempData保存数据 27 TempData.Keep("Courses"); 28 var selectedCourseId = (from c in courses 29 where c.Name == courseName 30 select c.Id).FirstOrDefault(); 31 IEnumerable<Student> students = _repository.GetStudents(); 32 var studentsForCourse = students.Where(s => s.Courses.Any(c => c.Id == selectedCourseId)).ToList(); 33 return PartialView("StudentPV", studentsForCourse); 34 }

□ Home/TempDataDemo.cshtml
下拉框遍历课程:
@foreach (var course in Model)
ajax请求老师课程表:
@Url.Action("TeachersTempData","Home")
ajax请求学生上课表:
@Url.Action("StudentsTempData","Home")
五、使用ViewModel传递多个Model
□ View Model

1 public class SchoolVm 2 { 3 public List<Course> Courses { get; set; } 4 public List<Student> Students { get; set; } 5 public List<Teacher> Teachers { get; set; } 6 }

□ HomeController

1 public ActionResult ViewModelDemoVM() 2 { 3 SchoolVm vm = new SchoolVm(); 4 vm.Courses = _repository.GetCourses(); 5 vm.Teachers = _repository.GetTeachers(); 6 vm.Students = _repository.GetStudents(); 7 return View(vm); 8 }

□ 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

1 public ActionResult TupleDemo() 2 { 3 var allModels = new Tuple<List<Course>, List<Teacher>, List<Student>>(_repository.GetCourses(), 4 _repository.GetTeachers(), _repository.GetStudents()) {}; 5 return View(allModels); 6 }

□ 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))
参考链接:https://www.codeproject.com/Articles/687061/Using-Multiple-Models-in-a-View-in-ASP-NET-MVC-M
ASP.NET MVC传递Model到视图的多种方式总结的更多相关文章
- ASP.NET MVC传递Model到视图的多种方式之通用方式的使用
ASP.NET MVC传递Model到视图的多种方式总结——通用方式的使用 有多种方式可以将数据传递到视图,如下所示: ViewData ViewBag PartialView TempData Vi ...
- ASP.NET MVC传递Model到视图的多种方式总结(二)__关于ViewBag、ViewData和TempData的实现机制与区别
在ASP.NET MVC中,视图数据可以通过ViewBag.ViewData.TempData来访问,其中ViewBag 是动态类型(Dynamic),ViewData 是一个字典型的(Diction ...
- ASP.NET MVC传递Model到视图的多种方式总结(一)__通用方式的使用
有多种方式可以将数据传递到视图,如下所示: ViewData ViewBag PartialView TempData ViewModel Tuple 场景: 在视图页面,下拉框选择课程触发事件,分别 ...
- ASP.NET MVC 3 Model【通过一简单实例一步一步的介绍】
今天主要讲Model的两个方面: 1. ASP.Net MVC 3 Model 简介 通过一简单的事例一步一步的介绍 2. ASP.Net MVC 3 Model 的一些验证 MVC 中 Model ...
- ASP.NET MVC 之Model的呈现
ASP.NET MVC 之Model的呈现(仅此一文系列三) 本文目的 我们来看一个小例子,在一个ASP.NET MVC项目中创建一个控制器Home,只有一个Index: public class H ...
- Asp.net MVC的Model Binder工作流程以及扩展方法(2) - Binder Attribute
上篇文章中分析了Custom Binder的弊端: 由于Custom Binder是和具体的类型相关,比如指定类型A由我们的Custom Binder解析,那么导致系统运行中的所有Action的访问参 ...
- Asp.net MVC的Model Binder工作流程以及扩展方法(1) - Custom Model Binder
在Asp.net MVC中, Model Binder是生命周期中的一个非常重要的部分.搞清楚Model Binder的流程,能够帮助理解Model Binder的背后发生了什么.同时该系列文章会列举 ...
- [转]ASP.NET MVC 2: Model Validation
本文转自:http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx?CommentPo ...
- Asp.net MVC的Model Binder工作流程以及扩展方法(1)
Asp.net MVC的Model Binder工作流程以及扩展方法(1)2014-03-19 08:02 by JustRun, 523 阅读, 4 评论, 收藏, 编辑 在Asp.net MVC中 ...
随机推荐
- Codeforces 180C. Letter
题目链接:http://codeforces.com/problemset/problem/180/C 题意: 给你一个仅包含大写字母和小写字母的字符串,你可以将让小写字母转化为大写字母,大写字母转化 ...
- 01、Mecanim动画系统
序言:Mecanim动画系统是Unity4.0之后退出的新版动画系统,非常适合人类动画系统.本文是作为自己的学习来讲解的, 可能会有些啰嗦,但尽量把自己的坑都为大家列出来,让大家理解透彻. 一.文件的 ...
- sql developer 自定义快捷键
- BigDecimal不整除异常
通过BigDecimal的divide方法进行除法时当不整除,出现无限循环小数时,就会抛异常的 异 常 :java.lang.ArithmeticException: Non-terminatin ...
- [Codeforces 19E] Fiary
Brief Intro: 给定一个无向图,询问删去哪条边能使得剩下的图为一个二分图,输出所有结果 Algorithm: 关于二分图的重要性质:一个图为二分图的充要条件为其中没有奇环 1.如果没有奇环, ...
- 求同余方程x^A=B(mod m)的解个数(原根与指标)
求方程:的解个数 分析:设,那么上述方程解的个数就与同余方程组:的解等价. 设同于方程的解分别是:,那么原方程的解的个数就是 所以现在的关键问题是求方程:的解个数. 这个方程我们需要分3类讨论: 第一 ...
- sql-server-on-linux-how-i-think-they-did-it : Anthony Nocentino's Blog
http://www.sqlservercentral.com/blogs/anthony-nocentinos-blog/2016/11/21/sql-server-on-linux-how-i-t ...
- github清理,记录一些有趣的项目
1. rhino 一种java做的开源javascript引擎 https://github.com/mozilla/rhino 2. jeewx 国人写的公众号管理后台,集成度有些高,不好剥离.还是 ...
- MySql中的concat()相关函数
concat 函数的基本应用一: SQL CONCAT函数用于将两个字符串连接起来,形成一个单一的字符串.试试下面的例子: SQL> SELECT CONCAT('FIRST ', 'SECON ...
- PostgreSQL配置文件--资源使用(除WAL外)
2 资源使用(除WAL外) RESOURCE USAGE (except for WAL) 2.1 内存 Memory 2.1.1 shared_buffers 数字型 默认: shared_buff ...