Question

我正在尝试将GridView（或ListView，我已经尝试过两者）放入div面板的面板主体中。但是，每当GridView出现时，它都会尽早关闭面板主体并导致格式问题。

我尝试了GridView，ListView，重新排列了面板的元素，并且修剪了很多东西，将其简化为GridView。

<asp:ListView ID="lvOuter" runat="server" ItemPlaceholderID="placeHolder" DataKeyNames="PkUser" OnItemCommand="lvOuter_ItemCommand" OnSorting="lvOuter_Sorting" OnSelectedIndexChanging="lvOuter_SelectedIndexChanging" OnPagePropertiesChanging="lvOuter_PagePropertiesChanging">
    <LayoutTemplate>
        <table style="border-collapse: collapse; width: 100%">
            <tbody>
                <tr id="placeHolder" runat="server" style="width: 100%"></tr>
            </tbody>
            <tfoot>
                <tr style="align-content: center;">
                    <td class="listViewFooterText" style="color: white; text-align: center">
                        <uc:listviewpager runat="server" id="ucOuterListViewPager" listviewcontrolid="lvOuter" />
                    </td>
                </tr>
            </tfoot>
        </table>

    </LayoutTemplate>
    <ItemTemplate>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <span class="glyphicon glyphicon-user x1" style="text-align: left;" />
                    &nbsp;
                                <b>
                                    <asp:Label ID="lbEmployeeTitle" runat="server" Style="font-family: Arial; font-size: 14px;" Text='<%# Eval("EmployeeName") %>'></asp:Label></b>
                    &nbsp; &nbsp;
                                    <asp:Label ID="lbUnapprovedTitle" runat="server" CssClass="badge badge-blue" Text='<%# Eval("TotUnapproved") %>'></asp:Label>
                </h3>
            </div>
            <div class="panel-body">
                <asp:GridView ID="gvInner" runat="server" DataSource='<%# Eval("IndividualTracking") %>' AutoGenerateColumns="false" DataKeyNames="PkTrainingRequest" OnRowCommand="gvInner_RowCommand">
                    <Columns>
                        <asp:TemplateField ItemStyle-Width="40%" HeaderText="Title">
                            <ItemTemplate>
                                <asp:LinkButton ID="kbTitle" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%# Eval("Title") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField ItemStyle-Width="20%" HeaderText="Length">
                            <ItemTemplate>
                                <asp:LinkButton ID="kbLength" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%#Eval("Length") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField ItemStyle-Width="30%" HeaderText="Date">
                            <ItemTemplate>
                                <asp:LinkButton ID="kbDate" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%#Eval("Date") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField ItemStyle-Width="10%" HeaderText="Approve">
                            <ItemTemplate>
                                <asp:Button ID="btnQuickApprove" runat="server" Text="Quick Approve" CssClass="btn btn-success" CommandName="Approve" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
            <div class="panel-footer">
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-2">
                        <asp:Button ID="btnDrillDown" Text='<%#Eval("Subordinates") %>' CommandName="DrillDown" CssClass="btn btn-primary" runat="server" Visible='<%#Eval("VisibleSubordinates") %>' />
                    </div>
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-2">
                        <asp:Button ID="btnViewTraining" Text="View All Training" CommandName="ViewTraining" CssClass="btn btn-primary" runat="server" />
                    </div>
                    <div class="col-md-4"></div>
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>

预期结果：面板中的每个面板均具有页眉和页脚，并且在主体中具有网格视图（填充时）。

实际结果：面板正常工作，直到填充网格视图为止。发生这种情况时，面板主体会在gridview之前结束，并且面板页脚会附加到下一个面板的顶部。

Answer 1

您将tr设为了placeHolder。所以它生成了这个，这是不正确的html

<table style="border-collapse: collapse; width: 100%">
    <tbody>

        <div class="panel panel-default">
            xxx
        </div>

因此，如果您想使用正确的表，请像这样制作LayoutTemplate

<asp:ListView ID="lvOuter" runat="server" ItemPlaceholderID="placeHolder">
    <LayoutTemplate>

        <table style="border-collapse: collapse; width: 100%">
            <tbody>
                <tr>
                    <td>
                        <span id="placeHolder" runat="server"></span>
                    </td>
                </tr>
            </tbody>
        </table>

    </LayoutTemplate>
    <ItemTemplate>
        <div class="panel panel-default">

        </div>
    </ItemTemplate>
</asp:ListView>

哪个生成

<table>
    <tbody>
        <tr>
            <td>

                <div class="panel panel-default">

                </div>

                <div class="panel panel-default">

                </div>

            </td>
        </tr>
    </tbody>
</table>

这仍然将所有内容放置在单个表单元格中。如果您希望每个ItemTemplate包含一个单元格，则需要在其中放置<tr><td>。

表格尽早结束面板主体，导致格式错误

1 个答案: