adil sharif adil sharif - 2 months ago 21
SQL Question

how to create html using foreach loop

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?
enter image description here

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.

Answer

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

Comments