Asp.net c# displaying multiple images from single database record

Question

Building my first .net application, so please be patient of my novice level.

I am collecting data from users and storing into SQL. Each record has several data fields and up to four images (yes causes very large records, but volume is small).

Now I need to be able to display those images back to a user. I want to do this using a page layout similar to below, but don't know how to implement a handler that can deal with this. The record the page displays is coming from a query string, with the only value being the questionID.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Submit_Detail.aspx.cs" Inherits="cs1.Submit.Submit_Detail" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<asp:FormView ID="Submit_tDetail" runat="server" ItemType="cs1.Models.Questions" SelectMethod ="GetQuestion" RenderOuterTable="false">
    <ItemTemplate>
        <div>
            <h1><%#:Item.KeyObjective %></h1>
        </div>
        <br />
        <table>
            <tr>
                <td>
                    <img src="<%#:Item.ImageFile %>" style="border:solid; height:300px" alt="No Image"/>
                </td>
                <td>
                    <img src="<%#:Item.ImageFile2 %>" style="border:solid; height:300px" alt="No Image" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="<%#:Item.ImageFile3 %>" style="border:solid; height:300px" alt="No Image"/>
                </td>
                <td>
                    <img src="<%#:Item.ImageFile4 %>" style="border:solid; height:300px" alt="No Image" />
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top; text-align:left;">
                    <b>Author:</b><br /><%#:Item.Author %>
                    <br />
                    <span><b>Submit Date:</b>&nbsp;<%#: Item.SubmitDate %></span>
                    <br />
                    <span><b>Stem:</b>&nbsp;<%#:Item.Stem %></span>
                    <br />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:FormView>
</asp:Content>

Current code behind for the page:

namespace cs1.Submit
    {
    public partial class Submit_Detail : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    public IQueryable<Questions> GetQuestion([QueryString("QuestionID")] int? QuestionId)
    {
        var _db = new cs1.Models.ProductContext();
        IQueryable<Questions> query = _db.Questions;
        if (QuestionId.HasValue && QuestionId > 0)
        {
            query = query.Where(p => p.QuestionID == QuestionId);
        }
        else
        {
            query = null;
        }
        return query;
    }
}
}

Each image in SQL server has three columns for binaryData, ContentType, and ImageName.

ImageFile, Image1Content, Image1Name, Image2File, Image2Content, Image2Name, etc.

I cannot get this to recognize the code blocks correctly, don't know why,,, am indenting????? — Brent Oliver, May 25 '16 at 14:30
Take a look at this: http://stackoverflow.com/questions/7390983/convert-from-binary-data-to-an-image-control-in-asp-net — Dan Dumitru, May 25 '16 at 15:12
You mention a handler which I'm guessing you mean HttpHandler? If you do, this might get you on your way http://stackoverflow.com/questions/1738020/bytearray-to-image-asp-net. There's a good accepted answer which also covers the concepts of HttpHandlers. — Phil Cooper, May 25 '16 at 15:20
Dan, When I use the answer with 22 votes I receive a couple of errors. On the — Brent Oliver, May 25 '16 at 15:23
Both the links that Dan Dumitru and Phil Cooper point to have a similar very highly rated answer, but I cannot get it to work... probably missing something simple see my earlier comment. — Brent Oliver, May 25 '16 at 15:51

score 1 · Answer 1 · answered May 25 '16 at 19:32

honestly not sure how many links and searches this took to find, but the article at this link ASP.NET images from SQL was able to quickly and easily handle the situation that I needed. All the code is in the aspx page, no (new) code behind. Here is the new aspx page code that is working to pull the image/s. Thanks everyone for the help:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
 <asp:FormView ID="Submit_tDetail" runat="server" ItemType="cs1.Models.Questions" SelectMethod ="GetQuestion" RenderOuterTable="false">
    <ItemTemplate>
        <div>
            <h1><%#:Item.KeyObjective %></h1>
        </div>
        <br />
        <table>
            <tr>
                <td>
                    <asp:Image id="Image1" AlternateText="No Image" runat="server" Height="200px" ImageUrl='<%# "data:image/jpg;base64,"+ Convert.ToBase64String((byte[])Eval("ImageFile")) %>' />
                </td>
                <td>
                    <asp:Image id="Image2" AlternateText="No Image" runat="server" Height="200px" ImageUrl='<%# "data:image/jpg;base64,"+ Convert.ToBase64String((byte[])Eval("ImageFile2")) %>' />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Image id="Image3" AlternateText="No Image" runat="server" Height="200px" ImageUrl='<%# "data:image/jpg;base64,"+ Convert.ToBase64String((byte[])Eval("ImageFile3")) %>' />
                </td>
                <td>
                    <asp:Image id="Image4" AlternateText="No Image" runat="server" Height="200px" ImageUrl='<%# "data:image/jpg;base64,"+ Convert.ToBase64String((byte[])Eval("ImageFile4")) %>' />
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top; text-align:left;">
                    <b>Author:</b><br /><%#:Item.Author %>
                    <br />
                    <span><b>Submit Date:</b>&nbsp;<%#: Item.SubmitDate %></span>
                    <br />
                    <span><b>Stem:</b>&nbsp;<%#:Item.Stem %></span>
                    <br />
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:FormView>
</asp:Content>

Asp.net c# displaying multiple images from single database record

1 Answers1