如何在Gridview中并排显示ItemTemplate和交替显示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列的干净按钮集。 < / p>

我曾经考虑过只是并排粘贴两个网格，并用交替的记录填充它们的数据集，但是如果我可以远离它并仅维护一个数据集，我会更喜欢。 < / p>

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，则可以使用中继器和Bootstrap网格系统。

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