Display Image in Image Control on DataList ImageButton Click using C# and VB.Net in ASP.Net

Hi rajeesh,

Rfer below sample.

HTML

<asp:DataList ID="DataList1" runat="server" HorizontalAlign="Left" OnItemCommand="DataList1_ItemCommand"
    RepeatColumns="5" RepeatDirection="Horizontal" Width="319px">
    <ItemTemplate>
        <table class="style1">
            <tr>
                <td>
                    <asp:ImageButton ID="ImageButton1" runat="server" CommandName="itemclick" Height="50px"
                        ImageUrl='<%# Eval("image") %>' Width="50px" />
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Eval("id") %>' />
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>
<br />
<br />
<asp:Image ID="Image2" runat="server" Height="100px" Width="100px" />

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("id");
        dt.Columns.Add("image");
        dt.Rows.Add("1", "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg");
        dt.Rows.Add("2", "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg");
        dt.Rows.Add("3", "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg");
        dt.Rows.Add("4", "http://static.flickr.com/77/199481108_4359e6b971_s.jpg");
        dt.Rows.Add("5", "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg");
        dt.Rows.Add("6", "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg");
        dt.Rows.Add("7", "http://static.flickr.com/58/199481218_264ce20da0_s.jpg");
        dt.Rows.Add("8", "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg");
        dt.Rows.Add("9", "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg");
        dt.Rows.Add("10", "http://static.flickr.com/70/229228324_08223b70fa_s.jpg");
        DataList1.DataSource = dt;
        DataList1.DataBind();
    }
}

protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
    if (e.CommandName == "itemclick")
    {
        string url = (e.Item.FindControl("ImageButton1") as ImageButton).ImageUrl;
        Image2.ImageUrl = url;
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.Add("id")
        dt.Columns.Add("image")
        dt.Rows.Add("1", "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg")
        dt.Rows.Add("2", "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg")
        dt.Rows.Add("3", "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg")
        dt.Rows.Add("4", "http://static.flickr.com/77/199481108_4359e6b971_s.jpg")
        dt.Rows.Add("5", "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg")
        dt.Rows.Add("6", "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg")
        dt.Rows.Add("7", "http://static.flickr.com/58/199481218_264ce20da0_s.jpg")
        dt.Rows.Add("8", "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg")
        dt.Rows.Add("9", "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg")
        dt.Rows.Add("10", "http://static.flickr.com/70/229228324_08223b70fa_s.jpg")
        DataList1.DataSource = dt
        DataList1.DataBind()
    End If
End Sub

Protected Sub DataList1_ItemCommand(ByVal source As Object, ByVal e As DataListCommandEventArgs)
    If e.CommandName = "itemclick" Then
        Dim url As String = (TryCast(e.Item.FindControl("ImageButton1"), ImageButton)).ImageUrl
        Image2.ImageUrl = url
    End If
End Sub

Screenshot