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

Introduction
Here I will explain you how to display image into GridView using Asp.Net C#

Description
In my earlier post, I explained about the retrieval of images from database and display those images in to GridView using HTTPHandler file. For more details click here. I already told you that, there are two ways to display images into gridview: TemplateField and ImageField. For more details see Show images into GridView video.

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>

Here, I have an UserProfile table in my database containg FirstName, LastName, EmailId and Photo. in the table, Photo field having path of images and the images are stored in my application image folder. So, create Images folder in the application and add images you want to display in to GridView. The table structure is as shown below

 

Now add .aspx page in the application and add GridView control from toolbox. You can also formatting the  gridview as per your style. After that you have to add BoundField to bind data and TemplateField or ImageField to bind image Url. The HTML markup of the GridView is as shown below





In the above code, I have used TemplateField and ImageField to display images for an explanation. You can use any of it. One more thing you have to remember that AutoGenerateColumns property should be false. This is required to assign  BoundField & TemplateField manually.

Now you have to Bind the GridView from code behind page. Here I am writing a function and call it at page load event to bind the 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>

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





I hope this post helps you.....For any query just comment below this post. I will happy to help you. ThankYou !

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

OutPut:

No comments:

Post a Comment