ImageUpload and select Demo from database through linq

Insert Retrieve images from Database in asp.net LINQ TO SQL

Till now I have explained you regarding  Select, Insert, Update, Delete-CRUD operation using Linq to Sql classes in asp net , Inserting bulk records using JavaScript, asp.netOpen-Close or Show-Hide Ajax Modalpopupextender using JavaScript in asp.netHow to call javascript function after specific time period.

Today I am going to explain you regarding Insert Retrieve images from Database in asp.net LINQ TO SQL.

Step-1 Create one table Tbl_Image like below:

table

 

Step-2 Design one Aspx page ‘UploadImage.aspx’ like below:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadImage.aspx.cs" Inherits="Learning.UploadImage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Image Name:
                    </td>
                    <td>
                        <asp:TextBox ID="txtImageName" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>Upload Image:</td>
                    <td>
                        <asp:FileUpload ID="ImageUpload" runat="server" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:Button ID="btnSave" Text="Save" runat="server" OnClick="btnSave_Click"/></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                        <asp:GridView ID="GrdDispalyImage" runat="server" AutoGenerateColumns="false">
                            <Columns>
                                <asp:BoundField DataField="ImageName" HeaderText="Image Name" />
                                <asp:TemplateField HeaderText="Image">
                                   <ItemTemplate>
                                      <asp:Image ID="imgdisplay"  runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImgId") %>' Height="150px" Width="150px"/>
                                   </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

 

 Step 3: After that add ‘using System.Data.Linq’ namespace and Write below code in code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Linq;

namespace Learning
{
    public partial class UploadImage : System.Web.UI.Page
    {
        //Create object of Dbml file.
        DataClasses1DataContext DBcontext = new DataClasses1DataContext();

        protected void Page_Load(object sender, EventArgs e)
        {
            DispalyImage();
        }

        protected void btnSave_Click(object sender, EventArgs e)
        {
            if (ImageUpload.HasFile && ImageUpload.PostedFile.ContentLength > 0)
            {
                //Create object of table 'Tbl_Image';
                Tbl_Image img = new Tbl_Image();
                string imagename = txtImageName.Text;
                img.ImageName = txtImageName.Text;
                //create a byte array to store the binary image data;
                Byte[] imgbyte = ImageUpload.FileBytes;
                Binary Binarydta = new Binary(imgbyte);
                img.Image = Binarydta;//This is converted image data.
                DBcontext.Tbl_Images.InsertOnSubmit(img);
                DBcontext.SubmitChanges();
                ScriptManager.RegisterStartupScript(this, this.GetType(), "alertmessage", "javascript:alert('" + imagename + " image inserted successfully')", true);
                txtImageName.Text = "";
                DispalyImage();
            }
        }
        //This method is useful just fetch name and Id..
        public void DispalyImage()
        {
            var vv = from v in DBcontext.Tbl_Images
                     select new
                     {
                         v.ImageName,
                         v.ImgId,
                     };
            GrdDispalyImage.DataSource = vv;
            GrdDispalyImage.DataBind();
        }
    }
}

Step 4:

After that Right Click at Project and Add GenericHandler.ashx provide name ImageHandler.ashx  Generic handler is one type of class that allow us to Process request and return a response to browser.

After that open ImageHandler.ashx.cs and write below code and also add using System.IO namespace.

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

namespace Learning
{
  
    public class ImageHandler : IHttpHandler
    {
        DataClasses1DataContext DBcontext = new DataClasses1DataContext();

        public void ProcessRequest(HttpContext context)
        {
            string imageid = context.Request.QueryString["ImID"];
            Stream strm = Display(imageid);
            byte[] buffer = new byte[4096];
            int byteseq = strm.Read(buffer, 0, 4096);
            while (byteseq > 0)
            {
                context.Response.OutputStream.Write(buffer, 0, byteseq);
                byteseq = strm.Read(buffer, 0, 4096);
            }
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        //This method is for Fetch image file...
        public Stream Display(string ImId)
        {
            var ss = (from s in DBcontext.Tbl_Images where s.ImgId == Convert.ToInt32(ImId) select s).First();
            return new MemoryStream(ss.Image.ToArray());
        }

    }
}

Step-5 Live Demo:

ImageUpload and select Demo from database through linq

Download sample of Insert Retrieve images from Database in asp.net LINQ TO SQL

Leave a Reply