ASP.NET Core视图调用ViewModel的IEnumerable属性报CS1061错误

• 视图模型属性类型定义和业务场景不匹配：当前ProfilePictureViewModel中的ApplicationUserVM、ProfilePictureVM均为IEnumerable<T>集合类型，这类类型代表一组实体的列表，本身不存在ProfilePicture、FirstName这类单个实体才有的属性，直接在集合对象上调用单个实体属性必然触发CS1061编译错误。
• 控制器传参和视图声明的模型类型不匹配：Profile动作方法最终直接将查询到的单个ApplicationUser实体传入视图，但视图顶部声明的模型类型是ProfilePictureViewModel，类型不匹配也会导致运行/编译异常。

1. 调整视图模型定义 #

你的页面是单个用户的个人主页，不需要传递集合类型数据，直接将两个属性改为单个实体类型即可：

using Website_friend_feature.Areas.Identity.Data;

namespace Website_friend_feature.Models
{
    public class ProfilePictureViewModel
    {
        public ProfilePicture ProfilePictureVM { get; set; }
        public ApplicationUser ApplicationUserVM { get; set; }
    }
}

如果你后续要做用户列表页、需要展示多条用户数据，才需要保留IEnumerable<T>类型，此时视图中必须通过循环遍历集合，才能访问单个元素的属性。

2. 修正控制器传参逻辑 #

首先在控制器构造函数中注入EF Core数据库上下文（用于查询ProfilePicture表数据），然后在Profile动作中组装视图模型，将匹配的数据传入视图：

using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Website_friend_feature.Areas.Identity.Data;
using Website_friend_feature.Models;
// 替换成你自己项目的DbContext实际命名空间
using Website_friend_feature.Data;

namespace Website_friend_feature.Controllers
{
    public class UserController : Controller
    {
        private readonly UserManager<ApplicationUser> _userManager;
        private readonly AppDbContext _dbContext;

        public UserController (UserManager<ApplicationUser> userManager, AppDbContext dbContext)
        {
            _userManager = userManager;
            _dbContext = dbContext;
        }

        public IActionResult Index()
        {
            return View();
        }

        public async Task<IActionResult> Profile(String id) 
        {
            if (id == null)
            {
                return BadRequest();
            }
            var user = await _userManager.FindByNameAsync(id);
            if (user == null)
            {
                return NotFound();
            }
            // 根据当前用户Id查询关联的头像数据
            var userAvatar = await _dbContext.Set<ProfilePicture>()
                .FirstOrDefaultAsync(p => p.Id == user.Id);
            
            // 组装视图模型
            var viewModel = new ProfilePictureViewModel
            {
                ApplicationUserVM = user,
                ProfilePictureVM = userAvatar
            };

            // 传入组装完成的视图模型，不要直接传user实体
            return View(viewModel);
        }
    }
}

3. 修正视图中的属性调用 #

视图中直接访问视图模型的单个实体属性即可，原有代码中符号保持正确规则：

@using Website_friend_feature.Models;
@model ProfilePictureViewModel
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <!-- 原有头部代码保持不变 -->
</head>
<body>
  <!-- The Grid -->
  <div class="w3-row">
    <!-- Left Column -->
    <div class="w3-col m3">
      <!-- Profile -->
      <div class="w3-card w3-round w3-white">
        <div class="w3-container">
         <p class="w3-center">
            <!-- 可按需加默认头像兜底，比如头像为空时显示/default-avatar.png -->
            <img src="@Model.ApplicationUserVM.ProfilePicture" class="w3-circle" style="height:106px;width:106px" alt="Avatar">
         </p>
         <h4 class="w3-center" style="margin-bottom: 0px;">@Model.ApplicationUserVM.FirstName @Model.ApplicationUserVM.LastName</h4>
         <!-- Razor中两个@会转义输出一个@符号，第三个@为语法入口，这行原有写法正确 -->
         <h2 style="color: lightgray; text-align: center; font-size: 9px; margin-top: 0px; ">@@@Model.ApplicationUserVM.UserName</h2>
        </div>
      </div>
    </div>
    <!-- 其余页面代码保持不变 -->
  </div>
</body>
</html>

补充：集合传参场景的正确写法 #

如果后续做列表页需要保留IEnumerable<T>类型的属性，必须在视图中通过循环遍历集合才能访问单个元素的属性，示例代码：

@foreach (var singleUser in Model.ApplicationUserVM)
{
    <div class="user-card">
        <img src="@singleUser.ProfilePicture" alt="用户头像">
        <p>@singleUser.FirstName @singleUser.LastName</p>
    </div>
}

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