How to get Name, title, link and image from database and put it in a div

Question

I'm strugling with this situation. Here's my problem:

I have an ASP.NET page to show the diferent albuns that exists on database. Each album will redirect to a certain group of pictures.

From database, I want to automatically generate a frame with a thumbnail picture, a title and a Link to redirect user to the pictures. Get these elements from database it's easy. But I can't put that to generate this frames. So far, here is my code:

My SP:

USE [DCMSDEV]
GO
/****** Object:  StoredProcedure [dbo].[usp_get_all_albuns]    Script Date: 06/02/2014 18:29:21 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
ALTER procedure [dbo].[usp_get_all_albuns]
as
begin
    select Imagem, Link, Title from Imagens_Categorias
end

For My model, I have:

 public class PortfolioModel
{
    string connectionString = ConfigurationManager.ConnectionStrings["connection"].ConnectionString;

    public Entities.Portfolio GetAlbuns()
    {
        Entities.Portfolio port = new Entities.Portfolio();
        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            SqlCommand command = new SqlCommand("usp_get_all_albuns", connection);
            command.CommandType = CommandType.StoredProcedure;

            SqlDataReader reader = null;
            connection.Open();
            reader = command.ExecuteReader();

            while (reader.Read())
            {
                port.Link = reader["Link"].ToString();
                port.Title = reader["Title"].ToString();
                port.Imagem = reader["Imagem"]; //Error: Cannot implicitly convert type 'object' to 'byte[]'. An explicit conversion exists (are you missing a cast?)

            }

        }
        return port;
    }
}

For my controller, I have:

public class PortfolioController
{
    PortfolioModel pmodel = new PortfolioModel();

    public Entities.Portfolio GetAlbuns()
    {
        return pmodel.GetAlbuns();
    }
}

And in my ASP.NET page, I'm trying with this code:

 <div class="box" id="Albuns" runat="server">
    <%  foreach (var items in GetAlbuns())
       {%>

                <article class="border c-two" style="background-image:url(<% Convert.ToByte(items); %>)">
                    <div style="opacity: 0;" class="fdw-background">
                        <h4><a href="<% items.ToString(); %>" style="color:#fff;"><% items.ToString(); %></a></h4>

                        <p class="fdw-port">
                            <a href="#">Open Album <span class="vg-icon">→</span></a>
                        </p>
                    </div>
                </article>

      <% } %>

But it's not working. I don't know what to do more :'(

Can you help me?

Thanks.

What does `not working` mean? Is it showing you data? do you get an error? If so, then post it. — crthompson, Jun 02 '14 at 17:49
Is your problem that you don't know how to display the thumbnail pictures? — Mattias Åslund, Jun 02 '14 at 17:52
@MattiasÅslund - Yes, that's true. I don't really know how to do it. I'm trying but still no success. — VCore, Jun 02 '14 at 18:12

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

To display an image you usually provide a url in the html that the browser can make a second roundtrip to retrieve, for example:

<article class="border c-two" style="background-image:url('/getimage.ashx?id=5511)">

That said, you can inline images inside the html by base64 encoding them. Take a look at Embedding Base64 Images for more details.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 02 '14 at 18:23

Mattias Åslund

3,877
2
18
17

How to get Name, title, link and image from database and put it in a div

1 Answers1