15 控制器与视图之数据传递与模型绑定

在我们上篇的内容中，我们讨论了如何创建和使用视图。在这一章中，我们将深入探讨如何在控制器与视图之间传递数据，以及如何进行模型绑定。这些知识对于构建动态网站非常重要，因为它们使得用户输入的数据能够与我们的后端逻辑无缝对接。

数据传递

1. 将数据发送到视图

在ASP.NET Core MVC中，控制器是处理用户请求的主要组件。我们可以通过控制器将数据发送到视图。有几种方法可以做到这一点：

• 视图数据（ViewData）
  使用 ViewData 传递数据是最简单的方法之一。ViewData 是一个字典，您可以在控制器中将数据添加到其中，随后在视图中读取这些值。

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

  在视图中，您可以这样访问这个值：

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

• 视图模型（ViewModel）
  使用专门的视图模型（ViewModel）是另一种推荐的方式。视图模型是一个类，用于封装视图所需的数据。

  public class MyViewModel
  {
      public string Message { get; set; }
      public int Count { get; set; }
  }
  
  public class HomeController : Controller
  {
      public IActionResult Index()
      {
          var model = new MyViewModel
          {
              Message = "欢迎来到我的网站!",
              Count = 10
          };
          return View(model);
      }
  }

  在视图中，您可以通过强类型的视图模型来访问数据：

  @model MyViewModel
  
  <h1>@Model.Message</h1>
  <p>计数: @Model.Count</p>

2. 从视图接收数据

用户输入的数据通常会通过表单提交到控制器。ASP.NET Core MVC通过模型绑定（Model Binding）来处理这些数据。模型绑定的过程是自动的，它会将从表单提交的数据映射到控制器方法的参数中。

模型绑定

模型绑定的工作机制非常强大。下面是一个基本的示例。

public class User
{
    public string Name { get; set; }
    public int Age { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public IActionResult Submit(User user)
    {
        if (ModelState.IsValid)
        {
            // 处理用户数据
            return RedirectToAction("Success");
        }
        
        return View(user);
    }
}

在视图中，您可以使用 Tag Helpers 创建一个简单的表单：

@model User

<form asp-action="Submit" method="post">
    <label asp-for="Name"></label>
    <input asp-for="Name" />
    
    <label asp-for="Age"></label>
    <input asp-for="Age" />
    
    <button type="submit">提交</button>
</form>

3. 处理复杂模型

有时候，您的模型可能会更复杂，包含嵌套对象或集合。模型绑定同样能处理这些情况：

public class Order
{
    public int Id { get; set; }
    public List<Item> Items { get; set; }
}

public class Item
{
    public string ProductName { get; set; }
    public int Quantity { get; set; }
}

您的视图可以包含一个包含多个项目的表单：

@model Order

<form asp-action="SubmitOrder" method="post">
    <input type="hidden" asp-for="Id" />
    
    @for (int i = 0; i < Model.Items.Count; i++)
    {
        <div>
            <label asp-for="Items[i].ProductName"></label>
            <input asp-for="Items[i].ProductName" />
            
            <label asp-for="Items[i].Quantity"></label>
            <input asp-for="Items[i].Quantity" />
        </div>
    }
    
    <button type="submit">提交订单</button>
</form>

在控制器中，您可以通过模型绑定容易地获取提交的数据：

[HttpPost]
public IActionResult SubmitOrder(Order order)
{
    if (ModelState.IsValid)
    {
        // 处理订单数据
    }
    
    return View(order);
}

结论

在本节中，我们讨论了如何在ASP.NET Core MVC中进行数据传递和模型绑定。通过使用 ViewData、视图模型和表单，我们能够有效地从控制器向视图传递数据，并将视图中的用户输入数据提交回控制器。这为构建动态和互动丰富的Web应用打下了坚实的基础。

在下一章节中，我们将探讨依赖注入的概念，这是ASP.NET Core框架的核心特性之一，能够帮助我们创建更松耦合和易于测试的应用程序。