無法顯示圖像從數據庫使用視圖模型

Question

我想上傳圖片和主頁在我的網站上的圖像，所以我上傳圖像到文件系統，並保存信息abvout圖像在數據庫中，我使用一對多關係在數據庫我也使用View Model。在數據庫中的所有數據更新沒有問題，我檢查了它，但我無法在視圖中顯示圖像，也許我必須在我的方法中編寫別的東西編輯？請解釋我。因此，這裏是我的代碼： 視圖模型

public class FurnitureVM 
{ 
    public FurnitureVM() 
    { 
     this.MainImage = new ImageVM(); 
     this.SecondaryImages = new List<ImageVM>(); 
    } 

    public int? ID { get; set; } 
    [Display(Name = "Name")] 
    [Required(ErrorMessage = "Enter name")] 
    public string Name { get; set; } 

    [DataType(DataType.MultilineText)] 
    [Display(Name = "...")] 
    [Required(ErrorMessage = "...")] 
    public string Description { get; set; } 
    [Display(Name = "Price()")] 
    [Required] 
    [Range(0.01, double.MaxValue, ErrorMessage = "...")] 
    public decimal Price { get; set; } 

    [Display(Name = "...")] 
    [Required(ErrorMessage = "...")] 
    public string Manufacturer { get; set; } 
    [Display(Name = "Size")] 
    [Required(ErrorMessage = "...")] 
    public string Size { get; set; } 

    [Display(Name = "....")] 
    [Required] 
    public int CategoryId { get; set; } 
    public virtual Category Category { get; set; } 

    public IEnumerable<SelectListItem> CategoryList { get; set; } 
    public HttpPostedFileBase MainFile { get; set; } 
    public IEnumerable<HttpPostedFileBase> SecondaryFiles { get; set; } 
    public ImageVM MainImage { get; set; } 
    public List<ImageVM> SecondaryImages { get; set; } 
} 
public class ImageVM 
{ 
    public int? ID { get; set; } 
    public string Path { get; set; } 
    public string DisplayName { get; set; }   
} 

我的方法控制器：

public ActionResult Edit(int? id) 
{ 
    if (id == null) 
    { 
     return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
    } 
    var furniture = db.Furnitures.Find(id); 
    if (furniture == null) 
    { 
     return HttpNotFound(); 
    } 

    FurnitureImages main = furniture.Images.Where(x => x.IsMainImage).FirstOrDefault(); 

     FurnitureVM model = new FurnitureVM(); 
     model.Name = furniture.Name; 
     model.Description = furniture.Description; 
     model.Price = furniture.Price; 
     model.Size = furniture.Size; 
     model.CategoryId = furniture.CategoryId; 
     model.Manufacturer = furniture.Manufacturer; 
     model.MainImage.Id = main.Id; 
     model.MainImage.DisplayName = main.DisplayName; 
     model.MainImage.Path = main.Path; 
     model.MainImage.IsMainImage = main.IsMainImage; 

    //ViewBag.CategoryId = new SelectList(db.Categories, "CategoryId", "Name", furniture.CategoryId); 
    return View(model); 
} 

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Edit(FurnitureVM model) 
{ 
    if (model.MainFile != null && model.MainFile.ContentLength > 0) 
    { 
     string displayName = model.MainFile.FileName; 
     string extension = Path.GetExtension(displayName); 
     string fileName = string.Format("{0}.{1}", Guid.NewGuid(), extension); 
     string path = Path.Combine(Server.MapPath("~/Upload/"), fileName); 
     model.MainFile.SaveAs(path); 
     model.MainImage = new ImageVM() { Path = path, DisplayName = displayName }; 
    } 

    foreach (HttpPostedFileBase file in model.SecondaryFiles) 
    { 
     FurnitureImages images = new FurnitureImages 
     { 
      //This is for secondary images for gallery 
     }; 
    } 

    if (!ModelState.IsValid) 
    { 
     model.CategoryList = new SelectList(db.Categories, "CategoryId", "Name",model.CategoryId); // repopulate the SelectList 
     return View(model); 
    } 

    Furniture furniture = db.Furnitures.Where(x => x.FurnitureId == model.ID).FirstOrDefault(); 
     FurnitureImages main = furniture.Images.Where(x => x.IsMainImage).FirstOrDefault(); 
     furniture.Name = model.Name; 
     furniture.Description = model.Description; 
     furniture.Manufacturer = model.Manufacturer; 
     furniture.Price = model.Price; 
     furniture.CategoryId = model.CategoryId; 
     furniture.Size = model.Size; 
     main.Id = model.ID; 
     main.DisplayName = model.MainImage.DisplayName; 
     main.Path = model.MainImage.Path; 
     main.IsMainImage = model.MainImage.IsMainImage; 


    if (model.MainImage != null && !model.MainImage.ID.HasValue) 
    { 
     FurnitureImages image = new FurnitureImages 
     { 
      Path = model.MainImage.Path, 
      DisplayName = model.MainImage.DisplayName, 
      IsMainImage = true 
     }; 
     furniture.Images.Add(image); 
    } 

    // ViewBag.CategoryId = new SelectList(db.Categories, "CategoryId", "Name", furniture.CategoryId); 
    db.Entry(furniture).State = EntityState.Modified; 
    db.SaveChanges(); 
    return RedirectToAction("Index"); 
} 

而且

@model FurnitureStore.ModelView.FurnitureVM 
... 
@if (Model.MainImage != null) 
{ 
    @Html.HiddenFor(m => m.MainImage.ID) 
    @Html.HiddenFor(m => m.MainImage.Path) 
    @Html.HiddenFor(m => m.MainImage.DisplayName) 
    <img src="@Model.MainImage.Path" alt="@Model.MainImage.DisplayName" /> 
} 

@Html.TextBoxFor(m => m.SecondaryFiles, new { type = "file", multiple = "multiple" }) 
@Html.ValidationMessageFor(m => m.SecondaryFiles) 

@for (int i = 0; i < Model.SecondaryImages.Count; i++) 
{ 
    @Html.HiddenFor(m => m.SecondaryImages[i].ID) 
    @Html.HiddenFor(m => m.SecondaryImages[i].Path) 
    @Html.HiddenFor(m => m.SecondaryImages[i].DisplayName) 
    <img src="@Model.SecondaryImages[i].Path" alt="@Model.MainImage.DisplayName" /> 
} 

Answer 1

你不應該存儲絕對路徑在我的部分觀點數據庫，而是存儲您需要更新以下代碼行的相對路徑：

string path = "~/Upload/"+ fileName; 
model.MainFile.SaveAs(Server.MapPath(path)); 

現在在你看來，你將能夠顯示這樣說：

<img src="@Url.Content(Model.MainImage.Path)" alt="@Model.MainImage.DisplayName" /> 

如果您不能修改路徑保存邏輯和希望存儲任何理由的絕對路徑，那麼你可以看看在下面的帖子：

https://stackoverflow.com/a/12804451/1875256

Answer 2

控制器側看起來不錯，您需要更改查看代碼

，然後對事物的剩餘部分出資應工作就像

<img src="@Url.Content(Model.MainImage.Path)" alt="@Model.MainImage.DisplayName" /> 

OR

<img src="@Url.Content(Model.SecondaryImages[i].Path)" alt="@Model.MainImage.DisplayName" />