在ASP.NET Core中，经常需要在不同的页面上重复使用某些动态内容，例如动态菜单。传统的Partial Views虽然可以用于重用静态标记，但对于构建动态、数据驱动的内容来说，它们并不是最佳选择。在这种情况下，ViewComponent提供了一种更加强大且灵活的解决方案。
ViewComponent类似于Partial Views，但它们更加强大。ViewComponent不一定使用模型绑定，并且仅依赖于调用时提供的数据。这意味着ViewComponent可以：
ViewComponent非常适合用于实现复杂的可重用渲染逻辑，例如：
在本文中，将通过一个示例来展示如何使用ViewComponent来构建一个用户特定的动态菜单。
首先，需要创建一个ViewComponent。以下是一个简单的示例：
namespace WebApplication1.Controllers
{
public class MenuViewComponent : ViewComponent
{
private readonly MenuHelper _cbaMenuHelper = new MenuHelper();
public async Task InvokeAsync(int testId)
{
string baseUrl = Request.Scheme + "://" + Request.Host.Value;
var httpRequestFeature = Request.HttpContext.Features.Get();
var uri = httpRequestFeature.RawTarget;
var id = HttpContext.Request.Query["id"].ToString();
var menuItems = await _cbaMenuHelper.GetAllMenuItems(baseUrl + uri, id);
return View("_MenuPartial", _cbaMenuHelper.GetMenu(menuItems, null));
}
}
}
在这个示例中，创建了一个名为MenuViewComponent的ViewComponent。它接受一个可选的testId参数，并使用当前URL来确定要高亮显示的菜单项。然后，它调用MenuHelper类的方法来获取所有菜单项，并将其传递给视图。
接下来，需要定义菜单项的数据结构。以下是一个简单的Menu类示例：
public class Menu
{
public Guid ID { get; set; }
public Guid? ParentID { get; set; }
public string Content { get; set; }
public string IconClass { get; set; }
public string Url { get; set; }
public string SelectedStyle { get; set; }
public string SelectedClass { get; set; }
public string OnClick { get; set; }
public long Order { get; set; }
}
这个类定义了菜单项的基本属性，包括ID、父ID、内容、图标类、URL、选中样式、选中类、点击事件和排序。
最后，需要在视图中显示菜单。以下是一个简单的示例：
@foreach (var menu in Model)
{
if (menu.Children.Any())
{
}
else
{
}
}
在这个示例中，使用了一个foreach循环来遍历Model中的菜单项。对于每个菜单项，检查它是否有子菜单。如果有子菜单，创建一个包含子菜单的列表。否则，创建一个单独的菜单项。
最后，需要从布局页面调用ViewComponent。以下是一个简单的示例：
@await Component.InvokeAsync("Menu", new { cbaId = ViewBag.Id })