.net core 使用ViewComponent

.NET Core中ViewComponent的使用

最新推荐文章于 2025-06-07 00:14:56 发布

转载最新推荐文章于 2025-06-07 00:14:56 发布 · 518 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/zbspace/p/11620131.html

文章标签：

#.net #.net core #ViewComponent

.net core 专栏收录该内容

7 篇文章

订阅专栏

.NET Core中使用ViewComponent创建可复用的局部视图组件，通过继承ViewComponent类并实现InvokeAsync方法来返回视图数据。示例展示了如何在Share目录下建立Components目录，创建对应的Default.cshtml视图文件，并在页面中调用ViewComponent。

.net core 使用ViewComponent

.net core 中的局部视图组件是ViewComponent，可以用于建制重复使用公共功能组件

一、新建一个类DemoViewComponent(必须以ViewComponent结尾)且继承ViewComponent

using Microsoft.AspNetCore.Mvc;
using NetCoreApiDemo.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

namespace NetCorePortal.Components
{
    public class DemoViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            List<tbl_page> pageList = new List<tbl_page>();
            for (int i = 0; i < 10; i++)
            {
                pageList.Add(new tbl_page()
                {
                    page_no = i.ToString(),
                    page_name = i.ToString()
                });
            }
            return View(pageList);//此处没有返回ViewName 对应的视图文件是Default.cshtml
            //return View("D", pageList);//此处返回的ViewName 是“D” 对应的视图文件是D.cshtml
        }
    }
}

二、在View/Share目录下建立Components目录，并在此目录下建立Demo目录及对应Default.cshtml文件

@model IEnumerable<NetCoreApiDemo.Model.tbl_page>
<h1>Demo IViewComponentResult</h1>
<table>
    <tr>
        <th>page_no</th>
        <th>page_name</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.page_no</td>
            <td>@item.page_name</td>
        </tr>
    }
</table>

三、调用上面建立的 DemoViewComponent

@{
    ViewData["Title"] = "Home Page";
}

@await Component.InvokeAsync("Demo")