在 ASP.NET MVC 4 / MVC 5 中在一个视图中使用多个模型

• 下载 MVC 4 / Visual Studio 2012 的源代码 - 2 MB
• 下载 MVC 5 / Visual Studio 2013 的源代码 - 2 MB

引言

当我还是 ASP.NET MVC 的初学者时，我经常会遇到一个问题：你知道多少种方法可以在视图中使用/传递多个模型？当时，我只知道两种方法，后来我学习了一些其他的方法来实现。在这篇文章中，我将分享我到目前为止的所学。希望它能对其他人有所帮助。

先决条件： 您应该具备 C# 和 ASP.NET MVC 的中级水平。如果您是 C# 和 ASP.NET MVC 的绝对新手，请查找其他资源来理解这里使用的术语。如果您需要任何详细信息，可以在文章下方评论。我很乐意为您提供帮助。谢谢。

在视图中使用多个模型有很多方法，最常用的如下：

• 视图数据
• ViewBag
• PartialView
• TempData
• ViewModel
• 元组

以上所有在视图中使用多个模型的方法都有其用处，但我们需要思考并选择最适合我们需求的方法。所有技术都有其优点和缺点，我们在另一篇文章 如何选择传递多个模型的最佳方法 中对此进行了讨论。

为了更好地理解本文，请下载附件的代码，浏览代码，然后按照本文提供的步骤进行操作。

示例演示概述

附件的代码解决方案包含六个视图，演示了以下内容：

• 如何使用 ViewData 传递多个模型
• 如何使用 ViewBag 传递多个模型
• 如何使用 PartialView 传递多个模型
• 如何使用 TempData 传递多个模型
• 如何使用 ViewModel 传递多个模型
• 如何使用 Tuple 传递多个模型

在示例演示中，所有视图都将具有相同的 HTML 结构以获得相同的布局，但传递模型到视图的实现将有所不同。

HTML 标签的结构如下所示，只有 scripts 标签内的代码会根据场景进行更改。

所有演示的输出将与下面显示的截图相似

创建示例演示的基本结构

让我们开始创建一个示例演示应用程序。请按照以下步骤操作：

1. 打开 Visual Studio 2012，选择 ASP.NET MVC4 Web Application 模板，并将项目名称命名为 MultipleModelDemo，然后单击 OK。如果您使用的是 Visual Studio 2013 和 MVC 5，请参见下面的 VS 2013 / MVC 5 更新 部分。

   

2. 选择 Basic application 模板，然后单击 OK。Visual Studio 会在解决方案中添加一个 MultipleModelDemo 项目，如下图所示。

   

3. 右键单击 Models 文件夹，添加一个 Models.cs 文件。现在我们需要添加三个模型，分别命名为 Course、Faculty 和 Student，并写入以下代码，如下所示。

   public class Course
   {
       public int CourseId { get; set; }
       public string CourseName { get; set; }
   }
   
   public class Faculty
   {
       public int FacultyId { get; set; }
       public string FacultyName { get; set; }
       public List<Course> AllotedCourses { get; set; }
   }
   
   public class Student
   {
       public int EnrollmentNo { get; set; }
       public string StudentName { get; set; }
       public List<Course> EnrolledCourses { get; set; }
   }

4. 在 Models 文件夹下添加一个名为 Repository.cs 的类文件，其中将包含获取应用程序硬编码数据的方法的实现，以便于操作。

   以下是 GetCourse 方法的代码，它将返回一个课程列表。

   public List<Course> GetCourses()
   {
       return new List<Course> { 
           new Course () {  CourseId = 1, CourseName = "Chemistry"}, 
           new Course () {  CourseId = 2, CourseName = "Physics"},
           new Course () {  CourseId = 3, CourseName = "Math" },
           new Course () {  CourseId = 4, CourseName = "Computer Science" }
       };
   }           

   以下是 GetFaculties 方法的代码，它将返回一个教师列表。

   public List<Faculty> GetFaculties()
   {
       return new List<Faculty> {                 
           new Faculty () {  FacultyId = 1, FacultyName= "Prakash",
               AllotedCourses = new List<Course> 
               {new Course () { CourseId = 1, CourseName = "Chemistry"},
                                new Course () { CourseId = 2, CourseName = "Physics"},
                                new Course () { CourseId = 3, CourseName = "Math"},
           }}, 
           new Faculty () {  FacultyId = 2, FacultyName= "Ponty" ,
               AllotedCourses = new List<Course> 
               {new Course () { CourseId = 2, CourseName = "Physics"},
                                new Course () { CourseId = 4, CourseName = "Computer Science"}
           }},
           new Faculty () {  FacultyId = 3, FacultyName= "Methu", 
               AllotedCourses = new List<Course> 
               {new Course () { CourseId = 3, CourseName = "Math"},
                                new Course () { CourseId = 4, CourseName = "Computer Science"}
           }}
       };
   }           

   以下是 GetStudents 方法的代码，它将返回一个学生列表。

   public List<Student> GetStudents()
   {
       List<Student> result = new List<Student> { 
           new Student () { EnrollmentNo = 1, StudentName= "Jim", 
               EnrolledCourses = new List<Course> 
               { new Course () { CourseId = 1, CourseName = "Chemistry"},
                                 new Course () { CourseId = 2, CourseName = "Physics"},
                                 new Course () { CourseId = 4, CourseName = "Computer Science"}
           }},
           
           new Student () {  EnrollmentNo = 2, StudentName= "Joli",
               EnrolledCourses = new List<Course> 
               { new Course () { CourseId = 2, CourseName = "Physics"} ,
                                 new Course () 
                                 { CourseId = 4, CourseName = "Computer Science"}
           }},
           
           new Student () {  EnrollmentNo = 3, StudentName= "Mortin",
               EnrolledCourses = new List<Course>
               {  new Course () { CourseId = 3, CourseName = "Math"},
                                  new Course () { CourseId = 4, CourseName = "Computer Science"}
           }}
       };
       
       return result;
   }           

5. 在 Controller 文件夹中添加一个 HomeController。我们稍后将在 HomeController 中编写代码。
    
6. 在 Shared 文件夹中，我们将修改 _Layout.cshtml 文件中现有的代码。首先在 head 标签中写入以下代码。

       <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
   
      @*Referenced  js and css files which comes with template*@
       <script src="~/Scripts/jquery-1.8.2.min.js"></script>
       <link href="~/Content/Site.css" rel="stylesheet" />
   
       @*Referenced appcss file having custom CSS*@
       <link href="~/Content/appcss/appcss.css" rel="stylesheet" />
       </head>
   
              

   在 body 标签中写入以下代码。

   <body>
       @* Define the place for navigation links in left side of the page*@
       <div class="navigationPanel">
           <div style="margin: 40px 25px 2px 25px;">
               <h3>Links to Demostrations</h3>
               <a href="~/Home/ViewDataDemo">ViewData Demo</a>
               <br />
               <br />
               <a href="~/Home/ViewBagDemo">ViewBag Demo</a>
               <br />
               <br />
               <a href="~/Home/PartialViewDemo">PartialView Demo</a>
               <br />
               <br />
               <a href="~/Home/TempDataDemo">TempData Demo</a>
               <br />
               <br />
               <a href="~/Home/ViewModelDemo">ViewModel Demo</a>
               <br />
               <br />
               <a href="~/Home/TupleDemo">Tuple Demo</a>
           </div>
       </div>
       <div style="float: left; margin: 25px 2px 2px 80px;">
           @RenderBody()
       </div>
   </body>

   到目前为止，我们已经创建了将在所有场景中使用的基本代码。接下来，我们将逐个学习每个场景。

使用 ViewData 传递多个模型

ViewData 用于将数据从控制器传递到视图。ViewData 是一个对象字典，属于 ViewDataDictionary 类。ViewData 定义为 ControllerBase 类的属性。存储在 ViewData 中的值在视图中需要转换为其 datatype。ViewData 中的值可以通过键来访问。

1. 首先，在 HomeController 中创建一个 Repository 类的对象。

   Repository _repository = new Repository();             

   在 HomeController 中添加以下代码。

   public ActionResult ViewDataDemo()
   {
       ViewData["Courses"] = _repository.GetCourses();
       ViewData["Students"] = _repository.GetStudents();
       ViewData["Faculties"] = _repository.GetFaculties();
       return View();
   }           

   这里的 ViewDataDemo action 方法将使用 ViewData 将所有三个模型传递给其视图。

2. 添加一个名为 ViewDataDemo 的视图，并在 body 标签中写入与下面相同的代码。

   <body style="background-color: #DBDBB7">
    <h3>Passing Multiple Models using <span class="
    specialText">  <i>ViewData </i> </span> </h3>
    <table>
        <tr>
            <td class="sltCourseText">
                <h3>Select a Course  </h3>
            </td>
            <td>
                <select id="sltCourse" class="sltStyle">
                   <option>Select Course </option>
                   @*Iterating Course model using ViewData string as a key *@
                   @foreach (var item in ViewData["Courses"] 
                   as List <MultipleModelDemo.Models.Course>)
                   {         
                        <option>@item.CourseName
                        </option>            
                   }
                </select>
            </td>
        </tr>
    </table>
        
    <div id="facultyDetailSection">
        <h4>Faculties who teach selected course </h4>
        <div id="facultyDetailTable"> </div>
    </div>
        
    <div id="studentDetailSection">
        <h4>Students who learn selected course </h4>
        <div id="studentDetailTable"> </div>
    </div>
    </body>        

   这里我们正在使用 ViewData 迭代 Course 模型，并将其转换为 List<Course>。

3. 在 body 标签内，添加一个 script 标签并写入以下代码。这里我们只会在用户选择有效课程时显示表格，否则 facultyDetailSection 和 studentDetailSection 不应显示。我们为此目的使用了 jQuery 的 fadeout 和 fadeIn 函数。

    <script>
           $(document).ready(function(){
               $("#facultyDetailSection").fadeOut(0);
               $("#studentDetailSection").fadeOut(0);
           });
           
           var selectedCourseName;
           
           $("#sltCourse").change(function () {           
               selectedCourseName = $("#sltCourse").val().trim();
               
               if (selectedCourseName === "Select Course") {
                   $("#facultyDetailSection").fadeOut();
                   $("#studentDetailSection").fadeOut();
               }
               else {
                   getFacultyTable();
                   getStudentTable();
                   $("#facultyDetailSection").fadeIn();
                   $("#studentDetailSection").fadeIn();
               }
           });
    </script>            

   在这里，在 Course 下拉列表的更改事件上，我们将读取值并确认是否有有效选择以显示教师和学生。如果选择有效，将执行 getFacultyTable 和 getStudentTable 函数。在 script 标签中添加以下函数。

       //Create table to display faculty detail
       function getFacultyTable() {         
       $("#facultyDetailTable").empty();
       $("#facultyDetailTable").append("<table id='tblfaculty'  
       class='tableStyle'><tr><th class='tableHeader' style='width:60px;'>
                                           Employee ID </th> 
                                           <th class='tableHeader'>Faculty Name 
                                           </th> </tr> </table>");
   
       //Get all faculties with the help of model 
       //(ViewData["Faculties"]), and convert data into json format. 
       var allFaculties = @Html.Raw(Json.Encode(ViewData["Faculties"]));
   
       for (var i = 0; i  < allFaculties.length; i++) {
           var allotedCourses = allFaculties[i].AllotedCourses;
           for (var j = 0; j  < allotedCourses.length; j++) {
               if(allotedCourses[j].CourseName === selectedCourseName)
                   $("#tblfaculty").append
                   (" <tr> <td class='tableCell'>"  + 
                   allFaculties[i].FacultyId 
                       + " </td> <td class='tableCell'>"+
                       allFaculties[i].FacultyName+" </td> </tr>");
           }
       }
   }
   
   //Create table to display student detail
   function getStudentTable() {
       $("#studentDetailTable").empty();
       $("#studentDetailTable").append(" <table id='tblStudent' 
       class='tableStyle'> <tr> <th class='tableHeader' style='width:60px;'>
                                           Roll No </th> <th 
                                           class='tableHeader'>Student Name 
                                           </th> </tr> </table>");
   
       //Get all students with the help of model 
       //(ViewData["Students"]), and convert data into json format. 
       var allStudents = @Html.Raw(Json.Encode(ViewData["Students"]));
   
       for (var i = 0; i  < allStudents.length; i++) {
           var studentCourses = allStudents[i].EnrolledCourses;
           for (var j = 0; j  < studentCourses.length; j++) {
               if(studentCourses[j].CourseName === selectedCourseName)                      
                   $("#tblStudent").append(" <tr> 
                   <td class='tableCell'>"  + allStudents[i].EnrollmentNo 
                       + " </td> <td  class='tableCell'>
                       "+allStudents[i].StudentName+" </td> </tr>");
           }
       }           
   }            

注意： 如我们之前提到的，所有视图都将具有相同的布局，因此后续的演示在 ViewDataDemo.cshtml 文件的 body 标签中编写的代码将与此处基本相同，后续演示中我们只需修改 foreach 函数以填充下拉列表数据，以及修改 getFacultyTable 和 getStudentTable JavaScript 函数中的两行代码。

使用 ViewBag 传递多个模型

ViewBag 也用于将数据从控制器传递到视图。它是一个动态属性，属于 ControllerBase 类，因此不需要进行 datatype 的类型转换。

1. 在 HomeController 中添加以下代码。

   public ActionResult ViewBagDemo()
   {
       ViewBag.Courses = _repository.GetCourses();
       ViewBag.Students = _repository.GetStudents();
       ViewBag.Faculties = _repository.GetFaculties();
       return View();
   }            

   这里的 ViewBagDemo action 方法将使用 ViewBag 将数据传递给视图（ViewBagDemo.cshtml）文件。

2. 添加一个名为 ViewBagDemo 的视图。所有代码将与您在 ViewDataDemo.cshtml 文件中编写的代码相同。只需修改 foreach 函数中的输入模型。

   @*Iterating Course model using ViewBag *@
   @foreach (var item in ViewBag.Courses)
   {         
       <option>@item.CourseName</option>            
   }            

3. 在 script 标签中，替换 getFacultyTable 函数中的以下代码行：

   //Get all faculties with the help of model 
   // (ViewBag.Faculties), and convert data into json format.                
   var allFaculties = @Html.Raw(Json.Encode(ViewBag.Faculties));

4. 在 getStudentTable 函数中替换以下代码行：

   //Get all students with the help of model(ViewBag.Students), 
   //and convert data into json format.
   var allStudents = @Html.Raw(Json.Encode(ViewBag.Students));

使用 PartialView 传递多个模型

当您需要在多个视图中共享相同的代码（Razor 和 HTML 代码）时，可以使用 Partial View。有关 PartialView 的更多详细信息，请访问 此处。

1. 在 Home controller 中，添加以下代码，PartialViewDemo action 方法将返回一个仅包含所有课程列表的视图。此 action 方法目前不会有或传递任何教师或学生信息。

   public ActionResult PartialViewDemo()
   {
       List<Course> allCourse = _repository.GetCourses();
       return View(allCourse);
   }            

2. 添加一个名为 PartialViewDemo 的视图。所有 HTML 代码将与您之前编写的代码相同。只需修改 foreach 函数。

   @*Iterating Course Model*@
   @foreach(var item in Model)
   {         
       <option>@item.CourseName
       </option>            
   }            

3. 在 script 标签中，修改 getFacultyTable 函数，如下所示：

   function getFacultyTable() {
   		$.ajax({
   	        // Get Faculty PartialView
   	        url: "/Home/FacultiesToPVDemo",
   	    type: 'Get',
   	    data: { courseName: selectedCourseName },
   	    success: function (data) {
           $("#facultyDetailTable").empty().append(data);
   	    },
   	    error: function () {
           alert("something seems wrong");
   	}
   		});
   }

4. 修改 getStudentTable 函数，如下所示：

       function getStudentTable() {
       $.ajax({
           // Get Student PartialView
           url: "/Home/StudentsToPVDemo",
           type: 'Get',
           data: { courseName: selectedCourseName },
           success: function (data) {
               $("#studentDetailTable").empty().append(data);
           },
           error: function () {
               alert("something seems wrong");
           }
       });
   }        

5. 在 HomeController 中添加一个新的 Action 方法，名为 StudentsToPVDemo，并在 StudentsToPVDemo action 方法中添加以下代码。

   public ActionResult StudentsToPVDemo(string courseName)
   {
       IEnumerable <Course> allCourses = _repository.GetCourses();
       var selectedCourseId = (from c in allCourses where 
       c.CourseName == courseName select c.CourseId).FirstOrDefault();
       
       IEnumerable <Student> allStudents = _repository.GetStudents();
       var studentsInCourse = allStudents.Where(s => 
       s.EnrolledCourses.Any(c => c.CourseId == selectedCourseId)).ToList();
       
       return PartialView("StudentPV", studentsInCourse); 
   }

6. 通过右键单击 StudentsToPVDemo action 方法，向 Shared 文件夹添加一个 PartialView，并将其命名为 StudentPV。StudentsToPVDemo action 将返回 StudentPV PartialView，其中包含特定课程的学生名单。

7. 在 StudentPV.cshtml 文件中添加以下代码。

   @model  IEnumerable <MultipleModelDemo.Models.Student>
    <table id="tblFacultyDetail" class="tableStyle">
            <tr>
            <th class="tableHeader" style="width:60px;">Roll No </th>
            <th class="tableHeader">Student Name </th>
            </tr>
       @foreach (var item in Model)
       {
             <tr>
                <td  class="tableCell" >@item.EnrollmentNo </td>
                <td class="tableCell">@item.StudentName </td>
            </tr>
       }       
    </table>

8. 在 HomeController 中添加一个新 Action 方法来调用教师的 PartialView。将其命名为 FacultiesToPVDemo 并添加以下代码。

   public ActionResult FacultiesToPVDemo(string courseName)
   {
       IEnumerable <Course> allCourses = _repository.GetCourses();
       var selectedCourseId = (from c in allCourses where 
       c.CourseName == courseName select c.CourseId).FirstOrDefault();
       
       IEnumerable <Faculty> allFaculties = _repository.GetFaculties();
       var facultiesForCourse = allFaculties.Where(f => 
       f.AllotedCourses.Any(c =>  c.CourseId == selectedCourseId)).ToList();
       
       return PartialView("FacultyPV", facultiesForCourse);
     }            

9. 添加一个名为 FacultyPV 的 PartialView，就像我们为学生 PartialView 所做的那样，写入与您在 StudentPV.cshtml 文件中编写的相同代码。只需替换一行代码，如下所示：

   @model  IEnumerable<MultipleModelDemo.Models.Faculty>

10. FacultiesToPVDemo action 将返回 FacultyPV PartialView，其中包含教授特定课程的教师名单。

使用 TempData 传递多个模型

TempData 是一个对象字典，属于 TempDataDictionary 类。TempData 定义为 ControllerBase 类的属性。存储在 TempData 中的值在视图中需要转换为 datatype。TempData 中的值可以通过键来访问。它类似于 ViewData，但区别在于它允许我们在一个控制器与其他控制器之间以及一个 Action 与另一个 Action 之间发送和接收数据。这之所以可能，是因为它内部使用了会话变量。

有关 TempData 的更多信息，请访问 此处。在这里，我们将仅使用 TempData 来存储（在服务器端 HomeController）并传递（到 TempDataDemo.cshtml）课程列表。

1. 在 home controller 中，添加以下代码。

   public ActionResult TempDataDemo()
   {
       // TempData demo uses repository to get List<courses> only one time
       // for subsequent request to get List<courses> it will use TempData
       TempData["Courses"] = _repository.GetCourses();
   
       // This will keep Courses data untill next request is served
       TempData.Keep("Courses");
       return View();
   }

2. 使用 TempData，我们可以将值从一个 Action 传递到另一个 Action。TempData["Courses"] 包含课程列表。我们将在 FacultiesToTempDataDemo action 中访问此列表，如下所示。

   public ActionResult FacultiesToTempDataDemo(string courseName)
   {
       var allCourses = TempData["Courses"] as IEnumerable <Course>;
       
       // Since there are two AJAX call on TempDataPage
       // So we keep to keep Courses data for the next one
       TempData.Keep("Courses");
       var selectedCourseId = (from c in allCourses where 
       c.CourseName == courseName select c.CourseId).FirstOrDefault();
       
       IEnumerable <Faculty> allFaculties = _repository.GetFaculties();
       var facultiesForCourse = allFaculties.Where(f => 
       f.AllotedCourses.Any(c => c.CourseId == selectedCourseId)).ToList();
       
       return PartialView("FacultyPV", facultiesForCourse);
   }
   
   public ActionResult StudentsToTempDataDemo(string courseName)
   {
       var allCourses = TempData["Courses"] as IEnumerable <Course>;
       
       // If there is change in course again...it may cause more AJAX calls
       // So we need to keep Courses data
       TempData.Keep("Courses");
       
        var selectedCourseId = (from c in allCourses where 
        c.CourseName == courseName select c.CourseId).FirstOrDefault();
        
       IEnumerable <Student> allStudents = _repository.GetStudents();
       var studentsInCourse = allStudents.Where(s => 
       s.EnrolledCourses.Any(c => c.CourseId == selectedCourseId)).ToList();
       
       return PartialView("StudentPV", studentsInCourse);
   }            

3. 通过右键单击 TempDataDemo action 方法添加一个视图。写入与您在 PartialViewDemo.cshtml 中编写的相同的代码。只需修改一行代码，如下所示：

   @*Iterating Course model using TempData["Courses"] *@
   @foreach (var item in TempData["Courses"] 
   	as List <MultipleModelDemo.Models.Course>)
   {         
       <option>@item.CourseName </option>            
   }           

   在 getFacultyTable 和 getStudentTable 函数中分别修改 url，如下所示：

   url: "/Home/FacultiesToTempDataDemo",
   url: "/Home/StudentsToTempDataDemo",            

   FacultiesToTempDataDemo 和 StudentsToTempDataDemo 这两个 Action 方法都将返回我们在 PartialView 演示中使用的相同 PartialView。

使用 ViewModel 传递多个模型

ViewModel 是一种模式，它允许我们将多个模型组合成一个类。它包含在视图中需要使用的实体的属性。ViewModel 不应该包含方法。它应该是一个用于视图的属性集合。

1. 我们有三个模型（类），分别名为 Student、Course 和 Faculty。它们都是不同的模型，但我们需要在视图中使用这三个模型。我们将通过添加一个名为 ViewModels 的新文件夹来创建一个 ViewModel，并添加一个名为 ViewModelDemoVM.cs 的类文件，然后写入以下代码，如下所示。

   public class ViewModelDemoVM
   {        
       public List <Course> allCourses { get; set; }
       public List <Student> allStudents { get; set; }
       public List <Faculty> allFaculties { get; set; }
   }            

   注意： 作为一个良好的实践，当您创建任何 ViewModel 时，它应该以 VM 或 ViewModel 作为后缀。

2. 在 HomeController 中，添加以下代码。

   public ActionResult ViewModelDemo()
   {
       ViewModelDemoVM vm = new ViewModelDemoVM();
       vm.allCourses = _repository.GetCourses();
       vm.allFaculties = _repository.GetFaculties();
       vm.allStudents = _repository.GetStudents();
   
       return View(vm);
   }            

   ViewModelDemo 是一个 action 方法，它将返回一个视图，该视图包含 ViewModelDemoVM，其中包含所有 Courses、Faculties 和 Students 的列表。

3. 右键单击 ViewModelDemo 以添加一个名为 ViewModelDemo 的视图。ViewModelDemo.cshtml 视图将使用 ViewModelDemoVM 作为 Model，如下所示。

   @model MultipleModelDemo.ViewModel.ViewModelDemoVM            

4. 修改 foreach 函数。

   @*Iterating Course ViewModel *@
   @foreach (var item in Model.allCourses)
       {         
           <option>@item.CourseName</option>            
       }            

5. 在 getFacultyTable 函数中替换以下代码行：

   //Get all faculties with the help of viewmodel
   //(Model.allFaculties), and convert data into json format.
   var allFaculties = @Html.Raw(Json.Encode(Model.allFaculties));

6. 在 getStudentTable 函数中替换以下代码行：

   //Get all students with the help of viewmodel(Model.allStudents), 
   //and convert data into json format.
   var allStudents = @Html.Raw(Json.Encode(Model.allStudents));            

使用 Tuple 传递多个模型

Tuple 是 .NET Framework 4.0 中引入的一个新类。它是一个有序序列、不可变、固定大小的异构（允许我们组合多种数据类型）对象集合。

1. 在 Home controller 中添加以下代码。

   public ActionResult TupleDemo()
   {
       var allModels = new Tuple <List <Course>, 
       List <Faculty>,  List <Student>>
       (_repository.GetCourses(), _repository.GetFaculties(),  _repository.GetStudents()) { };
        return View(allModels);
   }            

   在这里，我们定义了一个 tuple，其中包含课程、教师和学生列表。我们将此 tuple 传递给 View。

2. 添加一个名为 TupleDemo 的 View。编写与您在 ViewModelDemo.cshtml 文件中编写的代码相同的代码。只需替换几行代码。替换模型声明，如下所示。在这里，我们将使用命名空间以避免过长的完全限定类名。

   @using MultipleModelDemo.Models;
   @model Tuple <List <Course>, List <Faculty>, List <Student>>            

3. 修改 foreach 函数

   @*Iterating Course model using tuple *@
   @foreach (var item in Model.Item1)
       {         
            <option>@item.CourseName </option>            
       }            

   这里 Model.Item1 被映射到 Course 模型。

4. 在名为 getFacultyTable 的 JavaScript 函数内，替换以下代码行：

   var allFaculties = @Html.Raw(Json.Encode(Model.Item2));            

   这里 Model.Item2 被映射到 Faculty 模型。

5. 在名为 getStudentTable 的 JavaScript 函数内，替换以下代码行：

   var allStudents = @Html.Raw(Json.Encode(Model.Item3));            

   这里 Model.Item3 被映射到 Student 模型。

VS 2013 / MVC 5 更新

如果您想使用 Visual Studio 2013 / MVC 5，MVC 4 的第 1 步和第 2 步将有所不同，因此请按照以下步骤操作，然后从上面 MVC 4 的第 3 步开始。

1. 打开 Visual Studio 2013，单击“新建项目”，选择 ASP.NET Web Application 模板，将项目名称命名为 MultipleModelDemo，然后单击 OK。

   

2. 选择 MVC 模板，并确保除 MVC 外，弹出的下方部分的所有复选框都已取消勾选。在单击 OK 之前，我们需要更改身份验证（因为此演示不使用身份验证或单元测试，以保持简单和切题）。请查看下面的屏幕截图。

   

   
   将身份验证从“Individual User Account”更改为“No Authentication”

   

   
   Visual Studio 会在解决方案中添加一个 MultipleModelDemo 项目。现在您可以按照 MVC 4 的第 3 步及后续步骤进行操作。

结论

在本文中，我们学习了如何在视图中使用多个模型。在文章 如何选择传递多个模型的最佳方法 中，我分享了我关于何时何地选择特定方法在视图中使用多个模型的发现。您的输入和疑问都非常受欢迎。谢谢。