How to Display Image from Database Using View Models in ASP.Net MVC 5

angelfal...

SOLVED CLOSED ACTIVE ANSWERED
User: angelfallz
Posted: on Feb 13, 2017 10:53 AM
Forum: ASP.Net MVC
Answer: 1
Views: 24568

Hello, please am trying to display images i saved in the database as byte array to the index view of the home page. Am working with the built-in template of visual studio 2013 mvc 5. Am using code first.

//this is 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; }

    }
}

//this is my home 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();
        }
    }
}

/this is the view i want to display the image to

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

Download FREE API for Word, Excel and PDF in ASP.Net

AnandM

0 3

Reply
ANSWER
User: AnandM
Replied: on Feb 15, 2017 12:35 AM
Modified: on Feb 15, 2017 04:34 AM
Report

angelfallz says:

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

the way you are trying to display the image is wrong you need to use the img tag for displaying the image and you need to get the imageId from where it is getting binded that means you need to add one more property in your ImageViewModel that of name Id or your database column name after changing the model your model might look like below

ImageViewModel.cs

public class ImageViewModel
{
    public string PetPhotoName { get; set; }

    public byte[] Content { get; set; }

    public int Id { get; set; } //Your Image PhotoId.
}

and your Index Action will look like below

[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, cust.Id }).ToList();

    foreach (var item in ImageList)
    {
        ImageViewModel objcvm = new ImageViewModel();
        objcvm.PetPhotoName = item.PetPhotoName;
        objcvm.Content = item.Content;
        objcvm.Id = item.Id; // Your DataBase ColumnName which containing the Id for the respective Image.
        ImageViews.Add(objcvm);
    }
    return View(ImageViews);
}

and then you need to create a action method from where you can bind the image with its Id like below

public ActionResult RenderPhoto(int photoId)
{
    byte[] photo = (new ApplicationDbContext()).PetPhotoSS.Find(photoId).Content;
    return File(photo, "image/jpeg");
}

and your view with table format will look like below

<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>
            <img src="@Url.Action("RenderPhoto", "Home", new { photoId = item.Id })" width="100px" height="100px" alt="Pet Image" />
        </td>
    </tr>
}
</table>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

How to Display Image from Database Using View Models in ASP.Net MVC 5

Company

Explore

Follow us

Contact Us