asp.net - 如何将此 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>