ASP.NET MVC传递Model到视图的多种方式总结

有多种方式可以将数据传递到视图，如下所示：

  • ViewData
  • ViewBag
  • PartialView
  • TempData
  • ViewModel
  • Tuple

场景：

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

相关的Model：

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

 一、使用ViewData传递多个Model

□ HomeController

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

□ Home/Index.cshtml

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

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

二、使用ViewBag传递多个Model

□ HomeController

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

□ Home/PartialViewDemo.cshmtl

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

□ TeacherPV.cshtml与StudentPV.cshtml

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

四、使用TempData传递多个Model

□ HomeController

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

□ Home/TempDataDemo.cshtml

下拉框遍历课程：
@foreach (var course in Model)

ajax请求老师课程表：
@Url.Action("TeachersTempData","Home")

ajax请求学生上课表：
@Url.Action("StudentsTempData","Home")

五、使用ViewModel传递多个Model

□ View Model

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

□ HomeController

  1. 1 public ActionResult ViewModelDemoVM()
  2. 2 {
  3. 3     SchoolVm vm = new SchoolVm();
  4. 4     vm.Courses = _repository.GetCourses();
  5. 5     vm.Teachers = _repository.GetTeachers();
  6. 6     vm.Students = _repository.GetStudents();
  7. 7     return View(vm);
  8. 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. 1 public ActionResult TupleDemo()
  2. 2 {
  3. 3     var allModels = new Tuple<List<Course>, List<Teacher>, List<Student>>(_repository.GetCourses(),
  4. 4         _repository.GetTeachers(), _repository.GetStudents()) {};
  5. 5     return View(allModels);
  6. 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到视图的多种方式总结的更多相关文章

  1. ASP.NET MVC传递Model到视图的多种方式之通用方式的使用

    ASP.NET MVC传递Model到视图的多种方式总结——通用方式的使用 有多种方式可以将数据传递到视图,如下所示: ViewData ViewBag PartialView TempData Vi ...

  2. ASP.NET MVC传递Model到视图的多种方式总结（二）__关于ViewBag、ViewData和TempData的实现机制与区别

    在ASP.NET MVC中,视图数据可以通过ViewBag.ViewData.TempData来访问,其中ViewBag 是动态类型(Dynamic),ViewData 是一个字典型的(Diction ...

  3. ASP.NET MVC传递Model到视图的多种方式总结（一）__通用方式的使用

    有多种方式可以将数据传递到视图,如下所示: ViewData ViewBag PartialView TempData ViewModel Tuple 场景: 在视图页面,下拉框选择课程触发事件,分别 ...

  4. ASP.NET MVC 3 Model【通过一简单实例一步一步的介绍】

    今天主要讲Model的两个方面: 1. ASP.Net MVC 3 Model 简介 通过一简单的事例一步一步的介绍 2. ASP.Net MVC 3 Model 的一些验证 MVC 中 Model ...

  5. ASP.NET MVC 之Model的呈现

    ASP.NET MVC 之Model的呈现(仅此一文系列三) 本文目的 我们来看一个小例子,在一个ASP.NET MVC项目中创建一个控制器Home,只有一个Index: public class H ...

  6. Asp.net MVC的Model Binder工作流程以及扩展方法(2) - Binder Attribute

    上篇文章中分析了Custom Binder的弊端: 由于Custom Binder是和具体的类型相关,比如指定类型A由我们的Custom Binder解析,那么导致系统运行中的所有Action的访问参 ...

  7. Asp.net MVC的Model Binder工作流程以及扩展方法(1) - Custom Model Binder

    在Asp.net MVC中, Model Binder是生命周期中的一个非常重要的部分.搞清楚Model Binder的流程,能够帮助理解Model Binder的背后发生了什么.同时该系列文章会列举 ...

  8. [转]ASP.NET MVC 2: Model Validation

    本文转自:http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx?CommentPo ...

  9. Asp.net MVC的Model Binder工作流程以及扩展方法(1)

    Asp.net MVC的Model Binder工作流程以及扩展方法(1)2014-03-19 08:02 by JustRun, 523 阅读, 4 评论, 收藏, 编辑 在Asp.net MVC中 ...

随机推荐

  1. Codeforces Gym100952 A.Who is the winner? (2015 HIAST Collegiate Programming Contest)

      A. Who is the winner?   time limit per test 1 second memory limit per test 64 megabytes input stan ...

  2. codeforces #441 B Divisiblity of Differences【数学/hash】

    B. Divisiblity of Differences time limit per test 1 second memory limit per test 512 megabytes input ...

  3. Linux命令之ps

    ps [选项] 报告当前进程状态.ps显示有关选择的活动进程的信息.如果要重复更新选择和显示的信息,请使用top.ps命令可以搭配kill随时中断.删除不必要的程序.ps命令是最基本同时也是非常强大的 ...

  4. 【计算几何】【斜率】bzoj1610 [Usaco2008 Feb]Line连线游戏

    枚举直线,计算斜率,排序,统计答案. #include<cstdio> #include<cmath> #include<algorithm> using name ...

  5. 金融应用，计算未来投资回报值 Exercise06_07

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:金融应用,计算未来投资回报值 * */ public class Exer ...

  6. iOS开发——NSIBPrototypingLayoutConstraint原型约束造成的莫名问题

    问题描述: 使用Autolayout 从xib加载后代码添加Constraint,xib中没有任何约束,只是创建了n个View并拖了线方便调用   在运行过程中产生约束冲突错误, NSIBProtot ...

  7. mysql-启动、关闭与重启

    启动 service mysqld start mysql.server start 停止 service mysqld stop mysql.server stop 重启 mysql.server ...

  8. ORMLite整合SQLCipher

    Android数据库加密,目前就是SQLCipher对SQLite整体加密,微信也是使用这种方式.开源,且支持很多平台. SQLCipher虽说开源了,但是编译好的jar和so文件,还是要收费的. 但 ...

  9. oracle解决连接池不足

       select count(*) from v$process;----系统有多少连接数  select value from v$parameter where name = 'processe ...

  10. win8.1无法安装安装.net framework 3.5 解决办法【转】

    安装流程1.以系统管理员开启命令提示符(命令提示字符)2挂载windows8.1异3,在命令提示符下输入Dism /online /enablefeature/featurename:NetFx3 / ...