MVC - 在我的視圖中顯示來自另一個模型的圖片

Question

我目前正在開展個人項目，迄今爲止一切工作都很好，但現在我無法顯示我的照片，並且目前沒有關於如何將它們放在一起的想法。

CarModel

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

PictureModel

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

} 

CarController

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

ResultView

@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

隨着其他awnsers的所有幫助我終於得到了我的解決方案，因爲我已經做了

在我CarSearchResultViewmodel我已經添加

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

圖片

列表之後，我編輯我的我的LINQ查詢與亞歷克斯Praven

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