In my previous example, we have learned on how to save the actual image to a folder and image path to the database. In this example, I’m going to show on how to display those images in a GridView and Repeater control.
To get started, let’s create a method for fetching the image information from the database. Here’s the code block below:
| private DataTable GetData() { DataTable dt = new DataTable(); SqlConnection connection = new SqlConnection(GetConnectionString()); try { connection.Open(); string sqlStatement = "SELECT * FROM ImageInfo"; SqlCommand sqlCmd = new SqlCommand(sqlStatement, connection); SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd); sqlDa.Fill(dt); } catch (System.Data.SqlClient.SqlException ex) { string msg = "Fetch Error:"; msg += ex.Message; throw new Exception(msg); } finally { connection.Close(); } return dt; } |
As you can see, the code above is very straight forward and self explanatory. Now since we already have a method for fetching the data from database then we can bind the result in a Data Representation control. First let’s use a GridView control for displaying the image.
In Visual Studio, grab a GridView control from the toolbox and place it in the webform. The GridView markup would look something like below:
| <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:ImageField DataImageUrlField ="ImagePath" ControlStyle-Width="100px" ControlStyle-Height="100px"></asp:ImageField> <asp:BoundField DataField="ImageName" HeaderText="Image Name" /> </Columns> </asp:GridView> |
As you can see, we used ImageField column for displaying the image using the path and used a BoundField column for displaying the image infornamtion.
Now, to make it work then let’s bind the GridView control at Page_Load event. See below:
| protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { DataTable dt = GetData(); if (dt.Rows.Count > 0) { //Binding GridView GridView1.DataSource = dt; GridView1.DataBind(); } } } |
Running the code above will show something like below in the page:
.JPG)
Now, let’s go ahead and display the image in the Repeater control. Here’s the markup of Repeater control:
| <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <asp:Image ID="Image1" runat="server" Width="100px" Height="100px" ImageUrl='<%# Bind("ImagePath") %>' /> <asp:Label ID="Label1" runat="server" Text='<%# Bind("ImageName")%>'></asp:Label><br /> </ItemTemplate> </asp:Repeater> |
Unlike GridView, a Repeater control doesn’t have an ImageField or BoundField columns so we use ItemTemplate so that we can add our own server control for displaying the image and the information as shown above.
At Page_Load event, we can bind the Repeater control as what we did for binding the GridView. See the code block below:
| protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { DataTable dt = GetData(); if (dt.Rows.Count > 0) { Repeater1.DataSource = dt; Repeater1.DataBind(); } } } |
Running the code above will show something like below in the page:
That’s it! Hope you will find this example useful.