Question

ASP.NET新手。我们有一个显示事物列表的页面，但是我们想要添加不同的选项以显示列表（如缩略图，文本列表等）。我们的代码基本遵循以下格式：

<asp:Repeater runat="server" ID="Repeater">
    <ItemTemplate>
        // HTML for Thumbnail-tile view
    </ItemTemplate>
</asp:Repeater>

我们添加了无线电框以选择列表视图或平铺视图，但我需要找到一种方法来根据选择的标签来区分<ItemTemplate>标签，但我很挣扎。我尝试过的事情：

独立中继者

到目前为止，这是最成功的，但似乎就像一个混乱的解决方案，并且需要重构一些代码。我想确保在提交之前没有更好的选择。基本上我有两个中继器及其各自的<ItemTemplate>字段。

<asp:Repeater runat="server" ID="Repeater1>
    <ItemTemplate>
        // HTML for Thumbnail-tile view
    </ItemTemplate>
</asp:Repeater>

<asp:Repeater runat="server" ID="Repeater2>
    <ItemTemplate>
        // HTML for List view
    </ItemTemplate>
</asp:Repeater>

页面调用设置DataSource并在页面加载时调用默认转发器上的DataBind（），每个单选按钮的处理程序将刷新一个，并填充另一个用于各自的列表。两个中继器看起来有点矫枉过正，为了使它无缝工作，我们需要对它进行一些重构。

占位符

基本上格式化代码：

<asp:Repeater runat="server">
    <ItemTemplate>
        <asp:PlaceHolder runat="server" ID="???"></asp:Placeholder>
    </ItemTemplate>
</asp:Repeater>

根据我们的单选按钮，在后面的代码中生成模板的代码，然后将其发送到客户端。优雅。唯一的问题是占位符的ID不能是重复的，并且在转发器中它正是它将会是什么。

隐藏我们未使用的

基本上我们把代码都放在了

<asp:Repeater runat="server">
    <ItemTemplate>
        <div class="ListView" style="display: block"> // HTML for List view</div>
        <div class="TileView" style="display: none">> // HTML for Thumbnail-Tile view </div>
    </ItemTemplate>
</asp:Repeater>

单选按钮事件处理程序将只更新相应div上的css。这会影响性能，因为我们仍在加载隐藏列表的缩略图，网址和其他信息。我们希望避免这个项目的所有不必要的开销，所以这是不可能的。

我是否错过了解决此问题的其他方法？就像我说的，我是ASP.NET的新手，所以我不相信我已经考虑了所有潜在的功能。我一直在阅读有关ItemTemplateSelector属性的内容，但我无法弄清楚如何使用它。

Answer 1

另一种选择是使用CSS来获取您想要的数据流。

<style type="text/css">
    .list-view {
        width: 100%;
    }
    .thumbnail-view {
        width: 25%;
        float: left;
    }
</style>

<asp:Repeater runat="server" ID="repeater1" OnItemDataBound="repeater1_ItemDataBound">
    <ItemTemplate>
        <asp:Panel runat="server" ID="panelContent">
            // Your content
        </asp:Panel>
    </ItemTemplate>
</asp:Repeater>

基于RadioButtonList的选择，只需在两个CSS类之间交替。每当Repeater绑定其数据时，在行中找到Panel并将CSS类设置为它需要的任何内容。

protected void repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        Panel panelContent = (Panel)e.Item.FindControl("panelContent");
        if (myRadioButtonList.SelectedValue == "list")
        {
            panelContent.CssClass = "list-view";
        }
        else if (myRadioButtonList.SelectedValue == "thumbnail")
        {
            panelContent.CssClass = "thumbnail-view";
        }
    }
}

这个解决方案的缺点是需要熟悉CSS。如果你不是，我强烈建议你熟悉它。特别是如果您要继续进行Web开发。

除此之外，我可能更喜欢你的第一个选择。我喜欢将它们分成两个中继器的想法，只使用你需要的中继器。这使得将来很容易使用。如果您需要对一个转发器进行更改，您只需在.aspx页面上进行更改。

带有mutliple <itemtemplate>标签的ASP Repeater

1 个答案: