CODEDIGEST
Home » CodeDigest
Search
 

Technologies
 

Using new GeneratedImage control to display images from DataBase in GridView control in ASP.Net
Submitted By Satheesh Babu B
On 12/23/2008 8:49:43 AM
Tags: asp.net,CodeDigest,gridview  

Recently, Microsoft released a new image control called GeneratedImage control. Read my article on New Image Generator control in ASP.Net 3.5 which gives a basic understanding on this control. There are some users who requested to post the code to use this new control to bind images in GridView. This little code snippet will help us doing it with GridView control.

 

   

    <asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" >

            <Columns>

                <asp:BoundField HeaderText = "Image Name" DataField="imagename" />

                <asp:TemplateField HeaderText="Image">

                 <ItemTemplate>

                    <cc1:GeneratedImage ID="GeneratedImage2" runat="server"

            ImageHandlerUrl="~/ImageFromDB.ashx" >

            <Parameters>

                <cc1:ImageParameter Name="ImID" Value='<%# Eval("ImageID")%>' />

            </Parameters>

        </cc1:GeneratedImage>

                 </ItemTemplate>

            </asp:TemplateField>             

            </Columns>

</asp:GridView>

 

protected void Page_Load(object sender, EventArgs e)

    {

        DataTable dt = new DataTable();

        SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);

        SqlCommand command = new SqlCommand("SELECT imagename,ImageID,Image from [Image]", connection);

        SqlDataAdapter ada = new SqlDataAdapter(command);

        ada.Fill(dt);

        gvImages.DataSource = dt;

        gvImages.DataBind();

    }

 

Finally ImageFromDB.ashx is,

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

 

using System;

using System.Web;

using System.Collections.Specialized;

using System.Configuration;

using System.Data.SqlClient;

using System.Drawing;

using System.IO;

using Microsoft.Web;

public class ImageFromDB : ImageHandler {

   

    public ImageFromDB() {

        // Set caching settings and add image transformations here

        this.EnableServerCache = true;

        this.EnableClientCache = true;     

       }   

    public override ImageInfo GenerateImage(NameValueCollection parameters) {

        // Add image generation logic here and return an instance of ImageInfo

       string imageid = parameters["ImID"].ToString();

        //string imageid = "1";

        SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);

        connection.Open();

        SqlCommand command = new SqlCommand("select Image from Image where ImageID=" + imageid, connection);

        SqlDataReader dr = command.ExecuteReader();

        dr.Read();    

 

        this.ImageTransforms.Add(new WaterMark());

        return new ImageInfo((Byte[])dr[0]);

    }

}

 

Custom Transformation Class
public class WaterMark : ImageTransform
{
       public WaterMark()
       {
              //
              // TODO: Add constructor logic here
              //
       }

    public override System.Drawing.Image ProcessImage(System.Drawing.Image img)
    {
        Graphics gra = Graphics.FromImage(img);
         gra.DrawString("
www.microsoft.com", new Font("Verdana", 18), new SolidBrush(Color.Green), img.Width / 2, img.Height / 2);
        return img;
    }
}

The above class will add a text www.microsoft.com in middle of the image. The handler will generate the image from database with the transformations applied.

 

Read my article on New Image Generator control in ASP.Net 3.5 to make the above code to work.

Do you have a working code that can be used by anyone? Submit it here. It may help someone in the community!!

Recent Codes
  • View All Codes..