netcore MVC 实现 view component

在 ASP.NET Core MVC 中，View Component 是一种可以在视图中重用的组件，类似于部分视图（Partial View），但它更加强大和灵活。View Component 通常用于在多个视图中显示相同的数据或 UI 逻辑。

以下是实现一个简单 View Component 的步骤：

创建 View Component 类
首先，创建一个类来定义你的 View Component。这个类应该继承自 ViewComponent 基类，并且通常放在项目的 Components 文件夹下。

csharp

using Microsoft.AspNetCore.Mvc;
 namespace YourNamespace.Components {
 public class MyViewComponent : ViewComponent {
 public IViewComponentResult Invoke() {
 // 你的逻辑代码，例如获取数据等 var model = "Hello from ViewComponent!";
 return View(model);
 } } }

创建 View Component 的视图
接下来，创建一个视图来渲染你的 View Component。视图文件应该放在 Views/Shared/Components/[ViewComponentName]/Default.cshtml 目录下。

例如，对于 MyViewComponent，视图路径应为 Views/Shared/Components/MyViewComponent/Default.cshtml。

html

@model string <div> @Model </div>

在视图中调用 View Component
最后，在你的视图中调用 View Component。你可以在任何视图中使用 Component.InvokeAsync 方法来调用 View Component。

html

@await Component.InvokeAsync("MyViewComponent")

这样就完成了一个简单的 View Component 的实现。

例子
假设我们有一个 View Component 需要显示一组热门的文章：

创建 View Component 类

csharp

using Microsoft.AspNetCore.Mvc;
 using YourNamespace.Models;
 // 假设你有一个 Article 模型 using YourNamespace.Services;
 // 假设你有一个服务来获取热门文章 namespace YourNamespace.Components {
 public class TopArticlesViewComponent : ViewComponent {
 private readonly IArticleService _articleService;
 public TopArticlesViewComponent(IArticleService articleService) {
 _articleService = articleService;
 } public async Task<IViewComponentResult> InvokeAsync() {
 var articles = await _articleService.GetTopArticlesAsync();
 return View(articles);
 } } }

创建视图

创建视图文件 Views/Shared/Components/TopArticles/Default.cshtml：

html

@model IEnumerable<YourNamespace.Models.Article> <div> <h2>Top Articles</h2> <ul> @foreach (var article in Model) {
 <li>@article.Title</li> } </ul> </div>

在视图中调用 View Component

在你需要显示热门文章的视图中调用 View Component，例如在 Views/Home/Index.cshtml 中：

html

@await Component.InvokeAsync("TopArticles")

这样，你就实现了一个显示热门文章的 View Component。View Component 可以使你的代码更加模块化和可重用，特别是在需要在多个视图中共享相同逻辑的情况下非常有用。

传值

@await Component.InvokeAsync("Greeting", new { name = "World" })

namespace YourNamespace.Components
{
    public class UserProfileViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(User user)
        {
            // 你的逻辑代码，例如获取用户详细信息等
            var model = new UserProfileViewModel
            {
                UserName = user.Name,
                UserEmail = user.Email
            };
            return View(model);
        }
    }

    public class UserProfileViewModel
    {
        public string UserName { get; set; }
        public string UserEmail { get; set; }
    }
}

@model YourNamespace.Components.UserProfileViewModel

<div>
    <h2>@Model.UserName</h2>
    <p>Email: @Model.UserEmail</p>
</div>

@{
    var user = new YourNamespace.Models.User
    {
        Name = "John Doe",
        Email = "john.doe@example.com"
    };
}

@await Component.InvokeAsync("UserProfile", new { user })