ASP.NET CORE[练习16]-ViewComponent

最新推荐文章于 2025-03-20 10:42:24 发布

修武FEN青

最新推荐文章于 2025-03-20 10:42:24 发布

阅读量511

点赞数

分类专栏： ASP.NET CORE学习文章标签： ViewComponent

本文链接：https://blog.youkuaiyun.com/qq_25991955/article/details/100918284

版权

ASP.NET CORE学习专栏收录该内容

16 篇文章

订阅专栏

本文介绍了ASP.NET CORE中ViewComponent的概念，它类似带有Controller的PartialView，适用于处理复杂业务。通过实现Invoke或InvokeAsync方法返回ViewComponentResult。文章提供了创建和使用ViewComponent的步骤，包括创建一个指示网络连接状态的ViewComponent实例，详细阐述了其视图的创建和调用方法。

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

练习+博客，量化自己的进步！

简介：

ViewComponent相当于PartialView带着一个Controller
可适用于较复杂业务
可使用razor语法
只能配合父级得view使用
继承ViewComponent父类
实现Invlke或InvokeAsync方法，返回类型ViewComponentResult

实例

做一个ViewComponent指示网络是否连接：

1.新建一个文件夹ViewComponents

2.新建InternetStatusViewComponent

// 继承ViewComponent
public class InternetStatusViewComponent:ViewComponent
{
    // 实现方法InvokeAsync,返回类型未IViewCommponentResult
    public async Task<IViewComponentResult> InvokeAsync()
    {
        var httpClient = new HttpClient();
        var response = await httpClient.GetAsync("https://www.baidu.com");
        if (response.StatusCode == System.Net.HttpStatusCode.OK)
        {
            return View("Default",true);
        }
        else
        {
            return View("Default",false);
        }
    }
}

3.新建视图，ViewComponent用在哪就放到相应得层级下，如：

4.视图内容

@model bool
@if (Model)
{
    <span class="badge badge-success">Connected</span>
}
else
{
    <span class="badge badge-danger">Not Connected</span>
}

6.调用ViewComponent

5.展示

联网得时候