Display ASP.Net GridView selected row details with Image inside jQuery Modal Popup

Hi suhaas121,

Refer below code.

HTML

<asp:GridView ID="GridView1" Width="85%" runat="server" CellPadding="3" BackColor="White" BorderColor="#CCCCCC"
    BorderStyle="None" BorderWidth="1px" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <EditItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </EditItemTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <a href="#" onclick='openPopup("<%# Eval("Id")%>","<%# Eval("Name")%>","<%#Convert.ToBase64String((byte[])Eval("Data"))%>")'>Details</a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Image ID="Image1" Width="150px" Height="50px" runat="server"
                    ImageUrl='<%#"data:Image/jpg;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="White" ForeColor="#000066" />
    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
    <PagerStyle ForeColor="#000066" HorizontalAlign="Left" BackColor="White" />
    <RowStyle ForeColor="#000066" />
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#007DBB" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>

<div id="popupdiv" style="display: none;">
    Id:<label id="lblId"></label>
    <br />
    Name:<label id="lblName"></label>
    <br />
    Image:<img id="img" alt="" width="250" height="150" />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
    function openPopup(id, name, image) {
        $('#lblId').html(id);
        $('#lblName').html(name);
        $('#img').attr('src', "data:Image/jpg;base64," + image);
        $("#popupdiv").dialog({
            title: "Details",
            width: 400,
            height: 350,
            modal: true,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
        });
    }
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(constr))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM tblFiles WHERE ContentType = 'image/jpeg'", conn))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using conn As SqlConnection = New SqlConnection(constr)
            Using sda As SqlDataAdapter = New SqlDataAdapter("SELECT * FROM tblFiles WHERE ContentType = 'image/jpeg'", conn)
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                GridView1.DataSource = dt
                GridView1.DataBind()
            End Using
        End Using
    End If
End Sub

Screenshot