Home > ASP.Net, Linq > Display Image from Database as Image Type using Linq

Display Image from Database as Image Type using Linq


Hi

try this example to Display Image from Database as Image Type using Linq

Step1 :- Open MS VS2008 and create a new website

Step2 :- In solution Explorer right cleck and select add new item and add LINQ to SQL classes and name it to “Northwind.dbml”

Step3 :- Open Northwind.dbml and Add Categories Table in Northwind Database and the Save

Step4:- Right click on solution Explorer and add new Generic Handler and name it “ImageHandler.ashx”


<%@ WebHandler Language="C#" %>

using System;
using System.Web;
using System.IO;
using System.Drawing.Imaging;
using System.Collections.Generic;
using System.Linq;

public class ImageHandler : IHttpHandler {
   
    public void ProcessRequest (HttpContext context)
    {
        HttpRequest req = context.Request;          
        // string categoryID = "1";          
        string categoryID = req.QueryString["CategoryID"].ToString();          
        // Get information about the specified category          
        NorthwindDataContext db = new NorthwindDataContext();          
        var category = from c in db.Categories                         
                       where Convert.ToInt32(c.CategoryID) == Convert.ToInt32(categoryID)
                       select c.Picture;          
        int len = category.First().Length;          
        // Output the binary data          
        // But first we need to strip out the OLE header          
        int OleHeaderLength = 78;          
        int strippedImageLength = len - OleHeaderLength;          
        byte[] imagdata = new byte[strippedImageLength];          
        Array.Copy(category.First().ToArray(), OleHeaderLength, imagdata, 0, strippedImageLength);          
        if ((imagdata) != null)          
        {              
            MemoryStream m = new MemoryStream(imagdata);              
            System.Drawing.Image image = System.Drawing.Image.FromStream(m);              
            image.Save(context.Response.OutputStream, ImageFormat.Jpeg);          
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

Step5 :- In Default.aspx page add new Gridview control and bind it using SQLDatasource control

<div>
   
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True"
            AutoGenerateColumns="False" DataKeyNames="CategoryID"
            DataSourceID="SqlDataSource1" CellPadding="4" ForeColor="#333333"
            GridLines="None">
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
                    InsertVisible="False" ReadOnly="True" SortExpression="CategoryID" />
                <asp:BoundField DataField="CategoryName" HeaderText="CategoryName"
                    SortExpression="CategoryName" />
                <asp:BoundField DataField="Description" HeaderText="Description"
                    SortExpression="Description" />
                <asp:TemplateField HeaderText="Picture" SortExpression="Picture">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Picture") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server" ImageUrl='<%#"ImageHandler.ashx?CategoryID="+ Eval("CategoryID")  %>'/>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT * FROM [Categories]"></asp:SqlDataSource>
   
    </div>

after that run your website

Hope this helps

Good Luck.

Advertisements
Categories: ASP.Net, Linq
  1. August 21, 2011 at 5:59 am

    Tanks a lot.
    It could be better if it had some pictures.

  2. yasserzaid
    August 24, 2011 at 6:04 pm

    @homa000oma :- you are welcome hope my post helps you

  1. July 5, 2014 at 8:06 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: