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
– Brent Oliver, Commented May 25, 2016 at 14:30
Take a look at this: stackoverflow.com/questions/7390983/… — Dan Dumitru
– Dan Dumitru, Commented May 25, 2016 at 15:12
You mention a handler which I'm guessing you mean HttpHandler? If you do, this might get you on your way stackoverflow.com/questions/1738020/bytearray-to-image-asp-net. There's a good accepted answer which also covers the concepts of HttpHandlers. — Phil Cooper
– Phil Cooper, Commented May 25, 2016 at 15:20
Dan, When I use the answer with 22 votes I receive a couple of errors. On the <img tag the complaint is no src. on code behind it is Image does not contain definition of src. I placed code behind line in the page load section. Also the end of that line (ImageBytes) is not recognized. Tried changing ImageBytes to my field name, still no joy. — Brent Oliver
– Brent Oliver, Commented May 25, 2016 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
– Brent Oliver, Commented May 25, 2016 at 15:51

Brent Oliver · Accepted Answer · 2016-05-25 19:32:13Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related