how to create html using foreach loop

Question

I have an aspx form which has the following code

<div class="media packagesList">
    <a class="media-left fancybox-pop" href="img/packages/package-list-01.png">
        <asp:Image ID="imgThumbnail" runat="server" CssClass="media-object" />
    </a>
    <div class="media-body">
        <div class="bodyLeft">
            <h4 class="media-heading">
                <a href="javascript.void(0)">
                    <asp:Label ID="lblHeading" runat="server"></asp:Label>
                </a>
            </h4>
            <div class="countryRating">
                <span>
                    <asp:Label ID="lblLocation" runat="server"></asp:Label>
                </span>
                <ul class="list-inline rating">
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                </ul>
            </div>
            <p>
                <asp:Label ID="lblDescription" runat="server"></asp:Label>
            </p>
            <ul class="list-inline detailsBtn">
                <li><span class="textInfo"><i class="fa fa-calendar" aria-hidden="true"></i>
                    <asp:Label ID="lblDate" runat="server"></asp:Label></span></li>
                <li><span class="textInfo"><i class="fa fa-clock-o" aria-hidden="true"></i>
                    <asp:Label ID="lblDays" runat="server"></asp:Label></span></li>
            </ul>
        </div>
        <div class="bodyRight">
            <div class="bookingDetails">
                <h2>
                    <asp:Label ID="lblPrice" runat="server"></asp:Label></h2>
                <p>Per Person</p>
                <a href="single-package-right-sidebar.html" class="btn buttonTransparent clearfix">Details</a>
                <a class="btn buttonTransparent" data-toggle="modal" href='.html'>Inquiry</a>
            </div>
        </div>
    </div>
</div>

And the output is this?

Please help me understand how to do this dynamically so I only have to write the code once and all the tours in the database will show in my tours page.

There are MANY ways to do this. Take a look at: google.com/#q=c-sharp+how+to+write+a+data-driven+web+page and ask a specific question if you get stuck. — Shannon Holsinger
– Shannon Holsinger, Commented Sep 21, 2016 at 13:02
Not helpful. @Shannon as i mentioned at first list of my question. This is 2nd question regarding Asp.net which clearly means i am standing outside the asp.net building knocking at its doors to be open to me. So please any good examples would be helpful. Want to learn this in any way. — adil sharif
– adil sharif, Commented Sep 21, 2016 at 13:15

Community · Accepted Answer · 2017-05-23 12:19:26Z

1

You can write codes in pages of asp.net by using

<% //code %>

Or

<% =data ℅>

You can also split the code

<% foreach(var x in values) { %>
<div>hello <%= x.name %></div>
<% } %>

Or in razor engine web pages

@code

And

@{ //code }

EDIT:Added
for your example lets say that you have this class that present a tour:

public class Tour{
   public string ImageUrl {get;set;}
   public string Title {get;set;}
   public string Text {get; set; }
}

and you have a list of tours:

var tours=new List<Tour>();
tours.Add(new Tour()
{
   ImageUrl="img.png",
   Title="Hello World",
   Text="This Is The Body Text"
});
    tours.Add(new Tour()
{
   ImageUrl="img2.png",
   Title="Tour two",
   Text="This Is The Body Text2"
});

in this case in a normal console code you would Enumerate the values using this for each:

foreach(var item in tours){
    console.WriteLine(item.Title)//Display the title in console
}

let's change the console code to a web forms code:

<% foreach(var item in tours){ %>
    <!-- using HTML -->
  <div>
     <img src="<%= item.ImageUrl %>" alt="Image" />
     <span>
          <%= item.Title %><!--The title from the tour -->
     </span>
    <p>
        <%= item.Text %><!--The tour body -->
    </p>
</div>
 <% } %>

Hope this Helped.

Edit:Example
Here is the full Default.aspx.cs code:

public partial class _Default : Page
{
    protected IList<Tour> tours;

    protected void Page_Load(object sender, EventArgs e)
    {
        tours= new List<Tour>();
        tours.Add(new Tour()
        {
            ImageUrl = "img.png",
            Title = "Hello World",
            Text = "This Is The Body Text"
        });
        tours.Add(new Tour()
        {
            ImageUrl = "img2.png",
            Title = "Tour two",
            Text = "This Is The Body Text2"
        });
    }
}
public class Tour
{
    public string ImageUrl { get; internal set; }
    public string test { get; set; }
    public string Text { get; internal set; }
    public string Title { get; internal set; }
}

In this example i created a list of Tour Seed it with values on Page_Load thin you can access it form the web page code:

<% foreach(var item in tours){ %>
    <!-- using HTML -->
  <div>
     <img src="<%= item.ImageUrl %>" alt="Image" />
     <h2>
          <%= item.Title %><!--The title from the tour -->
     </h2>
    <p>
        <%= item.Text %><!--The tour body -->
    </p>
</div>
 <% } %>

Also this is a duplicated question of How to loop through data in web forms

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Sep 21, 2016 at 13:10

Abdo

3326 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

adil sharif Over a year ago

What i dont understand in foreach loop is (var x in values) x is a variable here that i know which will be search through the data (if i am right), but what is values ???? what to replace with this values word in my code?

Abdo Over a year ago

@adilsharif it's just a place holder you can change it to any IEnumerable you have

Abdo Over a year ago

for example think of values of an IEnumerable class that contain a property named name so in your code it could be for examble a IList of Tours you get information of every tour i will update my answer with more details

adil sharif Over a year ago

Hi, I created my cs class for the Tours but now i am stuck in another problem. foreach(var item in Tour) where the word Tour is giving an error. Please explain which Tour keyword you used in your example.

Abdo Over a year ago

you don't use the Tour as it's a class not Enumerable. what you need to do is to create a List that contains multipe Tour see the answer at "and you have a list of tours:" you may also want to make it public as well

|

Prasanth V J · Accepted Answer · 2016-09-21 13:04:56Z

0

Use repeator control in ASP.Net

https://msdn.microsoft.com/en-us/library/zzx23804(v=vs.85).aspx

answered Sep 21, 2016 at 13:04

Prasanth V J

1,20615 silver badges33 bronze badges

1 Comment

adil sharif Over a year ago

Hi, I used the repeater control. It worked well but its not showing my other tours. Still showing the only one tour when the page is loaded. Please help me where am i wrong here.

Collectives™ on Stack Overflow

how to create html using foreach loop

2 Answers 2

19 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

19 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related