如何将此ListView作为两列表？

Question

我是一名新的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：

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

Answer 1

你的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下一行。

Answer 2

这里是JSFIDDLE：http://jsfiddle.net/collabcoders/xSbyG/

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

首先我添加一些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>

然后是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>