ASP.NET Repeater模板,每N个元素的条件代码

13

我正在使用asp.net重复器来创建一堆图片。所有图像标记都相同,所以标准的<ItemTemplate>很好用。

然而,我想把K张图片包装在一个div中。假设我将25+张图像绑定到重复器上,并且我希望每个div中有5张图片。我该如何有条件地创建div的开始和关闭标记?

这种情况更适合使用for循环吗?


你可以使用下面展示的概念来实现这个,你只需要对其进行调整以适应你的目的。StackOverflow 用户不是为你编写代码,我们在这里是互相帮助学习的。展示你已经写过或尝试过的代码,我们可以帮助你解决问题。 - Dhaust
1
是的,只是澄清问题。 - ckarbass
4个回答

24

这应该适用于您,无需在代码后台中添加任何内容(除了绑定重复器..):

<asp:Repeater ID="repImages" runat="server">
<HeaderTemplate><div></HeaderTemplate>

<ItemTemplate>
<%# (Container.ItemIndex != 0 && Container.ItemIndex % 5 == 0) ? @"</div><div>" : string.Empty %>
<asp:Image ID="imgGallery" runat="server" ImageUrl='<%# /* your code  here */ %>' />
</ItemTemplate>

<FooterTemplate></div></FooterTemplate>
</asp:Repeater>

有人知道我如何在答案中使用常规的“if”语句而不是三元运算符(以消除末尾的空字符串选项)吗? - Nick
5
不可能的,因为if语句不是一个表达式(没有计算结果),所以它不能在数据绑定语法中使用。 - Michiel van Oosterhout
@michielvoo - 我也是这么想的,感谢你的解释。 - Nick
每个图像的ID如何变得唯一?实际上,我想要像image1、image2、image3这样的图像ID,通过使用itemIndex。但是,在asp标记(runat="server")中不允许使用ItemIndex。有人能帮忙吗? - chourn solidet

10

在这里,Asp.Net WebForms 可以带给你令人难以置信的RAD效率。 你可以使用新的ListView控件,并设置每个"组"中的项目数,这将允许你设置围绕组以及每个单独项的HTML。这样你就可以用条件标签来包围该组。

<asp:ListView ID="ListView1" runat="server" DataKeyNames="id" DataSourceID="LinqDataSource1" GroupItemCount="3">
<LayoutTemplate>
    <div id="layout">
        <asp:PlaceHolder ID="groupPlaceholder" runat="server"></asp:PlaceHolder>
    </div>
</LayoutTemplate>
<GroupTemplate>
    <div class="group">
        <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
    </div>
</GroupTemplate>
<EmptyDataTemplate>
    <span>No data was returned.</span>
</EmptyDataTemplate>
<ItemTemplate>
    <div class="item">
        <img alt='<%# Eval("title") %>' title='<%# Eval("title") %>'
            src='<%# Eval("filename","photos/{0}") %>' />
    </div>
</ItemTemplate>
</asp:ListView>

3
如果您想在ASPX页面上保留标记,您也可以尝试使用David方法的这个变体:
在aspx页面上:
<ItemTemplate>
<asp:Literal runat="server" ID="divStart" Text="<div>" />
<asp:Image ....>
<asp:Literal runat="server" ID="divEnd" Text="</div>" />
</ItemTemplate>

在代码后台的ItemDataBound事件中:
e.Item.FindControl("divStart").Visible
    = e.Item.FindControl("divEnd").Visible 
    = e.Item.ItemIndex % 5 == 0;

是的,保留页面标记是个不错的主意,Jorge。也许比我的版本更易读 ;) - Dhaust
1
良好地使用文字标记。似乎有太多人使用标签在页面上编写标记,而文字控件可以完成相同的工作,但不会生成与标签控件一起生成的<span>标签。 - Dan Appleyard

2
在Repeater的ItemTemplate中添加两个空标签控件,放在您想要的div标签位置。
然后在Repeater中添加一个ItemDataBound事件。
最后将以下代码添加到ItemDataBound事件中:
    Protected Sub Repeater1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs)
    If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
        If e.Item.ItemIndex Mod 5 = 0 Then
            Dim lblDivStart As Label = CType(e.Item.FindControl("lblDivStart"), Label)
            Dim lblDivEnd As Label = CType(e.Item.FindControl("lblDivEnd"), Label)
            lblDivStart.text = "<div>"
            lblDivEnd.text = "</div>"
        End If
    End If
End Sub

注意 - 这需要一些调整来处理第一个div,您可能需要做类似于如果(e.Item.ItemIndex + 1)Mod 5 = 0的操作,以使div显示在您想要的位置。
更多信息,请参见:
DataListItem.ItemIndex Property
DataList.ItemDataBound Event

1
停止 .NET 的疯狂!在 PHP 中,这将是模板中 foreach 的一个简单条件。无论如何,对于这个解决方案点赞。 - rick
哈哈。Rick 说得很对。我相信在 .NET 中有更聪明的方法来做这件事,只是我不够聪明去知道它 ; ) - Dhaust
6
在.NET中更明智的做法是切换到ASP.NET MVC。 - John Sheehan
更聪明的方法是使用ListView。 - Steve T

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接