.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Dynamically display binary image in Gridview

Posted By:Shweta Kulkarni       Posted Date: September 16, 2009    Points: 25    Category: ASP.NET    URL: http://www.dotnetspark.com  
 

Dynamically display binary image in Gridview.

Background: Many a times we come with the requirement of displaying image column in gridview at runtime for that particular  purpose we have to use template column.For displaying image in GridView and inserting image data in database follow the  following instruction.

  In Database create table with Image Column.In Asp.net create two pages one which will display image(Default.aspx) and one which will generate image(img1.aspx). In Asp.net with VB create ImageTemplate Class ( I have class written in c# you can modify it in vb)

public class ImageTemplate : ITemplate   {

        ListItemType lstItemType;

        string colNm = "";

        int row=0;

        DataSet ds = new DataSet();

       public ImageTemplate(ListItemType type, string colName)

       {

               lstItemType = type;

   colNm = colName;

        }

void ITemplate.InstantiateIn(System.Web.UI.Control container)

        {

            switch (lstItemType)

            {

                case ListItemType.Item:

                    Image img = new Image();

                    img.DataBinding += new EventHandler(img_DataBinding);

                    container.Controls.Add(img);

                    break;

            }

        }

        void img_DataBinding(object sender, EventArgs e)

        {

            Image img = (Image)sender;

           

            GridViewRow container= (GridViewRow)img.NamingContainer;

            Random d = new Random(300);

--Created Page called img1.aspx

            img.ImageUrl = "img1.aspx?Id=" + container.RowIndex + "&ran=" + d.Next();

        }

    }

4.   Set AutogeneratedColumn property of GridView to false.

5.   Create Function that will set create instance of ImageTemplate class add that column in GridView. 

public void createColumn()

 {

          DataTable dt = new DataTable();

Dt=GetData();--function will connect to database  and get data(Image column) from database table

--Add column name imageURL to this datatable which will contain image url for each record in datatable.for adding records in imgUrl Column Write following code.

if (dt.Columns.Contains("ImageUrl"))

          {

            for (int i = 0; i < dt.Rows.Count; i++)

            {  dt.Rows[i]["ImageUrl"] = "img1.aspx?id="+i;   }

         }

        else

        {

            dt.Columns.Add("ImageUrl", System.Type.GetType("System.String"));

            for (int i = 0; i < dt.Rows.Count; i++)

            {

                dt.Rows[i]["ImageUrl"] = "img1.aspx?id=" + i;

            }

}

  for (int i = 0; i < dt.Columns.Count; i++)

  {

  --Column which is of type Image

  if (dt.Columns[i].DataType.FullName.Equals("System.Byte[]")) {

ImageTemplate obj = new ImageTemplate(ListItemType.Item,       dt.Columns[i].ToString());

TemplateField t = new TemplateField();

t.SortExpression = dt.Columns["ImageUrl"].ToString();--created column in datatable as specified above.       

t.HeaderText = dt.Columns[i].ToString();

t.ItemTemplate = obj;

GridView1.Columns.Add(t);

 } 

 Session["ImageData"]=dt;//which can be used in img1.aspx.

 GridView1.DataSource = dt;

 GridView1.DataBind();

 }

6.    Call this function on Page_Load.It will display image.

7.    In Img1.aspx write following code: on Page_Load

 DataTable dt = new DataTable();

 dt = (DataTable)Session["ImageData"];

 byte[] b = null;

 int id =Convert.ToInt16(Request.QueryString["id"]);

 for (int i = 0; i < dt.Rows.Count ; i++) {

 if (i == id) {

  b=((byte[])dt.Rows[i][3]);

 break;

 } }

Response.ContentType = "image/jpeg";

Response.BinaryWrite(b);

Summary:Above 7 steps will read Image (System. Byte[]) from database and display Image in GridView.

Thanks :Shweta Kulkarni MCTS


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend