locked
how image can be display in gridview from base64code saved in the database? RRS feed

  • Question

  • User-1026236167 posted

    hello sir in my above code 

    here i have done to convert image to base64 code and the base64 code can be saved in the database also 

    now my requirement is how base64code from database can be retrived as image in gridview 

    when load page image can be display in the gridview of base64code?

    cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.IO;
    using System.Drawing;
    using System.Web.UI.WebControls;
    using System.Net;
    namespace WebApplication14
    {
    public partial class WebForm77 : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!Page.IsPostBack)
    {
    FillGridview();
    }

    }
    public void FillGridview()
    {
    using (hospitalEntities ctx = new hospitalEntities())
    {
    Gv2.DataSource = (from hospitalEntities in ctx.test_image
    select hospitalEntities).ToList();
    Gv2.DataBind();
    }
    }

    protected void loadimage(object sender, EventArgs e)
    {


    }

    protected void BaseToImage_Click(object sender, EventArgs e)
    {
    if (FileUpload1.HasFile)
    {
    Stream fs = FileUpload1.PostedFile.InputStream;
    BinaryReader br = new BinaryReader(fs);
    Byte[] byteImage = br.ReadBytes((Int32)fs.Length);
    string Base64string = Convert.ToBase64String(byteImage, 0, byteImage.Length);
    TextBox1.Text = @"data:image/png;base64," + Base64string;

    }

    int status = 0;
    using (hospitalEntities ctx = new hospitalEntities())
    {
    ctx.test_image.Add(new test_image()
    {
    path = TextBox1.Text,
    by_whom = Session["username"].ToString(),

    });

    status = ctx.SaveChanges();

    }

    }

    protected void Gv2_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
    Gv2.PageIndex = e.NewPageIndex;
    FillGridview();

    }


    }
    }

    aspx

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="WebForm77.aspx.cs" Inherits="WebApplication14.WebForm77" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="contentbody" runat="server">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    data-integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    data-crossorigin="anonymous"></script>

    <div style="margin-top:30px; margin-left:20px">

    <asp:FileUpload ID="FileUpload1" runat="server" /><br /><br />
    <asp:TextBox ID="TextBox1" Height="150px" runat="server" TextMode="MultiLine"></asp:TextBox><br />
    <asp:Button ID="Button2" runat="server" OnClick="BaseToImage_Click" Text="Image to base64" />


    </div>

    <div style="margin-left:350px; margin-top:-185px" >
    <asp:TextBox ID="base64" runat="server" Height="150px" TextMode="MultiLine"></asp:TextBox><br />
    <asp:Button ID="btn" runat="server" Text="Base64 to image" OnClientClick="loadimage(); return false;" /><br />
    <asp:Image ID="myImage" runat="server" Height="150px" Style="margin-left:250px; margin-top:-235px" Width="150px"/>

    <script type="text/javascript">
    function loadimage() {
    $('#<%= myImage.ClientID %>').attr('src', $('#<%= base64.ClientID %>').val());
    }
    </script>

    </div>

    <asp:GridView runat="server" ID="Gv2" CellPadding="4" ForeColor="#333333" GridLines="both"
    AutoGenerateColumns="false" Width="90%" OnPageIndexChanging="Gv2_PageIndexChanging" PageSize="10">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
    <asp:BoundField DataField="first_name" HeaderText="firstname" />
    <asp:BoundField DataField="last_name" HeaderText="lastname" />
    <asp:BoundField DataField="remarks" HeaderText="remarks" />
    <asp:BoundField DataField="image" HeaderText="image" />




    </Columns>
    <EditRowStyle BackColor="#2461BF" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#EFF3FB" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#F5F7FB" />
    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
    <SortedDescendingCellStyle BackColor="#E9EBEF" />
    <SortedDescendingHeaderStyle BackColor="#4870BE" />
    </asp:GridView>


    </asp:Content>

    Monday, July 13, 2020 7:21 AM

Answers

  • User-939850651 posted

    Hi prabhjot1313,

    According to your description, do you mean that the picture is stored in the database in Base64 format, and you want to display its corresponding picture in the grid?

    If this is the case, I created a simple example, you could refer it:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    FillGridView();
                }
            }
    
            private void FillGridView()
            {
                DataTable dt = new DataTable();
                string conStr = ConfigurationManager.ConnectionStrings["conStr"].ToString();
                using (SqlConnection conn = new SqlConnection(conStr))
                {
                    string query = "select * from image_table";
                    using (SqlCommand cmd = new SqlCommand(query, conn))
                    {
                        SqlDataAdapter sda = new SqlDataAdapter(cmd);
                        sda.Fill(dt);
                        Gv1.DataSource = dt;
                        Gv1.DataBind();
                    }
                }
            }
    Page code:

    <body> <form id="form1" runat="server"> <div> <asp:GridView runat="server" ID="Gv1" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="ImageName" HeaderText="ImageName" /> <asp:TemplateField> <ItemTemplate> <asp:Image runat="server" ID="img" ImageUrl='<%# "data:image/png;base64," + Eval("ImageData")%>' Height="100px" Width="150px" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form> </body>

    Result:

    You could also refer to this case.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 13, 2020 10:45 AM