视图组件用于封装UI逻辑并生成局部视图，适合复用场景。1. 创建继承ViewComponent的类，命名以ViewComponent结尾或加[ViewComponent]特性；2. 在Views/Shared/Components/{Name}/Default.cshtml创建对应视图；3. 在Razor视图中用@await Component.InvokeAsync(“Name”, args)调用；4. 支持异步方法InvokeAsync处理耗时操作。结构清晰，便于维护。
在 ASP.NET Core 中，视图组件（View Component）是一种可重用的组件，用于封装页面逻辑并生成部分视图内容。它类似于控制器，但更专注于 UI 片段，适合用在布局页、侧边栏、导航菜单等需要复用的地方。
1. 创建视图组件类
视图组件类通常继承自 ViewComponent，可以放在项目中的任意位置，但推荐放在 ViewComponents 文件夹中。
命名要求：类名以 “ViewComponent” 结尾，或使用 [ViewComponent] 特性标记。
// 示例：创建一个显示用户通知的视图组件
using Microsoft.AspNetCore.Mvc;namespace MyWebApp.ViewComponents{ public class NotificationViewComponent : ViewComponent { public IViewComponentResult Invoke(int maxNotifications = 5) { // 模拟数据 var notifications = new[] { new { Message = "你有一条新消息", Time = DateTime.Now.AddMinutes(-10) }, new { Message = "系统更新提醒", Time = DateTime.Now.AddMinutes(-30) } }; return View(notifications.Take(maxNotifications)); } }}
2. 创建视图组件对应的视图文件
视图组件的视图文件应放在 Views/Shared/Components/{ViewComponentName}/Default.cshtml 或 Views/{Controller}/Components/{ViewComponentName}/Default.cshtml。
其中 {ViewComponentName} 是去掉 “ViewComponent” 后缀后的类名（如 Notification）。
// 示例：Notification 视图文件路径
Views/Shared/Components/Notification/Default.cshtml
@model IEnumerable通知 @Model.Count()
@foreach (var item in Model) {
- @item.Message (@item.Time.ToString("HH:mm"))
}
3. 在视图中调用视图组件
使用 Component.InvokeAsync 方法在 Razor 视图中异步调用视图组件。
@await Component.InvokeAsync("Notification", new { maxNotifications = 3 })
也可以使用同步方式（不推荐在生产环境使用）：
@{ Component.Invoke("Notification", 3); }
4. 异步支持（可选）
如果需要执行异步操作（如数据库查询），可以使用 InvokeAsync 方法：
public async Task InvokeAsync(int maxNotifications){ var notifications = await _notificationService.GetRecentAsync(maxNotifications); return View(notifications);}
基本上就这些。创建视图组件就是写一个类、配一个视图、然后在页面上调用。结构清晰，复用方便，适合处理局部动态内容。
以上就是ASP.NET Core 中的视图组件如何创建？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1440871.html
微信扫一扫 
支付宝扫一扫 
