In this article I will explain with an example, how to display and change image in Image control based on DropDownList selection in ASP.Net using C# and VB.Net.
When DropDownList selection is changed, the images stored as Binary data will be fetched as BYTE Array and then the BYTE Array will be converted to BASE64 string and then assigned to the ASP.Net image control.
I have already explained how to upload files save files as binary data in database in my article Save Files to SQL Server Database using FileUpload Control. The same database is used for this article.
 
 
Binary Images stored in Database
The following screenshot displays database table with three images stored in it. The backup file of the database is present in the attached sample.
Display image in Image control based on DropDownList selection in ASP.Net
 
 
HTML Markup
The HTML Markup consists of a DropDownList control which will populate the list of image files in database and a Image control to display the selected image.
<asp:DropDownList ID="ddlImages" runat="server" AppendDataBoundItems="true" AutoPostBack = "true" OnSelectedIndexChanged = "FetchImage">
    <asp:ListItem Text="Select Image" Value="0" />
</asp:DropDownList>
<hr />
<asp:Image ID="Image1" runat="server" Visible = "false"/>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
 
 
Populating the List of Images in DropDownList control
Inside the Page Load event, I have written code to populate the list of images from database table.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        ddlImages.DataSource = GetData("SELECT Id, Name FROM tblFiles");
        ddlImages.DataTextField = "Name";
        ddlImages.DataValueField = "Id";
        ddlImages.DataBind();
    }
}
 
private DataTable GetData(string query)
{
    DataTable dt = new DataTable();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        return dt;
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        ddlImages.DataSource = GetData("SELECT Id, Name FROM tblFiles")
        ddlImages.DataTextField = "Name"
        ddlImages.DataValueField = "Id"
        ddlImages.DataBind()
    End If
End Sub
 
Private Function GetData(query As String) As DataTable
    Dim dt As New DataTable()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand(query)
            Using sda As New SqlDataAdapter()
                cmd.CommandType = CommandType.Text
                cmd.Connection = con
                sda.SelectCommand = cmd
                sda.Fill(dt)
            End Using
        End Using
        Return dt
    End Using
End Function
 
 
Display image in Image control based on DropDownList selection in ASP.Net
The following event handler is executed on the SelectedIndexChanged event of the DropDownList control. Here the binary image is fetched from database as BYTE array and then the BYTE array is converted to BASE64 string and displayed in Image control.
To know more about displaying binary image using BASE64 string please refer Display Byte Array as Image without using generic handler in ASP.Net.
C#
protected void FetchImage(object sender, EventArgs e)
{
    string id = ddlImages.SelectedItem.Value;
    Image1.Visible = id != "0";
    if (id != "0")
    {
        byte[] bytes = (byte[])GetData("SELECT Data FROM tblFiles WHERE Id =" + id).Rows[0]["Data"];
        string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
        Image1.ImageUrl = "data:image/png;base64," + base64String;
    }
}
 
VB.Net
Protected Sub FetchImage(sender As Object, e As EventArgs)
    Dim id As String = ddlImages.SelectedItem.Value
    Image1.Visible = id <> "0"
    If id <> "0" Then
        Dim bytes As Byte() = DirectCast(GetData(Convert.ToString("SELECT Data FROM tblFiles WHERE Id =") & id).Rows(0)("Data"), Byte())
        Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
        Image1.ImageUrl = Convert.ToString("data:image/png;base64,") & base64String
    End If
End Sub
 
Display image in Image control based on DropDownList selection in ASP.Net
 
Demo
View Demo
 
Downloads