本实验演示如何使用弱类型视图模型将数据从控制器传至视图。

弱类型视图模型分为 ViewData 和 ViewBag 两种。

准备工作

打开 MyWebApp 项目，在 Controllers 文件夹里面添加 TestController.cs：

  1. using Microsoft.AspNetCore.Mvc;
  2. namespace MyWebApp.Controllers 
  3. {
  4.     public class TestController : Controller 
  5.     {
  6.         // Add actions here ...
  7.     }
  8. }

使用 ViewData

在 TestController 里面添加 action。Action 中使用 ViewData 传递数据。

  1. public IActionResult Foo() 
  2. {
  3.     ViewData["Title"] = "Foo";
  4.     ViewData["Header"] = "Header Foo";
  5.     ViewData["Items"] = "AAA BBB CCC".Split(' ');
  6.     return View();
  7. }

添加视图 Foo.cshtml：

  1. <html>
  2.     <head>
  3.         <title>@ViewData["Title"]</title>
  4.     </head>
  5.     <body>
  6.         <h1>@ViewData["Header"]</h1>
  7.         <ul>
  8.             @foreach(var item in (string[])ViewData["Items"]){
  9.                 <li>@item</li>
  10.             }
  11.         </ul>
  12.     </body>
  13. </html>

因为 ViewData 的数据类型是 object，所以对于复杂数据要使用显式转换，例如 (string[])ViewData["Items"]。

渲染结果：

  1. <html>
  2.     <head>
  3.         <title>Foo</title>
  4.     </head>
  5.     <body>
  6.         <h1>Header Foo</h1>
  7.         <ul>
  8.                 <li>AAA</li>
  9.                 <li>BBB</li>
  10.                 <li>CCC</li>
  11.         </ul>
  12.     </body>
  13. </html>

使用 ViewBag

在 TestController 里面添加 action。Action 中使用 ViewBag 传递数据。

  1. public IActionResult Bar() 
  2. {
  3.     ViewBag.Title = "Bar";
  4.     ViewBag.Header = "Header Bar";
  5.     ViewBag.Items = "DDD EEE FFF".Split(' ');
  6.     return View();
  7. }

添加视图 Bar.cshtml：

  1. <html>
  2.     <head>
  3.         <title>@ViewBag.Title</title>
  4.     </head>
  5.     <body>
  6.         <h1>@ViewBag.Header</h1>
  7.         <ul>
  8.             @foreach(var item in (string[])ViewBag.Items){
  9.                 <li>@item</li>
  10.             }
  11.         </ul>
  12.     </body>
  13. </html>

因为 ViewBag 属性的类型是 dynamic，所以许多时候依然要使用显示转换，例如(string[])ViewBag.Items 。

渲染结果：

  1. <html>
  2.     <head>
  3.         <title>Bar</title>
  4.     </head>
  5.     <body>
  6.         <h1>Header Bar</h1>
  7.         <ul>
  8.                 <li>DDD</li>
  9.                 <li>EEE</li>
  10.                 <li>FFF</li>
  11.         </ul>
  12.     </body>
  13. </html>