如何使用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"
});

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

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

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

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

在这个例子中，我使用Page_Load上的值创建了Tour Seed it列表 瘦，你可以从网页代码访问它：

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