Display image in Image control when LinkButton inside GridView is clicked in ASP.Net

Hi rishe,

I think you should not use Hyperlink,Instead of that you can use LinkButton or Button.

Here I have created sample that full fill your requirement.

HTML

<div>
    <script type="text/javascript">
        function check_uncheck(Val) {
            var ValChecked = Val.checked;
            var ValId = Val.id;
            var frm = document.forms[0];
            // Loop through all elements
            for (i = 0; i < frm.length; i++) {
                // Look for Header Template's Checkbox
                //As we have not other control other than checkbox we just check following statement
                if (this != null) {
                    if (ValId.indexOf('CheckAll') != -1) {
                        // Check if main checkbox is checked,
                        // then select or deselect datagrid checkboxes
                        if (ValChecked)
                            frm.elements[i].checked = true;
                        else
                            frm.elements[i].checked = false;
                    }
                    else if (ValId.indexOf('deleteRec') != -1) {
                        // Check if any of the checkboxes are not checked, and then uncheck top select all checkbox
                        if (frm.elements[i].checked == false)
                            frm.elements[1].checked = false;
                    }
                } // if
            } // for
        } // function

        function resizeWindow() {
            // you can get height and width from serverside as well     
            var width = 400;
            var height = 400;
            window.resizeTo(width, height);
        }
        function confirmMsg(frm) {
            // loop through all elements
            for (i = 0; i < frm.length; i++) {
                // Look for our checkboxes only
                if (frm.elements[i].name.indexOf("deleteRec") != -1) {
                    // If any are checked then confirm alert, otherwise nothing happens
                    if (frm.elements[i].checked)
                        return confirm('Are you sure you want to delete your selection(s)?')
                }
            }
        }
    </script>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="oid" Visible="False" Text='<%# DataBinder.Eval (Container.DataItem, "oid") %>'
                        runat="server" />
                    <asp:Label ID="photos" Visible="False" Text='<%# DataBinder.Eval (Container.DataItem, "photos") %>'
                        runat="server" />
                    <asp:CheckBox ID="deleteRec" onclick="return check_uncheck (this);" runat="server" />
                </ItemTemplate>
                <HeaderTemplate>
                    <asp:CheckBox ID="CheckAll" onclick="return check_uncheck (this);" runat="server"
                        Width="20px" />
                </HeaderTemplate>
            </asp:TemplateField>
            <asp:BoundField HeaderText="oid" DataField="oid" Visible="false" />
            <asp:TemplateField HeaderText="Photos">
                <ItemTemplate>
                    <asp:LinkButton ID="lbtnPhotos" runat="server" Text='<%#Eval("photos") %>' OnClick="ShowImage"></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <asp:Button ID="btndelete" runat="server" OnClientClick="return confirmMsg(this.form)"
        Text="Delete" /><asp:HiddenField ID="HiddenField2" runat="server" />
</div>
<div>
    <asp:Image ID="img" runat="server" Width="100px" Height="100px" Visible="false" />
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("oid", typeof(int)),
                            new DataColumn("photos", typeof(string))});
        dt.Rows.Add(1, "Chrysanthemum.jpg");
        dt.Rows.Add(2, "Hydrangeas.jpg");
        dt.Rows.Add(3, "Tulips.jpg");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

protected void ShowImage(object sender, EventArgs e)
{
    LinkButton lbtnPhoto = (sender as LinkButton);
    img.Visible = true;
    img.ImageUrl = "~/uploads/" + lbtnPhoto.Text;
}

Screenshot