.net core 3.x 中的ViewComponent使用方式

.NET跨平台

于 2022-02-05 20:14:56 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP.NET Core MVC | Blazor 文章标签： .netcore mvc microsoft

原文链接：https://blog.youkuaiyun.com/WuLex

ASP.NET Core MVC | Blazor 专栏收录该内容

234 篇文章

订阅专栏

本文介绍了如何在.NET Core 3.x MVC项目中创建和使用ViewComponent。通过CounterViewComponent的例子展示了如何定义一个ViewComponent，以及如何在Index视图中调用并显示组件。实验结果成功地显示了ViewComponent的计数功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`ViewComponent` 基础

创建一个.NetCore 3.x的MVC项目

。。。

实验目的

在这里插入图片描述

开始实验

创建 ViewComponents

创建 CounterViewComponent.cs

CounterViewComponent.cs内容如下

public class CounterViewComponent:ViewComponent
{
    public static int i = 0;
    private readonly ILogger<HomeController> _logger;
    public CounterViewComponent(ILogger<HomeController> logger)
    {
        _logger = logger;
    }
    public async Task<IViewComponentResult> InvokeAsync()
    {
        var controller = RouteData.Values["controller"].ToString();
        var action = RouteData.Values["action"].ToString();
        if (!string.IsNullOrWhiteSpace(controller) && !string.IsNullOrWhiteSpace(action))
        {
            var pageId = $"{controller}-{action}";
            i = i++;
            return View("Default", pageId +": "+ i);
        }
        throw new  Exception("Cannot get pageId");
    }
}

在 Views文件夹创建下列对应文档与路径
在这里插入图片描述
在HomeController中的Index视图上添加如下代码
在这之前我把layer给去掉了

<h1>@await Component.InvokeAsync("Counter")</h1>