How to Display Image from Database Using View Models MVC 5

Question

Am working with the built-in template of visual studio 2013 mvc 5. am trying to display images i saved in the database to the index view of the home page. (code first approach)

 

//my model 

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Web;

namespace HaveYouSeenMeApp.Models

{

public class PetPhotos

{

public int PetPhotosId { get; set; }

[StringLength(255)]

public string PetPhotoName { get; set; }

[StringLength(100)]

public string ContentType { get; set; }

public byte[] Content { get; set; }

public PetPhotosType PetPhotosType { get; set; }

public int PetID { get; set; }

public virtual Pet Pet { get; set; }

public virtual ApplicationUser User { get; set; }

}

}

 

//my viewmodel

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace HaveYouSeenMeApp.Models.ViewModels

{

public class ImageViewModel

{

public string PetPhotoName { get; set; }

public byte[] Content { get; set; }

}

}

 

// my controller

using HaveYouSeenMeApp.Models;

using HaveYouSeenMeApp.Models.ViewModels;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace HaveYouSeenMeApp.Controllers

{

public class HomeController : Controller

{

[AcceptVerbs(HttpVerbs.Get)]

public ActionResult Index()

{

ApplicationDbContext db = new ApplicationDbContext();

List<ImageViewModel> ImageViews = new List<ImageViewModel>();

var ImageList = (from cust in db.PetPhotoSS select new { cust.PetPhotoName, cust.Content }).ToList();

foreach(var item in ImageList)

{

ImageViewModel objcvm = new ImageViewModel();

objcvm.PetPhotoName = item.PetPhotoName;

objcvm.Content = item.Content;

ImageViews.Add(objcvm);

}

return View(ImageViews);

}

public ActionResult About()

{

ViewBag.Message = "Your application description page.";

return View();

}

public ActionResult Contact()

{

ViewBag.Message = "Your contact page.";

return View();

}

}

}

 

//my view the yellow highlighted sections is where i want to display my images

@model IEnumerable<HaveYouSeenMeApp.Models.ViewModels.ImageViewModel>

@{

ViewBag.Title = "Home Page";

}

<div class="jumbotron">

<h1>ASP.NET</h1>

<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>

<p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>

</div>

<div class="row">

<div class="col-md-4">

<h2>Getting started</h2>

<p>

<table>

<tr>

<th> @Html.DisplayNameFor(model => model.PetPhotoName)</th>

<th>

@Html.DisplayNameFor(model => model.Content)</th>

</tr>

@foreach (var item in Model)

{

<tr>

<td>

@Html.DisplayFor(modelItem => item.PetPhotoName)

</td>

<td>

@Html.DisplayFor(modelItem => item.Content)

</td>

</tr>

}

</table>

</p>

<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>

</div>

<div class="col-md-4">

<h2>Get more libraries</h2>

<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>

<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>

</div>

<div class="col-md-4">

<h2>Web Hosting</h2>

<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>

<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>

</div>

</div>