在一个视图上显示来自多个模型的数据（图像和文本）

Question

大家好，所以我正在尝试使用带有代码优先数据库的 asp.net mvc 创建一个应用程序，该数据库允许用户创建包含任意数量图像的博客文章。我将数据存储在数据库，但我目前正在尝试在显示视图中显示头部、身体和图像，这就是我希望它看起来的样子：http://imgur.com/a/IR19r 但我不确定如何实现这一点。我可以显示头部和身体但无法从图像表中获取图像这里是数据库图：http://imgur.com/a/lvwti

目前这是我将其添加到视图 @Html.DisplayFor(modelItem => item.Images) 时遇到的错误

EntityFramework.SqlServer.dll 中出现“System.Data.Entity.Core.EntityCommandExecutionException”类型的异常，但未在用户代码中处理

附加信息：执行命令定义时出错。有关详细信息，请参阅内部异常。

型号

public partial class PostModel
{
    public PostModel()
    {
        Images = new List<ImageModel>();
    }
    [Key]
    [HiddenInput(DisplayValue = false)]
    public int ID { get; set; }
    [Required(ErrorMessage = "Heading is Required")]
    [Display(Name = "Heading")]
    public string Heading { get; set; }
    [Required(ErrorMessage = "Body is Required")]
    [DataType(DataType.MultilineText)]
    [Display(Name = "Body")]
    public string Body { get; set; }
    public virtual ICollection<ImageModel> Images { get; set; }
    public IEnumerable<HttpPostedFileBase> File { get; set; }
}

public class ImageModel
{
    [Key]
    public int ID { get; set; }
    public string Path { get; set; }
    public virtual PostModel Post { get; set; }
    public string DisplayName { get; set; }
}
public class ImageVM
{
    public int? ID { get; set; }
    public string Path { get; set; }
    public string DisplayName { get; set; }
    public bool IsDeleted { get; set; }
}
public partial class PostVM
{
    public PostVM()
    {
       Images = new List<ImageVM>();
    }

    public int? ID { get; set; }
    public string Heading { get; set; }
    public string Body { get; set; }
    public IEnumerable<HttpPostedFileBase> Files { get; set; }
    public List<ImageVM> Images { get; set; }

}

数据库上下文

public class EFDbContext : DbContext
{    
    public DbSet<PostModel> Posts { get; set; }
    public DbSet<PostVM> PostVMs { get; set; }
    public DbSet<ImageModel> Images { get; set; }
    public DbSet<ImageVM> ImageVMs { get; set; }
}

控制器

 public ViewResult Display()
 {
        return View(repository.Posts) 
  }

查看

@model IEnumerable<Crud.Models.PostModel>
@{
    ViewBag.Title = "Index";
}


    @foreach (var item in Model)
    {
     <div>
        @Html.DisplayFor(modelItem => item.Heading)
    </div>
    <div>
        @Html.DisplayFor(modelItem => item.Body)
    </div>
    <div>
        @Html.DisplayFor(modelItem => item.Images)
        @*<img class="img-thumbnail" width="150" height="150" src="/Img/@item.Images" />*@
    </div>

}

这是我尝试过但没有使用的替代控制器，因为当我尝试 let Images = i.Path 时出现此错误并且不确定这是否意味着它是如何完成的

无法将 typeCrud 'string' 隐式转换为 'System.Collections.Generic.List Crud.Models.ImageVm'

  public ViewResult Display()
        {

            IEnumerable<PostVM> model = null;
            model = (from p in db.Posts
                     join i in db.Images on p.ID equals i.Post
                     select new PostVM
                     {
                         ID = p.ID,
                         Heading = p.Heading,
                         Body = p.Body,
                         Images = i.Path
                     });
            return View(model);
        }

Answer 1

item.Images 是一个集合。所以遍历它并显示图像。

<div>
    @foreach(var image in item.Images)
    {
       <img src="@image.Path" />
    }       
</div>

您需要根据您在图像的Path 属性中存储的值来更改src 属性。

您可以像这样更正您的其他操作方法

public ViewResult Display()
{
    var posts = db.Posts.Select(d => new PostVM()
    {
        ID = d.ID ,
        Heading  = d.Heading,
        Body = d.Body,
        Images = d.Images.Select(i => new ImageVM() { Path = i.Path, 
                                                      DisplayName = i.DisplayName }
                                ).ToList()
    }).ToList();
    return View(posts);
}

现在，由于您要返回 PostVM 的列表，请确保您的 Display 视图是强类型的。

@model List<PostVM>
<h1>Posts</h1>
@foreach(var p in Model)
{
  <h3>@p.Heading</h3>
  <p>@p.Body</p>
  @foreach(var image in item.Images)
  {
    <img src="@image.Path" />
  }
}

此外，将视图模型类保留在您的数据库上下文中是没有意义的。只保留您的实体模型。视图模型仅供 UI 层使用。

public class EFDbContext : DbContext
{    
    public DbSet<PostModel> Posts { get; set; }   
    public DbSet<ImageModel> Images { get; set; }
}