asp.net - このListViewを2列のテーブルとして取得するにはどうすればよいですか？

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>

私が今得ているのは、ヘッダーで各値を表示する代わりに、左側の列にヘッダーまたはタイトルをリストし、それらの下に取得された値を1つにリストすることです。これが私が今得ているもののスナップショットです：

アップデート：

更新＃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>