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

Question

大家好，我试图创建一个应用程序使用asp.net mvc与代码第一个数据库，允许用户能够创建一个博客文章与as许多图像，他们的愿望。我有数据存储在数据库中，但我目前正试图让头部，身体和图像显示在显示视图这是我想它看起来像：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; } 

} 

的DbContext

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> 

} 

这里是替代控制器我试过，但我不使用，因为我得到这个错误，当我试图让Images = i.Path，是真的不知道，如果这本来是它是怎么做

不能蕴转换typeCrud“字符串”到 '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> 

您需要进行更改src属性根据您在图像的Path属性存储什么样的价值。

您可以纠正你的其他操作方法类似这样的

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列表，请确保您的显示图像被强类型到。

@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; } 
}