Razor Pages布局页用强类型分部视图实现全局菜单报错求助

问题根源 #

_Layout.cshtml作为全局布局，它的Model绑定的是当前请求页面的PageModel（比如你遇到的IndexModel），而非专门的菜单模型。直接通过Model.MainMenuModel访问会报错，因为当前PageModel没有这个属性；不指定模型时，分部视图会自动继承Layout的PageModel类型，和它需要的List<MainMenuModel>类型不匹配，导致类型错误。

可行解决方案 #

方案一：基于基础PageModel+ViewData传递数据

适合所有页面都需要共享菜单数据的场景：

1. 创建基础PageModel，所有页面的PageModel继承它，在基类中统一加载菜单数据到ViewData

public class BasePageModel : PageModel
{
    private readonly IMenuService _menuService; // 假设你有获取菜单数据的服务

    public BasePageModel(IMenuService menuService)
    {
        _menuService = menuService;
    }

    public override void OnGet()
    {
        // 加载菜单数据到ViewData
        ViewData["MainMenuData"] = _menuService.GetTopLevelMenuItems();
        base.OnGet();
    }

    // 如果需要支持POST请求，重写OnPost方法做同样操作
}

2. 让所有页面的PageModel继承这个基类

public class IndexModel : BasePageModel
{
    public IndexModel(IMenuService menuService) : base(menuService)
    {
    }

    // 页面自身业务逻辑
}

3. 修改_Layout.cshtml中的分部视图引用

<div id="navbar" class="navbar-collapse">
    <partial name="_TopLevelMenu" model="ViewData["MainMenuData"] as List<Data.Models.MainMenuModel>" />
</div>

4. 保持_TopLevelMenu.cshtml不变，依然使用@model List<Data.Models.MainMenuModel>

方案二：使用ViewComponent（推荐，更优雅）

ViewComponent是Razor Pages中专门用于复用UI组件的特性，适合独立的全局UI模块：

1. 创建ViewComponent类

public class TopLevelMenuViewComponent : ViewComponent
{
    private readonly IMenuService _menuService;

    public TopLevelMenuViewComponent(IMenuService menuService)
    {
        _menuService = menuService;
    }

    public IViewComponentResult Invoke()
    {
        // 直接在组件内获取菜单数据
        var menuItems = _menuService.GetTopLevelMenuItems();
        return View("_TopLevelMenu", menuItems);
    }
}

2. 把原有的_TopLevelMenu.cshtml移动到Pages/Shared/Components/TopLevelMenu/Default.cshtml（如果不想移动，可在Invoke()中指定视图名：return View("_TopLevelMenu", menuItems);）
3. 在_Layout.cshtml中调用ViewComponent

<div id="navbar" class="navbar-collapse">
    @await Component.InvokeAsync("TopLevelMenu")
</div>

原尝试方案的问题说明 #

• 直接指定Model.MainMenuModel：Layout的Model是当前页面的PageModel，不存在该属性，所以报错
• 不指定模型：分部视图自动继承Layout的PageModel类型，和需要的List<MainMenuModel>类型不匹配
• 实例化空模型：仅创建了空对象，没有加载真实的菜单数据，所以看不到内容

内容的提问来源于stack exchange，提问作者NovaDev