Asp.net 如何将此ListView作为两列表获取？

我是一名新的ASP.NET开发人员，我正在努力获取我正在处理的ListView，如下图所示：

怎么做？

我的ASP.NET代码：

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" >
                    <ItemTemplate>
                        <tr style="">
                            <td>
                                <p>
                                <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
                                </p>
                            </th>
                            <td>
                                <p>
                                <asp:Label ID="UsernameLabel" runat="server" 
                                    Text='<%# Eval("Username") %>' />
                                </p>
                            </td>
                            <td>
                                <p>
                                <asp:Label ID="JobTitleLabel" runat="server" Text='<%# Eval("JobTitle") %>' />
                                </p>
                            </td>
                            <td>
                                <p>
                                <asp:Label ID="DivisionLabel" runat="server" Text='<%# Eval("DivisionName") %>' />
                                </p>
                            </td>
                            <td>
                                <p>
                                <asp:Label ID="RoleLabel" runat="server" Text='<%# Eval("RoleName") %>' />
                                </p>
                            </td>
                        </tr>
                    </ItemTemplate>

                    <LayoutTemplate>
                        <table id="Table2" runat="server">
                            <tr id="Tr5" runat="server">
                                <td id="Td4" runat="server">
                                    <table ID="itemPlaceholderContainer" runat="server" border="1" style="">
                                        <tr id="Tr6" runat="server">
                                            <td id="Td6" runat="server" colspan="3">
                                                <center>Personal Information</center>
                                            </td>
                                        </tr>
                                        <tr id="Tr9" runat="server" style="">
                                            <th id="Th3" runat="server">
                                                Name</th>
                                        </tr>
                                        <tr id="Tr10" runat="server">
                                            <th id="Th4" runat="server">
                                                Username</th>
                                        </tr>
                                        <tr id="Tr11" runat="server">
                                            <th id="Th5" runat="server">
                                                JobTitle</th>
                                        </tr>
                                        <tr id="Tr12" runat="server">
                                            <th id="Th6" runat="server">
                                                Badge Number</th>
                                        </tr>
                                        <tr id="Tr13" runat="server">
                                            <th id="Th7" runat="server">
                                                Division</th>
                                        </tr>
                                        <tr id="Tr14" runat="server">
                                            <th id="Th8" runat="server">
                                                Role</th>
                                        </tr>
                                        <tr ID="itemPlaceholder" runat="server">
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr id="Tr8" runat="server">
                                <td id="Td7" runat="server" style="">
                                    <asp:DataPager ID="DataPager1" runat="server" PageSize="5">
                                        <Fields>
                                            <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
                                                ShowNextPageButton="False" ShowPreviousPageButton="False" />
                                            <asp:NumericPagerField />
                                            <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" 
                                                ShowNextPageButton="False" ShowPreviousPageButton="False" />
                                        </Fields>
                                    </asp:DataPager>
                                </td>
                            </tr>
                        </table>
                    </LayoutTemplate>

                </asp:ListView>

个人信息
名称
用户名
职务
警察编号
分部
角色

我现在得到的是在左栏列出标题或标题，并在其中列出下面的检索值，而不是用标题显示每个值。下面是我现在得到的快照：

更新：

更新#2:

---

我仍在努力解决这个问题，并得到了与快照中相同的结果。

您的html太大了

                    <tr style="">
                        **<td>**
                            <p>
                            <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
                            </p>
                        **</th>**

****


****

请参见标记**。打开td并用th关闭。

                <tr style="">
                    <td>
                        <p>
                        <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
                        </p>
                    </th>
                    <td>
                        <p>
                        <asp:Label ID="UsernameLabel" runat="server" 
                            Text='<%# Eval("Username") %>' />
                        </p>
                    </td>

---

在上述代码之后关闭您的

tr

，然后重新打开下一行的

tr

。

这是JSFIDDLE:

好的。我重新制作并测试了它。这是我得到的结果：

首先，我添加了一些css来清理代码和格式

<style>
    .rightcolumn {
        text-align:right; 
        height:25px;
        text-overflow:ellipsis;
        overflow: hidden;
        white-space:nowrap;
        font-weight:bold;
    }
    .leftcolumn {
        text-align:left; 
        height:25px;
        text-overflow:ellipsis;
        overflow: hidden;
        white-space:nowrap;
    }
</style>

.右栏{
文本对齐：右对齐；
高度：25px；
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
字体大小：粗体；
}
.leftcolumn{
文本对齐：左对齐；
高度：25px；
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}

然后单击ListView模板和布局：

<asp:listview id="ListView1" runat="server" datasourceid="SqlDataSource1">
        <ItemTemplate>
            <table style="width:200px;">
                <tr>
                   <td class="leftcolumn">
                            <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="leftcolumn">
                            <asp:Label ID="UsernameLabel" runat="server" Text='<%# Eval("Username") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="leftcolumn">
                            <asp:Label ID="JobTitleLabel" runat="server" Text='<%# Eval("JobTitle") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="leftcolumn">
                            <asp:Label ID="BadgeNumberLabel" runat="server" Text='<%# Eval("BadgeNumber") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="leftcolumn">
                            <asp:Label ID="DivisionLabel" runat="server" Text='<%# Eval("DivisionName") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="leftcolumn">
                            <asp:Label ID="RoleLabel" runat="server" Text='<%# Eval("RoleName") %>' />
                    </td>
                </tr>
            </table>
        </ItemTemplate>

        <LayoutTemplate>
            <table id="outertable" border="1" runat="server">
                <tr>
                    <td colspan="2" style="font-weight:bold;">
                        <center>Personal Information</center>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table id="itemPlaceholderContainer" style="width:150px;" runat="server">
                            <tr>
                                <td class="rightcolumn">
                                    Name
                                </td>
                            </tr>
                            <tr>
                                 <td class="rightcolumn">
                                     Username
                                 </td>
                            </tr>
                            <tr>
                                 <td class="rightcolumn">
                                     Job Title
                                 </td>
                            </tr>
                            <tr>
                                 <td class="rightcolumn">
                                     Badge Number
                                 </td>
                            </tr>
                            <tr>
                                 <td class="rightcolumn">
                                     Division
                                 </td>
                            </tr>
                            <tr>
                                 <td class="rightcolumn">
                                     Role
                                 </td>
                            </tr>
                        </table>
                    </td>
                    <td id="itemPlaceholder" runat="server">

                        <!---List Item Template Goes Here--->

                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:DataPager ID="DataPager1" runat="server" PageSize="5">
                            <Fields>
                                <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False"
                                    ShowPreviousPageButton="False" />
                                <asp:NumericPagerField />
                                <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False"
                                    ShowPreviousPageButton="False" />
                            </Fields>
                        </asp:DataPager>
                    </td>
                </tr>
            </table>
        </LayoutTemplate>
    </asp:listview>

个人信息
名称