在一个视图上显示多个模型的数据(图像和文本)

时间:2017-01-31 13:10:35

标签: c# asp.net asp.net-mvc entity-framework asp.net-mvc-4

大家好,所以我正在尝试使用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; }

}

的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'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);
        }

1 个答案:

答案 0 :(得分:0)

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