MVC-在我的视图中显示其他模型的图片

Question

我目前正在做一个个人项目，到目前为止一切工作都还不错，但是现在我无法显示我的照片，而且目前还没有关于如何将它们组合在一起的想法。

汽车模型

public class Car
{
    public int Id { get; set; }

    public string Brand{ get; set; }

    public string Type { get; set; }

    [Range(1900,2017)]
    public int Buildyear { get; set; }

    public float Price { get; set; }

图片模型

    public class Picture
{
    public int Id { get; set; }

    public int CarId{ get; set; }

    public string UploadedFile { get; set; }

    public DateTime UploadDate { get; set; }
}

CarSearchResultViewModel

public class CarSearchResultViewModel
{
    [Display(Name = "Brand ")]
    public string Brand { get; set; }

    [Display(Name = "Type ")]
    public string Type { get; set; }

    public int Buildyear { get; set; }

    public float Price { get; set; }

    public Brandstof Fuel { get; set; }

    public string Extra_Information { get; set; }

    public Transmission Transmission { get; set; }


    //Either of these 2 are not necessary
    public List<Picture> Pictures { get; set; }

    public string UploadedFile { get; set; }

}

汽车控制器

List<CarSearchResultViewModel> result = new List<CarSearchResultViewModel>();
        if (ModelState.IsValid)
        {
            result = (from pd in db.Cars
                      join od in db.Pictures on pd.Id equals od.CarId into odPictures                          
                      where pd.Brand == autoZVM.Brand 
                      && pd.Fuel == autoZVM.Fuel
                      && pd.Type == autoZVM.Type
                      && pd.Buildyear > autoZVM.MinBuildyear && pd.Buildyear < autoZVM.MaxBuildyear 
                      && pd.Price > autoZVM.MinPrice && pd.Price < autoZVM.MaxPrice 
                      select new CarSearchResultViewModel
                      {
                          Brand= pd.Brand,
                          Type = pd.Type,
                          Fuel = pd.Fuel ,
                          Buildyear = pd.Buildyear,
                          Pictures = odPictures.ToList(),                           
                          Price= pd.Price,
                          Extra_Information = pd.Extra_Information

                      }).ToList();
        }
        return View("Result", result);

结果视图

@model IEnumerable<The_Scrubberij.Models.AutoZoekResultaatViewModel>

@{
    ViewBag.Title = "Result";
}

<h2>Result</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>


<table class="table">
    <tbody>
        @foreach (var item in Model)
        {
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title">
                        @Html.DisplayFor(modelitem => item.Brand) - @Html.DisplayFor(modelItem => item.Type)

                    </h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-8">

                            @Html.DisplayFor(modelItem => item.Price) - @Html.DisplayFor(modelItem => item.Buildyear)
                        </div>
                        <div class="col-md-4">
                            @Html.DisplayFor(modelItem => item.Extra_Information)   -  <img src="@Url.Content(Model.UploadedFile)"></img>


                            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })
                        </div>
                    </div>
                </div>
            </div>
        }
    </tbody>

    </table>

IEnumerable'不包含'UploadedFile'的定义，也找不到扩展方法'UploadedFile'接受类型为'IEnumerable'的第一个参数

这是带有简单SQL查询的表关系

我不知道如何将这两件事链接在一起提示将不胜感激

谢谢，乐华

Answer 1

您可以简单地使用<img>元素，并将源设置为文件的路径，假设存储的路径可以从客户端完全按原样访问。 或使用Url.Content代替属性中的原始值。

<img src="@Url.Content(Model.UploadedFile)"></img>

编辑：哦，等等，我错过了一个事实，那就是您在汽车和图片之间没有任何关系。 鉴于一辆汽车可以有多张图片，因此您需要在CarSearchResultViewModel上有一个图片列表，并且需要用联接返回的图片列表填充它。 大概是这样的：

        result = (from pd in db.Cars
                  join od in db.Pictures on pd.Id equals od.CarId
                  where ...
                  select new CarSearchResultViewModel
                  {
                      Brand= pd.Brand,
                      ...,
                      Pictures = od.ToList()
                  }).ToList();

我没有测试这个，因为我不想建立一个完整的项目，而是一个类似的项目。

Answer 2

您可以解决的问题很简单，您已经使用<img> src属性

您具有编辑控制器

result = (from pd in db.Cars
                  join od in db.Pictures on pd.Id equals od.CarId
                  where pd.Brand == autoZVM.Brand 
                  && pd.Fuel == autoZVM.Fuel
                  && pd.Type == autoZVM.Type
                  && pd.Buildyear > autoZVM.MinBuildyear && pd.Buildyear < autoZVM.MaxBuildyear 
                  && pd.Price > autoZVM.MinPrice && pd.Price < autoZVM.MaxPrice 
                  select new CarSearchResultViewModel
                  {
                      Brand= pd.Brand,
                      Type = pd.Type,
                      Fuel = pd.Fuel ,
                      Buildyear = pd.Buildyear ,                           
                      Price= pd.Price,
                      Extra_Information = pd.Extra_Information,
                      Pictures=Od.UploadedFile
                  }).ToList();

Answer 3

在其他遮阳篷的所有帮助下，我终于对我所做的事情有了解决方案

在我的CarSearchResultViewmodel中，我添加了图片列表

    public class AutoZoekResultaatViewModel
{
    [Display(Name = "Brand ")]
    public string Brand { get; set; }
    ...
    public List<Picture> Pictures{ get; set; }
}

之后，我在Alex Praven的帮助下编辑了我的LINQ查询

from pd in db.Cars
join od in db.Pictures on pd.Id equals od.CarId into odPictures
where pd.Brand == autoZVM.Brand
...

select new CarSearchResultviewModel
{
  Brand = pd.Brand,
  Pictures = odPictures.ToList(),
}).ToList();

并在我的Result.cshtml中

 @foreach (var Picture in item.Pictures)
 {
  <img src="/pictures/@Url.Content(foto.UploadedFile)"></img>
 }