How to Reterive/Show Images in GridView From SQL server using Handler in Asp.Net

Introduction
Here I will explain you how to retrieve image from database and display in GridView using Asp.Net C#

Description
I have explain how to insert images into database in my previous post.....read more.
Now i am here to explain how to display images into gridview. There are two ways to display images into gridview: TemplateField and ImageField.

TemplateField look like as:
     <asp:TemplateField HeaderText="Image">
             <ItemTemplate>
             <asp:Image ID="Image1" runat="server" ImageUrl='<%# Bind(ImageFile) %>'
                   Height="100px" Width="100px" />
             </ItemTemplate>
             <ItemStyle HorizontalAlign="Center" Width="40%" />
    </asp:TemplateField>

ImageField like as:
   <asp:ImageField AlternateText="No Image Found" ControlStyle-Height="100px" ControlStyle-
            Width="100px" DataImageUrlField="ImageFile" >
  </asp:ImageField>


In earlier, we stored images into application image folder and stored images path into database. After that use GridView control  with BoundField and TemplateField or ImageField. The bound field bind the data directly from database and template field is used to bind the ImageUrl which are stored in application image folder. For more details click here.

Here I am using HTTPHandler: First of all, we stored images directly into database in binary format, that was already explain in previous post. For displaying the images we used TemplateField inside GirdView control and bind the ImageUrl with HTTPHandler file.
HTTPHandler is a simple class that allows to process a request and retun a response to browser. In short we can say that it is responsible for fulfilling the the request from the browser. It can handle only one request at a time, which gives a high performance.

Here I am  using HttpHandler file to display images into gridview. To add an HTTPHandler file, right click on project file and add new HTTPHandler.ashx file and give name as ImageHandler.ashx. and replace the following code with ProcessRequest method like this





Now we design .aspx page, include Gridview control from the tool box and set auto generated column property  false, by default it is true. AutoGenerateColumns="False"
In columns, include boundfield for bind image name directly and include templatefield with imagecontrol inside the item template. Bind Httphandler file with ImageUrl property of image control.
The HTML markup of the GridView is as shown below




Now include system.Data, sytem. Data.SqlClient and system.Configuration namespace in your code behind page and write the following code to bind your GridView.




And don't forgot to set the connection string in web.config file, this is used to established a connection between your application and database. So, you need to set the connectionstring in web.config file like this

  <configuration>
   
<connectionStrings>
        
<add name="ConnectionString" connectionString="Data Source=SHEKHAR-PC;Initial  
                            Catalog=TEMP; Persist Security Info=True;User ID=sa;Password=trucom@123"

                            providerName="System.Data.SqlClient"
/>    
    </connectionStrings>  
  </configuration>

I tried my level best to make this tutorial as easy as possible. If still you have confusion or need any help, then please write a comment below this post. I will happy to help you. Thanks!

How to Show Images into gridview using Asp.Net C# without Httphandler File

Output:

1 comment: