ASP.Net listview布局表现奇怪

Question

我正在尝试在ASP.Net页面中使用ListView并且无法获得我期望的结果。我的页面看起来像这样：

            <table>
                <tr>
                    <td><label class="subHeading">Contacts</label></td>
                </tr>
                <tr>
                    <asp:ListView runat="server" id="lvwContacts">
                        <LayoutTemplate>
                            <div class="tableWrapper">
                                <div class="tableScroll">
                                    <table>
                                        <tr>
                                            <th><label>Full Name</label></th>
                                            <th><label>Job Title</label></th>
                                            <th><label>Direct Line</label></th>
                                            <th><label>Mobile Phone</label></th>
                                            <th><label>Email</label></th>
                                        </tr>
                                        <tr id="itemPlaceHolder" runat="server"></tr>
                                    </table>
                                </div>
                            </div>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <tr>
                        ... etc

但是当我查看输出时，表格没有出现在div中：

<div class="tableWrapper">
    <div class="tableScroll"></div>
</div>
<table>
    <tbody>
        <tr>
        <td><label class="subHeading">Contacts</label></td>
        </tr>
        <tr></tr>
    </tbody>
</table>
<table>
<tbody>
    <tr>
    <th><label>Full Name</label></th>
    <th><label>Job Title</label></th>
    <th><label>Direct Line</label></th>
    <th><label>Mobile Phone</label></th>
    <th><label>Email</label></th>
    </tr>
    ... etc

我已经尝试将div放在整个listview中，结果大致相同。这到底是怎么回事？我做过蠢事还是ListViews真的像这样？

谢谢

约翰

Answer 1

您必须确保拥有有效的HTML标记。目前你的一个<tr>有一个孩子的<div>，而不是<td>或<th>。

看这个演示：

/* style used to illustrate problem */
.tableWrapper {
  padding: 10px;
  background: red;
}

<label>Invalid markup</label>
<table>
  <tr>
    <td><label class="subHeading">Contacts</label></td>
  </tr>
  <tr> <!-- Invalid. child is a div not a td or th -->
    <div class="tableWrapper">
      <div class="tableScroll">
        <table>
          <tr>
            <th><label>Full Name</label></th>
            <th><label>Job Title</label></th>
            <th><label>Direct Line</label></th>
            <th><label>Mobile Phone</label></th>
            <th><label>Email</label></th>
          </tr>
        </table>
      </div>
    </div>
  </tr>
</table>

<hr>

<label>Valid markup</label>
<table>
  <tr>
    <td><label class="subHeading">Contacts</label></td>
  </tr>
  <tr>
    <td> <!-- This is required! -->
      <div class="tableWrapper">
      <div class="tableScroll">
        <table>
          <tr>
            <th><label>Full Name</label></th>
            <th><label>Job Title</label></th>
            <th><label>Direct Line</label></th>
            <th><label>Mobile Phone</label></th>
            <th><label>Email</label></th>
          </tr>
        </table>
      </div>
    </div>
    </td>
  </tr>
</table>

检查两个表的渲染输出...您将看到当标记无效（您遇到的情况）时会发生什么，浏览器会从表中删除<div>。第二个表具有正确的标记，因此它按原样呈现