ASP.NET Core MVC 视图组件(View Components)是一种可重用的 UI 组件,用于在视图中呈现某些特定的功能块,例如导航菜单、侧边栏、用户信息等。视图组件提供了一种将视图逻辑与控制器解耦的方式,使视图能够更加灵活、可复用。
要创建一个视图组件,你需要遵循以下步骤:
- 创建一个继承自
ViewComponent
类的视图组件类,例如StudentViewComponent
。
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 })
。文章来源:https://uudwc.com/A/k9X1D
视图组件的主要优势是它提供了一种可重用和解耦的组织方式,将视图逻辑封装在独立的组件中,使得视图更加灵活和易于维护。文章来源地址https://uudwc.com/A/k9X1D