ASP.NET Core Razor Pages布局页代码后置模型类型不匹配报错求助

问题原因 #

布局页是所有内容页的共享模板，不会单独运行，而是由当前请求的内容页（比如你的Logout页）驱动。如果给布局页指定了_LayoutModel作为模型，当内容页使用自身模型（比如Pages_Logout）渲染时，就会出现模型类型不匹配的错误。

解决方案 #

方案1：用ViewData/ViewBag传递数据 #

不给布局页创建PageModel，通过ViewData或ViewBag在内容页中传递用户头像数据：

1. 新建基础页面模型类，让所有内容页继承它：

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace xx.WebApp.Pages
{
    public class BasePageModel : PageModel
    {
        private readonly GraphProfileClient _graphProfileClient;

        public BasePageModel(GraphProfileClient graphProfileClient)
        {
            _graphProfileClient = graphProfileClient;
        }

        public async Task OnGetAsync()
        {
            ViewData["UserPhoto"] = await _graphProfileClient.GetUserProfileImage();
        }
    }
}

2. 让内容页（比如Logout页）继承这个基础模型：

namespace xx.WebApp.Pages
{
    public class LogoutModel : BasePageModel
    {
        public LogoutModel(GraphProfileClient graphProfileClient) : base(graphProfileClient)
        {
        }

        // 内容页的其他业务逻辑
    }
}

3. 在_Layout.cshtml中直接读取ViewData：

<img src="@ViewData["UserPhoto"]" alt="用户头像" />

方案2：用ViewComponent封装头像逻辑 #

如果需要复用头像渲染逻辑，优先用ViewComponent：

1. 创建ViewComponent类：

using Microsoft.AspNetCore.Mvc;

namespace xx.WebApp.ViewComponents
{
    public class UserAvatarViewComponent : ViewComponent
    {
        private readonly GraphProfileClient _graphProfileClient;

        public UserAvatarViewComponent(GraphProfileClient graphProfileClient)
        {
            _graphProfileClient = graphProfileClient;
        }

        public async Task<IViewComponentResult> InvokeAsync()
        {
            var photoUrl = await _graphProfileClient.GetUserProfileImage();
            return View("Default", photoUrl);
        }
    }
}

2. 创建ViewComponent的视图文件（路径：/Views/Shared/Components/UserAvatar/Default.cshtml）：

@model string
<img src="@Model" alt="用户头像" />

3. 在_Layout.cshtml中引用ViewComponent：

@await Component.InvokeAsync("UserAvatar")

方案3：直接移除布局页的PageModel关联 #

如果已经创建了_Layout.cshtml.cs，直接删除该文件，同时修改_Layout.cshtml，移除对_LayoutModel的模型引用，改用上面两种方案传递数据即可。

关键提醒 #

Razor Pages的布局页本质是模板，依赖当前请求的内容页模型，不能单独拥有自己的PageModel。布局页需要展示的数据，要么通过内容页传递，要么用ViewComponent、服务注入的方式获取。

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