CODEWITHSUNDEEP
c#asp.net
Brent Oliver
Brent Oliver

Reputation: 171

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

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.

Upvotes: 1

Views: 1513

Answers (1)

Brent Oliver
Brent Oliver

Reputation: 171

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>

Upvotes: 1

Related Questions