asp.net core mvc 视图组件viewComponents

hellwrol2023-10-05 9:15

ASP.NET Core MVC 视图组件（View Components）是一种可重用的 UI 组件，用于在视图中呈现某些特定的功能块，例如导航菜单、侧边栏、用户信息等。视图组件提供了一种将视图逻辑与控制器解耦的方式，使视图能够更加灵活、可复用。

要创建一个视图组件，你需要遵循以下步骤：

创建一个继承自 ViewComponent 类的视图组件类，例如 StudentViewComponent。

csharp 复制代码

public class StudentViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        // 执行逻辑，获取要返回给视图的数据
        var students = await GetStudentsAsync();

        // 返回带有数据的视图
        return View(students);
    }

    private Task<List<Student>> GetStudentsAsync()
    {
        // 执行获取学生数据的逻辑...
    }
}

在 Views/Shared/Components 文件夹下，为视图组件创建一个文件夹，例如 Student。在该文件夹中，创建一个 Default.cshtml 视图文件，用于呈现视图组件的 UI。

Views/Shared/Components/Student/Default.cshtml
在需要使用视图组件的视图文件中，使用 @await Component.InvokeAsync(typeof(StudentViewComponent)) 或 @await Component.InvokeAsync("StudentViewComponent") 来调用视图组件并在视图中显示。

@await Component.InvokeAsync(typeof(StudentViewComponent))

这样，视图组件就可以在视图中被调用并渲染。

请注意，视图组件类名以 ViewComponent 结尾是一个约定，但在使用时只需要指定 Student 或 StudentViewComponent 即可。

你可以通过传递参数给视图组件的 InvokeAsync 方法，来在视图组件中使用不同的数据或执行不同的逻辑。例如 @await Component.InvokeAsync(typeof(StudentViewComponent), new { id = 1 })。

视图组件的主要优势是它提供了一种可重用和解耦的组织方式，将视图逻辑封装在独立的组件中，使得视图更加灵活和易于维护。