CODEWITHSUNDEEP
c#asp.netcssimagegrid
huong
huong

Reputation: 4564

Display images retrieved from database as list with CSS style

I'm a newbie to ASP.NET and I'm having trouble finding a solution to display images retrieved from database as list with CSS style. There are a couple of solutions I've found, like using DataList, DataGrid, Repeater, etc. but they all end up displaying images in table cells, and the spacing is dynamic with the number of images fetched. So I'm wondering whether there is any way to display images in ASP.NET image control along with CSS style (like how you can do with PHP, I know how weird that sounds). Or is there anyway to display them neatly in fixed columns? I'm a dummy here so please be kind to me and help me. Any suggestion is appreciated.

Upvotes: 2

Views: 1500

Answers (3)

Sam
Sam

Reputation: 146

Repeater won't create any table unless use like this, and you can stylize with css may it will help you.

<ul>
    <asp:Repeater ID="rptr" runat="server">
        <ItemTemplate>
            <li>
                <ContentTemplate>
                    <asp:Image ID="lnk" runat="server">/asp:LinkButton>|
                </ContentTemplate>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

Upvotes: 0

Aristos
Aristos

Reputation: 66641

There are many ways to do that.

You can make a simple foreach loop that you simple render your images and show the results. No need to use other controls. I place the images inside li because you can make them with simple css style to render as table.

List<string> lMyImages = new List<string>();
StringBuilder sRenderOnMe = new StringBuilder();

foreach(var OneImg in lMyImages)
   sRenderOnMe.AppendFormat("<li><img src=\"{0}\"></li>", OneImg);

OneLiteral.Text = sRenderOnMe.ToString():

You can also use an asp:Repeater, that you can render inside it what ever you like. how: http://msdn.microsoft.com/en-us/magazine/cc163780.aspx

<asp:Repeater runat="server" id="Repeater1">
    <itemtemplate>
      <li><img src="<%# DataBinder.Eval(Container.DataItem, "ImgSrc") %>"></li>
    </itemtemplate>
</asp:Repeater>

You can overwrite the DataList and render it as you like with divs, how : How To Override Datalist To Be Rendered Into Divs Instead Of Table?

Css: Here is the way that using the <li> you can render the images shown as dynamic table: http://mirificampress.com/permalink/the_amazing_li

Upvotes: 1

PMC
PMC

Reputation: 4766

If you are using WebForms and want to stick with the .net controls, have a look at ListView

Upvotes: 0

Related Questions