Jupyter AI

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

📅 发表日期: 2024年8月15日

分类: 🌐ASP.NET Core 入门

👁️阅读: --

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

数据传递

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框架的核心特性之一,能够帮助我们创建更松耦合和易于测试的应用程序。