Ramirez77 Ramirez77 - 2 months ago 26
C# Question

Displaying Base64 String in ASP.Net Gridview

I have the task of displaying information using asp.net which requires string fields, which I easily implemented, and an image to go along with the information. I tried using an image field within my gridview to display a picture which worked well for images where I have a url to go along with them. However I have been trying to figure out a way to display an image that is stored as a base64 string. I've tried all sorts of ways to try and display the image, such as using a template field, trying to set the image URL to the string which would display a base64 in html, and even converting the base64 to an image which did not seem to work. Right now I am trying to just add data manually using a datatable and creating rows manually. If anyone has any idea how I could use base64 strings in either an image view I would greatly appreciate it.

Here is the code for the gridview I have created.

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#FF0000" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false" enabled="false">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="30" />
<asp:BoundField DataField="Account" HeaderText="Account Number" ItemStyle-Width="30" />
<asp:ImageField DataImageURLField="ImageURL" HeaderText="Image" />
</Columns>
</asp:GridView>


And here is the c# code I have right now to create an entry in the gridview.

DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Account",typeof(string)),
new DataColumn("ImageURL",typeof(string))});

string URL = "data:image/jpg;base64,";

string encodedString = //base64 string here


URL += encodedString;

dt.Rows.Add(1, "Steve", "************1111", URL);

GridView1.DataSource = dt;
GridView1.DataBind();

Answer

Incredibly hacky, but it works:

GridView:

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#FF0000" HeaderStyle-ForeColor="White"
    DataSource='<%# GetData() %>' runat="server" AutoGenerateColumns="false" enabled="false">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-Width="30" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="30" />
        <asp:BoundField DataField="Account" HeaderText="Account Number" ItemStyle-Width="30" />
        <asp:BoundField DataField="ImageURL" HeaderText="Image" HtmlEncode="false" />
    </Columns>
</asp:GridView>

Code-behind:

public DataTable GetData()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id", typeof(int)),
                new DataColumn("Name", typeof(string)),
                new DataColumn("Account",typeof(string)),
                new DataColumn("ImageURL",typeof(string))});

    string URL = "data:image/jpeg;base64,";

    string encodedString = ""; // base64-encoded image data goes here

    URL += encodedString;

    URL = $"<img src=\"{URL}\">";

    DataRow dr = dt.NewRow();

    dr["ID"] = 1;
    dr["Name"] = "Steve";
    dr["Account"] = "************1111";
    dr["ImageUrl"] = URL;

    dt.Rows.Add(dr);

    return dt;
}