如何在Gridview中同时显示ItemTemplate和交替ItemTemplate？

Question

我有一个“报告”页面，它将根据一个表中活动报告的数量显示一个动态的按钮数(格式化的ASP:超级链接)。除了我想要的展示之外，我什么都能做。我想看到我的按钮并排(左是一个"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>

或者，如果使用引导程序，则可以使用Repeater和Bootstrap Grid系统。

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