CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » ASP.Net Article » GridView with Thumbnail Images – Part 2   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

Community News
No News Feeds available at this time.
 
GridView with Thumbnail Images – Part 2

By Satheesh babu
Posted On Aug 05,2008
Article Rating: (Login)
Be first to rate
this article.
No of Comments: 8
Print this article.
Category: ASP.Net

Subscribe to our feed!

GridView with Thumbnail Images – Part 2

 

In Part 1, we have seen how to display the full image in a popup window when the user clicks the thumbnail image displayed in the GridView. We all know that displaying something on a popup window will not give a better user experience. There might be a chance where the popup blocker is turned on in the user’s machine and it will not allow the user to view the full image.

Part 2 of this article will also generate the thumbnail image for the images stored in database to display on the GridView. Like Part 1, when the user clicks on the thumbnail image it will also display the full image, but inside a DIV tag on the same page instead of a popup, which gives a better user experience.

Creating the thumbnail image and displaying the full image is done by the same HttpHandler implementation we have used in Part 1.

 

Creating Thumbnail Image

For reference purpose, we will have the HttpHandler implementation here also. For description of the code refer Part 1.

Thumbnail.ashx

public void ProcessRequest (HttpContext context) {

        string imageid = context.Request.QueryString["ImID"];

if (imageid == null || imageid == "")

{

//Set a default imageID

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();

       

        Stream str = new MemoryStream((Byte[])dr[0]);      

 

        Bitmap loBMP = new Bitmap(str);

        Bitmap bmpOut = new Bitmap(100, 100);

 

        Graphics g = Graphics.FromImage(bmpOut);

        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;

        g.FillRectangle(Brushes.White, 0, 0, 100, 100);

        g.DrawImage(loBMP, 0, 0, 100, 100);

        MemoryStream ms = new MemoryStream();

        bmpOut.Save(ms, System.Drawing.Imaging.ImageFormat.Png);

        byte[] bmpBytes = ms.GetBuffer();

        bmpOut.Dispose();

        ms.Close();

        context.Response.BinaryWrite(bmpBytes);           

        connection.Close();

        context.Response.End();          

    }

 

Displaying the Original Image

FullImage.ashx

public void ProcessRequest (HttpContext context) {

       string imageid = context.Request.QueryString["ImID"];

if (imageid == null || imageid == "")

{

//Set a default imageID

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();

        context.Response.BinaryWrite((Byte[])dr[0]);

        connection.Close();

        context.Response.End(); 

    }

 

Note

I have given only the ProcessRequest() method in the above code. Refer the source code attachment for the full code. I have set default imageID, make sure you are giving an existing imageId in database for the code to work without any errors.

 

Using DIV Tag to display the full image

To implement this, we will declare a DIV tag in the ASPX page with display property set to none. This indicates that the DIV tag will not be visible by default when the page is loaded. Declare a <IMG> tag inside this DIV tag to display the full image. When the user clicks the thumbnail image, we can enable the DIV tag through a javascript function and pass the ImID of the image to call the FullImage.ashx HttpHandler for displaying the full image in the <img> tag. Also, we will have a button called Close inside the DIV tag to close the display of full image i.e. on click of this button we will again make the DIV tag’s display property to none. Refer the below Jscript code,



ASP.Net Hosting

Recent Articles

<script language="javascript">

function ShowDIV(ImID)

{

        var obj = document.getElementById("IMGDIV");

        var im = document.getElementById("imIMG");

        if ( obj != null )

        {

            obj.style.display = "block";

            im.src = "FullImage.ashx?ImID="+ImID;

        }      

}

function HideDIV()

{   

       var obj = document.getElementById("IMGDIV");

        if ( obj != null )

        {

          obj.style.display = "none";

        }     

}

</script>

ASPX

 <form id="form1" runat="server">

    <div>

        <asp:GridView Width="500px" 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>

                   <a href="javascript:void(ShowDIV('<%# Eval("ImageID")%>'));" > <asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID")  %>'/> </a>

                 </ItemTemplate>

            </asp:TemplateField>              

            </Columns>

            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />

            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />

            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />

            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

            <AlternatingRowStyle BackColor="White" />

        </asp:GridView>

   

    </div>

    <div id="IMGDIV" align="center" valign="middle" runat="server" style="position: absolute;left: 35%;top: 25%;display:none;visibility:visible;vertical-align:middle;border-style:inset;border-color:black;background-color:#c8d1d4;">

    <table><tr><td><img id="imIMG" /></td></tr><tr><td> <input type="button" style="vertical-align:text-top" value="Close" onclick="return HideDIV();" /></td></tr></table>

   </div>

</form>

 

When we execute the page we will get an output similar to below.

On clicking the thumbnail image, we can view the full image inside a DIV tag like below,

 

 Clicking Close button will close the image, in other words it closes the DIV tag.

 

Note

The source code attached with this article has a page for uploading images. Create a table with name Image with columns ImageID(Identity), ImageName(Varchar(50)) and Image(image). Configure the connection string in the web.config file corresponding to the sqlserver you use.

Download

Source Code

 

Conclusion

When we bind the images of different dimensions stored in database to a gridview it will give an inconsistent look to the gridview. This article will address this issue by creating a thumbnail image for the images and then binding it to a gridview. Thus, displaying the full image inside a DIV tag will give a better user experience when compared to popup window.

Happy Coding!!!

 

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    4nVnhN , [url=http://eotrlliwmafi.com/]eotrlliwmafi[/url], [link=http://mbckumfffzgt.com/]mbckumfffzgt[/link], http://psvongidljmo.com/
    4nVnhN , [url=http://eotrlliwmafi.com/]eotrlliwmafi[/url], [link=http://mbckumfffzgt.com/]mbckumfffzgt[/link], http://psvongidljmo.com/
    You got to push it?this essneital info that is!
    You got to push it?this essneital info that is!
    Thanks (and an important note)
    First - thanks for the code.
    Second - since the div "IMGDIV" runs at the server (runat="server") the client function doesn't recognize it and therefore the var obj in the ShowDIV function gets a null.
    deleting the runat="server" from the IMGDIV div - does the trick.
    ThanX again.
    RE:Error
    Hi Nithya, In the handler, check imageid !=null and then execute the database operations. Or assign a default imageid if it is null.
    Error
    Hi, when i was trying to excute this progrm i am getting this problem as follows.. System.Data.SqlClient.SqlException: Incorrect syntax near '='. could you give me correct answer for the above error
    RE:Error
    Hi Suresh & johnson, In the handler, check imageid !=null and then execute the database operations. Or assign a default imageid if it is null.
    error
    i am getting problem here. SqlDataReader dr = command.ExecuteReader(); the problem is System.Data.SqlClient.SqlException: Incorrect syntax near '='
    Incorrect syntax near '='.
    when i was trying to excute this progrm i am getting this problem as follows.. System.Data.SqlClient.SqlException: Incorrect syntax near '='. could you give me correct answer for the above error