CODEWITHSUNDEEP
c#asp.net
tinky05
tinky05

Reputation: 250

ASP Dot Net : How to repeat HTML parts with minor differences on a page?

It's a really simple problem.

I've got HTML code like this :

<div>
 <img src="image1.jpg" alt="test1" />
</div>
<div>
 <img src="image2.jpg" alt="test2" />
</div>
<div>
 <img src="image3.jpg" alt="test3" />
</div>

etc...

The data is comming from a DB (image name, alt text).

In JAVA, I would do something like :

save the info in array in the back end.

For the presentation I would loop through it with JSTL :

<c:foeach items="${data}" var="${item}>
<div>
 <img src="${item.image}" alt="${item.alt}" />
</div>
</c:foreach>

What's the best practice in ASP.net I just don't want to create a string with HTML code in it in the "code behind", it's ugly IMO.

Upvotes: 4

Views: 6309

Answers (3)

Jeff Meatball Yang
Jeff Meatball Yang

Reputation: 39017

This is the equivalent markup for the .ASPX file:

<asp:Repeater ID="imageList" Runat="server" EnableViewState="False">
    <ItemTemplate>
        <div>
            <img 
                src="<%# DataBinder.Eval(Container.DataItem, "ImageSrc") %>" 
                alt="<%# DataBinder.Eval(Container.DataItem, "Alt") %>" />
        </div>
    </ItemTemplate>
</asp:Repeater>

In the code-behind, you should set the imageList.DataSource property and call imageList.DataBind().

Upvotes: 2

Kelsey
Kelsey

Reputation: 47726

I would recommend looking at the Repeater control.

For your example:

<asp:Repeater ID="yourRepeater" runat="server">
    <ItemTemplate>
        <div>
            <asp:Image ID="yourImage" runat="server"
                ImageUrl='<%# Eval("Url") %>'
                ToolTip='<%# Eval("Name") %>' />
        </div>
    </ItemTemplate>
</asp:Repeater>

Then in your code behind:

List<MockData> lst = new List<MockData>();
lst.Add(new MockData() { Name = "Picture 1", Url = "pic1.jpg" });
lst.Add(new MockData() { Name = "Picture 2", Url = "pic2.jpg" });
lst.Add(new MockData() { Name = "Picture 3", Url = "pic3.jpg" });
yourRepeater.DataSource = lst;
yourRepeater.DataBind();

Upvotes: 1

Jaxidian
Jaxidian

Reputation: 13511

I'll take a stab at this without being able to see your code:

Check out the ASP:Repeater control. Between that and binding your data (with your variances) to it, it may do what you want.

Link 1 Link 2

<Edit:> Okay, now that I see your code, I can help you better. I'd definitely use a repeater for this. I would do it like this in the ASPX file (I may have some errors in this):

<ASP:Repeater id="MyRepeater" runat="server">
  <div>
    <img src="<%# Eval("Filename")>" alt="<$# Eval("AltText")>" />
  </div>
</ASP:Repeater>

Then in your C# you could have:

List<ObjectWithFilenameAndAltText> foo = GoGetTheseObjects();
MyRepeater.DataSource = foo;
MyRepeater.DataBind();

I may have some errors in this but I hope this gets you moving in the right direction. If you don't have a dedicated object for your images, you could simply use a Dictionary or List> and use "Key" and "Value" in your ASPX code.

Upvotes: 5

Related Questions