[ASP.net WebForm] ListView的套版樣式 (筆記)

2012-02-07

6241
0
ASP.net WebForm
2012-03-25

資料呈現用ul、li拆版真是讓工程師省了不少麻煩，因為VS2010的ListView並排顯示(DataList)只有table的樣版，沒有ul的樣版，所以做個線上筆記

以後拿ListView套版的話，就直接從這邊Copy-Paste

Table 拆版

  <%--以每四個項目為一組--%>
    <asp:ListView ID="ListView1" runat="server" DataKeyNames="CategoryID" 
        DataSourceID="sds_Categories" GroupItemCount="4">
   
       
        <EmptyDataTemplate>
            
                        無資料 
              
        </EmptyDataTemplate>
  
        <GroupTemplate>
            <tr ID="itemPlaceholderContainer" runat="server">
                <td ID="itemPlaceholder" runat="server">
                </td>
            </tr>
        </GroupTemplate>
      
        <ItemTemplate>
           <td>
                CategoryID:
                <asp:Label ID="CategoryIDLabel" runat="server" 
                    Text='<%# Eval("CategoryID") %>' />
                <br />CategoryName:
                <asp:Label ID="CategoryNameLabel" runat="server" 
                    Text='<%# Eval("CategoryName") %>' />
                <br />Description:
                <asp:Label ID="DescriptionLabel" runat="server" 
                    Text='<%# Eval("Description") %>' />
                <br />
           </td>
        </ItemTemplate>
        <LayoutTemplate>
            
                        <table ID="groupPlaceholderContainer" runat="server" border="1" >
                            <tr ID="groupPlaceholder" runat="server">
                            </tr>
                        </table>
               
        </LayoutTemplate>
        
    </asp:ListView>

ul、li拆版

 <%--每3個項目為一組--%>
    <asp:ListView ID="lv_Categories" runat="server" DataKeyNames="CategoryID" DataSourceID="sds_Categories"
        GroupItemCount="3">
        <EmptyDataTemplate>
            無資料
        </EmptyDataTemplate>
        <GroupTemplate>
        <%--每3個項目為一組就結束li--%>
        <li> 
       <%--(必填)項目的預留位置id="itemPlaceHolder" runat="server"--%>
            <li id="itemPlaceHolder" runat="server" />
          </li>
        </GroupTemplate>
        <ItemTemplate>
            <%--每個項目的資料，在這邊若加上li tag的話，會變成每筆項目都有li--%>
             
                <b><%# Eval("CategoryName") %></b>
            
        </ItemTemplate>
        <LayoutTemplate>
        <%--ul為全部資料的Container--%>
            <ul id="groupPlaceholderContainer" runat="server">
                <li id="groupPlaceholder" runat="server"></li>
            </ul>
        </LayoutTemplate>
    </asp:ListView>

ul、li的執行結果：

回首頁