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: https://www.google.com/#q=c-sharp+how+to+write+a+data-driven+web+page and ask a specific question if you get stuck. — Shannon Holsinger, Sep 21 '16 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, Sep 21 '16 at 13:15

score 1 · Accepted Answer · edited May 23 '17 at 12:19

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 '17 at 12:19

Community

1
1

answered Sep 21 '16 at 13:10

Abdo

322
6
15

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? – adil sharif Sep 21 '16 at 14:09
@adilsharif it's just a place holder you can change it to any IEnumerable you have – Abdo Sep 21 '16 at 14:13
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_ – Abdo Sep 21 '16 at 14:17
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. – adil sharif Sep 21 '16 at 15:28
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 – Abdo Sep 21 '16 at 15:39
@adilsharif I edited the post to add a full example as well – Abdo Sep 21 '16 at 16:00
Hi i created my List function but can you please tell how to fill my list using dataset values. i tried parsing values to tours.add(Data_Set.Tables[0].Rows[0]["Tour_Title"].ToString()) but its giving an error saying that cannot convert from string to tour? what is it. – adil sharif Sep 21 '16 at 16:06
**tours** is a list of **tour** therefore you need to add a tour so we do that: `var dataBaseTitle=Data_Set.Tables[0].Rows[0]["Tour_Title"].ToString(‌);` then we add it to the title parameter of the tour: `tours.Add(new Tour() { ImageUrl = "img2.png", Title = dataBaseTitle, Text = "This Is The Body Text2" });` – Abdo Sep 21 '16 at 16:13
Thanks alot sir, The dataset is getting the data. One last thing i would like to ask. I am getting an error "Object reference is not set" (i am familier with the error) and its in the line of foreach loop (var item in tours). please tell me how to resolve it? – adil sharif Sep 21 '16 at 17:02
on the page_load event you need to create a new list `tours=new List();` – Abdo Sep 21 '16 at 17:08
i solved the problem. Its ok but now when i first loaded the page there is only first tour is showing? not the second and the remaining others ;-( – adil sharif Sep 21 '16 at 17:09
there you retrive only the first element from the database `Data_Set.Tables[0].Rows[0]["Tour_Title"].ToStr‌ing(‌);` – Abdo Sep 21 '16 at 17:13
you need to do somthing like: `foreach(var data in Data_Set.Tables[0].Rows){ ..}` – Abdo Sep 21 '16 at 17:15
then in the `{..}` you add `tours.Add(new Tour() { ImageUrl = "img2.png", Title = data["Tour_Title"].ToString(), Text = "This Is The Body Text2" });` – Abdo Sep 21 '16 at 17:17
How can i show you my code??? Can you give me your email sir??? in dataset i checked at the time of dataset fill and it shows 2 row (ok as per my database record), but i assign values only once to the variables as you showed me. Please tell me how to show you my code – adil sharif Sep 21 '16 at 17:34
i think i need to use a for loop and then send the values to variables one by one using i++ type of function but i dont know how to use it. – adil sharif Sep 21 '16 at 17:34
see my previous comment i made a simple foreach to add tours – Abdo Sep 21 '16 at 17:36
Sir many many many thanks alot alot alot. I used the for loop and now i got the desired results. – adil sharif Sep 21 '16 at 17:39
Can you please give me your email sir? – adil sharif Sep 21 '16 at 17:40

score 0 · Answer 2 · answered Sep 21 '16 at 13:04

0

Use repeator control in ASP.Net

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

answered Sep 21 '16 at 13:04

Prasanth V J

1,126
14
32

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. – adil sharif Sep 21 '16 at 14:05

how to create html using foreach loop

2 Answers2