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:

privateDataTable GetData()

{

DataTable dt = newDataTable();

SqlConnection connection = newSqlConnection(GetConnectionString());

try

{

connection.Open();

string sqlStatement = "SELECT * FROM ImageInfo";

SqlCommand sqlCmd = newSqlCommand(sqlStatement, connection);

SqlDataAdapter sqlDa = newSqlDataAdapter(sqlCmd);

sqlDa.Fill(dt);

}

catch (System.Data.SqlClient.SqlException ex)

{

string msg = "Fetch Error:";

msg += ex.Message;

thrownewException(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:

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: