14 控制器与视图之视图的创建与使用

在上一篇中，我们讨论了如何创建控制器。在本篇中，我们将重点放在视图的创建与使用上，进一步完善我们的ASP.NET Core应用程序。

什么是视图？

在ASP.NET Core MVC中，视图是负责展示用户界面的部分。视图通常是HTML页面，它可以通过C#代码生成动态内容。我们的目标是通过控制器将数据传递到视图，使用户能够看到动态生成的内容。

在此过程中，视图将使用 Razor 语法进行编写，这是 ASP.NET 中用于创建动态网页的引擎。

创建视图

首先，我们需要创建一个视图。在我们之前创建的控制器中，假设我们有一个简单的 HomeController，我们将在其中创建一个名为 Index 的动作方法。

步骤 1: 创建 Index 动作方法

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

在这个 Index 方法中，我们调用了 View() 方法，这将会返回 Index 视图。

步骤 2: 创建视图文件

在项目的 Views 目录下，创建一个名为 Home 的子目录（与控制器名称相同）。然后，在 Home 目录中创建一个名为 Index.cshtml 的文件，这是我们的视图文件。

@{
    ViewData["Title"] = "首页";
}

<h1>欢迎来到首页</h1>
<p>这是我的第一个ASP.NET Core MVC应用。</p>

这个视图文件使用了 Razor 语法，我们为该视图设置了一个标题，并显示了一些文本。

使用视图

当我们启动应用程序并访问 /Home/Index 路径时，ASP.NET Core将调用 HomeController 的 Index 方法，并返回 Index.cshtml 视图。

传递数据到视图

在大多数情况下，我们希望将一些数据传递给视图。我们可以使用 ViewData 或 ViewBag 来实现这一点。

使用 ViewData

我们可以在控制器中添加一些数据：

public IActionResult Index()
{
    ViewData["Message"] = "欢迎来到我的网站！";
    return View();
}

然后，在 Index.cshtml 中使用这些数据：

<p>@ViewData["Message"]</p>

使用 ViewBag

ViewBag 也可以用来传递动态数据，类似于 ViewData：

public IActionResult Index()
{
    ViewBag.Message = "这是通过ViewBag传递的消息！";
    return View();
}

在视图中访问它：

<p>@ViewBag.Message</p>

使用模型

除了用 ViewData 和 ViewBag 传递数据外，最推荐的方式是使用模型。模型是一个类，它通常包含我们希望在视图中展示的数据。

创建模型

让我们创建一个简单的模型类，比如 Product：

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
}

然后在 HomeController 中使用这个模型：

public IActionResult Index()
{
    var product = new Product { Name = "笔记本", Price = 9.99M };
    return View(product);
}

修改视图

接下来，我们需要更新视图以使用这个模型。在 Index.cshtml 文件的顶部，添加以下代码来声明模型：

@model Product

然后，我们可以直接使用模型的数据：

<h1>产品名称: @Model.Name</h1>
<p>产品价格: @Model.Price</p>

总结

在本篇中，我们学习了如何创建和使用视图。我们看到了如何通过控制器返回视图，并且我们讨论了如何使用 ViewData、ViewBag 和模型来传递数据。通过这些基础知识，我们可以构建更复杂的视图逻辑和用户界面。

在下一篇中，我们将探讨数据传递与模型绑定的话题，进一步增强我们应用程序的功能。希望这篇文章能够帮助你更好地理解 ASP.NET Core MVC 中视图的创建与使用。