html - 如何在 Gridview 中并排显示 ItemTemplate 和 Alternating ItemTemplate？

Question

我有一个“报告”页面，该页面将根据表格中的事件报告数量显示动态数量的按钮(格式为 ASP:Hyperlinks)。除了我想要的显示，我可以让一切正常工作。我想并排查看我的按钮(左边是“ItemTemplate”，右边是“AlternatingItemTemplate”)。

HTML 代码:

<asp:Panel runat="server">
    <asp:GridView ID="gv_Reports" runat="server" DataKeyField="ReportId" HorizontalAlign="Center" ShowHeader="False" AutoGenerateColumns="False" BorderStyle="None" GridLines="None">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:HyperLink ID="buttonLinks" CssClass="reportButton" Text='<%# Bind("RepName") %>' href='<%#String.Concat("ReportParams.aspx?reportId=") & Eval("ReportId")%>' runat="server"></asp:HyperLink>
                </ItemTemplate>
                <AlternatingItemTemplate></AlternatingItemTemplate>
            </asp:TemplateField>
        </Columns>
        <Columns>
            <asp:TemplateField>
                <AlternatingItemTemplate>
                    <asp:HyperLink ID="buttonLinks" CssClass="reportButton" Text='<%# Bind("RepName") %>' href='<%#String.Concat("ReportParams.aspx?reportId=") & Eval("ReportId")%>' runat="server"></asp:HyperLink>
                </AlternatingItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</asp:Panel>

CSS 代码:

.reportButton {
    display:block;
    height:25px;
    width:250px;
    background:#f1f1f1;
    padding:15px 10px 10px 10px;
    margin: 0px 10px 0px 10px;
    font-size:14px;
    text-align:center;
    border-radius:5px;
    border:1px solid #e1e1e2;
    font-weight:bold;
    text-decoration:none;
}

我得到的示例:

我希望看到两边的间隙闭合并且右列向上移动，这样至少在这个例子中，有一组干净的 4 行 2 列按钮。

我曾考虑过将两个网格并排放置并用交替记录填充它们的数据集，但如果我能远离这种情况并只维护一个数据集，我会更愿意这样做。

Answer 1

GridView 是基于行的。因此，即使是交替模板也将位于新行中，因此位于先前超链接的下方。因此，如果您希望并排显示数据，最好使用 ListView。

<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal">
    <ItemTemplate>
        <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>
    </ItemTemplate>
</asp:DataList>

或者，如果您使用 Bootstrap，则可以使用 Repeater 和 Bootstrap Grid System。

<div class="container">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <div class="row">
                <div class="col-6">
                    <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>
                </div>
                <div class="col-6">
                    <asp:HyperLink ID="HyperLink2" runat="server">HyperLink</asp:HyperLink>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>