Tuesday, January 22, 2013

Display images using entity framework along with MVC4


Create a table in SQL server as follows

USE [forumDB1]
GO

/****** Object:  Table [dbo].[users]    Script Date: 01/23/2013 11:25:49 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[users](
            [userID] [int] NOT NULL,
            [EmailID] [varchar](50) NOT NULL,
            [Password] [varchar](50) NOT NULL,
            [FirstName] [varchar](50) NOT NULL,
            [LastName] [varchar](50) NULL,
            [JoinedDate] [datetime] NOT NULL,
            [usrImage] [image] NULL,
PRIMARY KEY CLUSTERED 
(
            [userID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY],
UNIQUE NONCLUSTERED 
(
            [EmailID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO










After all select your HomeController and change as follows

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication2.Models;

namespace MvcApplication2.Controllers
{
    public class HomeController : Controller
    {
        forumDB1Entities dbentity = new forumDB1Entities();
        public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View(dbentity);
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}


Also change your view as follows

 @model displaydatausingEF.Models.forumDB1Entities
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <p>
       
    </p>
    <table>
        <tr>
            <th>
                Employee ID
            </th>
            <th>
                Email ID
            </th>
            <th>
                Password
            </th>
            <th>
                &nbsp;First Name
            </th>
            <th>
                &nbsp;Last Name
            </th>
            <th>
                Joined Date
            </th>
            <th>
                Picture
            </th>
        </tr>
        @foreach (var item in Model.users)
        {
            <tr>
                <td>
                    &nbsp;&nbsp;@item.userID
                </td>
                <td>
                    &nbsp;&nbsp;&nbsp;@item.EmailID
                </td>
                <td>
                    &nbsp;&nbsp;&nbsp;@item.Password
                </td>
                <td>
                    &nbsp;&nbsp;&nbsp;@item.FirstName
                </td>
                <td>
                    &nbsp;&nbsp;&nbsp;&nbsp;@item.LastName
                </td>
                <td>
                    &nbsp;&nbsp;&nbsp;@item.JoinedDate
                </td>
                <td>
                    <img src="@Url.Action(" temp_src="@Url.Action("GetPhoto", new { photoId = item.userID })" />
                </td>
            </tr>
        }
    </table>
</body>
</html>


This will initially give output as follows



Now we will implement the code to show image, add this code to your HomeController

 public ActionResult GetPhoto(int usrID)
        {
            byte[] photo = null;
            var v = dbentity.users.Where(p => p.userID == usrID).Select(img => img.usrImage).FirstOrDefault();
            photo = v;
            return File(photo, "image/jpeg");
        }

Now re-run the application


Happy coding cheers

6 comments:

  1. Hi,

    i am getting error at this line

    img src="@Url.Action(" temp_src="@Url.Action("GetPhoto", new { photoId = item.userID })"

    can u please check that and also what is temp_src in the above line

    ReplyDelete
  2. Hi hareesh, thanks for your comment have you downloaded my code and tested or you getting error in my code?

    ReplyDelete
  3. I am getting the following ERROR:Value cannot be null.\r\nParameter name: fileContents,

    Wat value i ca store in UsrImage(column) value (EX:my image name is1.jpeg))
    How can i store this value in database???

    I am new to mvc
    Plz give me the Update,insert and delete operations also using MVC(I want to Insert,update,delete using Images)

    ReplyDelete
    Replies
    1. this is just to show an image which is stored from your database

      Delete
  4. In the image clolumn how can i store image,I am storing Image like below
    But not getting image
    http://notous.blob.core.windows.net/images/FB-button-341x341.png

    ReplyDelete
  5. where is the edit operation for image

    ReplyDelete

Popular Posts