如何使用 foreach 循环创建 html

Question

我有一个包含以下代码的 aspx 表单

<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>

输出是这样的？

请帮助我了解如何动态执行此操作，这样我只需编写一次代码，数据库中的所有游览都会显示在我的游览页面中。

Answer 1

你可以在asp.net的页面中使用写代码

<% //code %>

或者

<% =data ℅>

也可以拆分代码

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

或在剃须刀引擎网页中

@code

和

@{ //code }

编辑：添加
对于您的示例，假设您有这个课程来展示旅行：

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

你有一个旅游列表：

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"
});

在这种情况下，在普通控制台代码中，您将使用 this 为每个值枚举值：

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

让我们将控制台代码更改为 Web 表单代码：

<% 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>
 <% } %>

希望对您有所帮助。

编辑：示例
这是完整的 Default.aspx.cs 代码：

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; }
}

在此示例中，我创建了一个 Tour Seed 列表，其中包含 Page_Load 上的值 瘦你可以通过网页代码访问它：

<% 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>
 <% } %>

这也是How to loop through data in web forms的重复问题

Answer 2

在 ASP.Net 中使用中继器控件

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