Dev 2Share

在這裡我列出一個經本人精心製作的 ListView 範例。這個 ListView 具有以下幾個特色:

1. 已提供 Display, Select, Sorting, Paging, Editing 等功能
2. 提供各個標準架構的 HTML 標記, 未來稍加修改就可以直接套用
3. 已把光棒功能加入; 如果不喜歡這個配色系統, 自己改掉就可以了
4. 已修改 DataPager, 使它既可顯示分頁頁碼, 又有前一頁、下一頁、最前頁、最末頁等按鈕 (請自己加入圖檔)
5. 在 DataPager 中, 可以把共幾筆、共幾頁等資訊一併顯示

.aspx

<asp:ListView ID="lvProducts" runat="server" DataSourceID="odsProducts" DataKeyNames="Product"
    OnDataBound="lvProducts_DataBound" OnPagePropertiesChanged="lvProducts_PagePropertiesChanged">
    <LayoutTemplate>
        <table id="Table1" runat="server" width="100%">
            <tr id="Tr1" runat="server">
                <td id="Td1" runat="server">
                    <table id="itemPlaceholderContainer" runat="server" border="0" cellpadding="3"
                        class="lvHeader" width="100%">
                        <tr id="Tr2" runat="server" style='background-color: #000080; color: #CCFFFF;
                                text-align: center;">
                            <th id="Th0" runat="server">
                                Sel
                            </th>
                            <th id="Th1" runat="server" style='width: 34px;'>
                                產品類別
                            </th>
                            <th id="Th2" runat="server">
                                PID
                            </th>
                            <th id="Th3" runat="server" style='width: 80px;'>
                                產品名稱
                            </th>
                            <th id="Th4" runat="server">
                                註解
                            </th>
                            <th id="Th5" runat="server" style='width: 34px;'>
                                編輯
                            </th>
                        </tr>
                        <tr id="itemPlaceholder" runat="server">
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="Tr3" runat="server">
                <td id="Td2" runat="server" class="lvItem">
                    <asp:DataPager ID="DataPager1" runat="server">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Image" ShowFirstPageButton="True"
                                FirstPageText="第一頁" ShowNextPageButton="False"
                                ShowPreviousPageButton="False" FirstPageImageUrl="~/Images/First.gif" />
                            <asp:NextPreviousPagerField ButtonType="Image" ShowNextPageButton="False"
                                PreviousPageText="上一頁" ShowPreviousPageButton="True"
                                PreviousPageImageUrl="~/Images/Previous.gif" />
                            <asp:NumericPagerField ButtonCount="10" ButtonType="Button" />
                            <asp:NextPreviousPagerField ButtonType="Image" ShowNextPageButton="True"
                                NextPageText="下一頁" ShowPreviousPageButton="False"
                                NextPageImageUrl="~/Images/Next.gif" />
                            <asp:NextPreviousPagerField ButtonType="Image" ShowLastPageButton="True"
                                LastPageText="最後一頁" ShowNextPageButton="False"
                                ShowPreviousPageButton="False" LastPageImageUrl="~/Images/Last.gif" />
                        </Fields>
                    </asp:DataPager>
                    合計
                    <asp:Label runat="server" ID="lbCount" Text="0" />
                    筆 共
                    <asp:Label runat="server" ID="lbPages" Text="1" />
                    頁
                </td>
            </tr>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr class="lvItem"
            onmouseover="this.style.backgroundColor='#F5EBFF';"
            onmouseout="this.style.backgroundColor='#F7F6F3';">
            <td style='text-align: center;'>
                <asp:ImageButton ID="SelectButton" runat="server" CommandName="Select"
                    ImageUrl="~/Images/RightArrowAlt.gif" AlternateText="選取此列"
                    ToolTip="選取此列" />
            </td>
            <td style='text-align: center;'>
                <asp:Label ID="ProductLabel" runat="server" Text='<%# Eval("Product") %>' />
            </td>
            <td style='text-align: center;'>
                <asp:Label ID="PIDLabel" runat="server" Text='<%# Eval("PID") %>' />
            </td>
            <td style='text-align: left;'>
                <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>' />
            </td>
            <td style='text-align: left;'>
                <asp:Label ID="CommentsLabel" runat="server" Text='<%# Eval("Comments") %>' />
            </td>
            <td runat="server" id="td7" style='text-align: center;'>
                <asp:ImageButton ID="EditButton" runat="server" CommandName="Edit"
                    ImageUrl="~/Images/Edit.gif" AlternateText="編輯此列" ToolTip="編輯此列" />
            </td>
        </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <tr class="lvAlt"
            onmouseover="this.style.backgroundColor='#F5EBFF';"
            onmouseout="this.style.backgroundColor='#FFFFFF';">
            <td style='text-align: center;'>
                <asp:ImageButton ID="SelectButton" runat="server" CommandName="Select"
                    ImageUrl="~/Images/RightArrowAlt.gif" AlternateText="選取此列"
                    ToolTip="選取此列" />
            </td>
            <td style='text-align: center;'>
                <asp:Label ID="ProductLabel" runat="server" Text='<%# Eval("Product") %>' />
            </td>
            <td style='text-align: center;'>
                <asp:Label ID="PIDLabel" runat="server" Text='<%# Eval("PID") %>' />
            </td>
            <td style='text-align: left;'>
                <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>' />
            </td>
            <td style='text-align: left;'>
                <asp:Label ID="CommentsLabel" runat="server" Text='<%# Eval("Comments") %>' />
            </td>
            <td runat="server" id="td7" style='text-align: center;'>
                <asp:ImageButton ID="EditButton" runat="server" CommandName="Edit"
                    ImageUrl="~/Images/Edit.gif" AlternateText="編輯此列" ToolTip="編輯此列" />
            </td>
        </tr>
    </AlternatingItemTemplate>
    <SelectedItemTemplate>
        <tr class="lvItemSelect"
            onmouseover="this.style.backgroundColor='#F5EBFF';"
            onmouseout="this.style.backgroundColor='#FFCCFF';">
            <td style='text-align: center;'>
                <asp:ImageButton ID="SelectButton" runat="server" CommandName="Select"
                    ImageUrl="~/Images/RightArrowAlt.gif" AlternateText="選取此列"
                    ToolTip="選取此列" />
            </td>
            <td style='text-align: center;'>
                <asp:Label ID="ProductLabel" runat="server" Text='<%# Eval("Product") %>' />
            </td>
            <td style='text-align: center;'>
                <asp:Label ID="PIDLabel" runat="server" Text='<%# Eval("PID") %>' />
            </td>
            <td style='text-align: left;'>
                <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>' />
            </td>
            <td style='text-align: left;'>
                <asp:Label ID="CommentsLabel" runat="server" Text='<%# Eval("Comments") %>' />
            </td>
            <td runat="server" id="td7" style='text-align: center;'>
                <asp:ImageButton ID="EditButton" runat="server" CommandName="Edit"
                    ImageUrl="~/Images/Edit.gif" AlternateText="編輯此列" ToolTip="編輯此列" />
            </td>
        </tr>
    </SelectedItemTemplate>
    <EmptyDataTemplate>
        <table id="Table1" runat="server" class="lvEmpty">
            <tr>
                <td>
                    No data was returned.
                </td>
            </tr>
        </table>
    </EmptyDataTemplate>
    <InsertItemTemplate>
        <tr class="lvInsert">
            <td>
                &nbsp;
            </td>
            <td>
                產品類別:
                <asp:TextBox ID="ProductTextBox" runat="server" Text='<%# Bind("Product") %>' />
            </td>
            <td>
                PID:
                <asp:TextBox ID="PIDTextBox" runat="server" Text='<%# Bind("PID") %>' />
            </td>
            <td>
                產品名稱:
                <asp:TextBox ID="ProductNameTextBox" runat="server" Text='<%# Bind("ProductName") %>' />
                <br />
                註解:
                <asp:TextBox ID="CommentsTextBox" runat="server" Text='<%# Bind("Comments") %>' />
            </td>
            <td>
                <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="寫入" />
                <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
            </td>
        </tr>
    </InsertItemTemplate>
    <EditItemTemplate>
        <tr class="lvEdit">
            <td>
                &nbsp;
            </td>
            <td style='text-align: center;'>
                產品類別:
                <asp:Label ID="ProductLabel" runat="server" Text='<%# Eval("Product") %>' />
            </td>
            <td style='text-align: center;'>
                PID:
                <asp:TextBox ID="PIDTextBox" runat="server" Text='<%# Bind("PID") %>' Width="18px" />
            </td>
            <td style='text-align: center;'>
                產品名稱:
                <asp:TextBox ID="ProductNameTextBox" runat="server" Text='<%# Bind("ProductName") %>'
                    Width="100%" />
            </td>
            <td style='text-align: center;'>
                註解:
                <asp:TextBox ID="CommentsTextBox" runat="server" Text='<%# Bind("Comments") %>'
                    Width="96%" Rows="2" TextMode="MultiLine" />
            </td>
            <td>
                <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="寫回" />
                <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
            </td>
        </tr>
    </EditItemTemplate>
</asp:ListView>

<asp:ObjectDataSource ID="odsProducts" runat="server" TypeName="dsProductTableAdapters.tblProductTitlesTableAdapter"
    OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" InsertMethod="Insert" UpdateMethod="Update"
    DeleteMethod="Delete">
    <InsertParameters>
        <asp:Parameter Name="Product" Type="Int16" />
        <asp:Parameter Name="CustId" Type="Int16" />
        <asp:Parameter Name="ProductName" Type="String" />
        <asp:Parameter Name="Comments" Type="String" />
    </InsertParameters>
    <UpdateParameters>
        <asp:Parameter Name="CustId" Type="Int16" />
        <asp:Parameter Name="ProductName" Type="String" />
        <asp:Parameter Name="Comments" Type="String" />
        <asp:Parameter Name="Original_Product" Type="Int16" />
    </UpdateParameters>
    <DeleteParameters>
        <asp:Parameter Name="Original_Product" Type="Int16" />
    </DeleteParameters>
</asp:ObjectDataSource>

.aspx.cs

protected void lvProducts_DataBound(object sender, EventArgs e)
{
    if (rows > 0)
    {
        Label lbCount = (Label)lvProducts.FindControl("lbCount");
        Label lbPages = (Label)lvProducts.FindControl("lbPages");
        DataPager dp = (DataPager)lvProducts.FindControl("DataPager1");
        if (dp != null)
        {
            dp.PageSize = rows;
            if (lbCount != null)
                lbCount.Text = dp.TotalRowCount.ToString();
            int pageCount = (int)Math.Ceiling((double)dp.TotalRowCount / (double)dp.PageSize);
            if (lbPages != null)
                lbPages.Text = pageCount.ToString();
        }
    }
}

protected void lvProducts_PagePropertiesChanged(object sender, EventArgs e)
{
    lvProducts.SelectedIndex = -1;
} 

在本範例中, 我使用一個 ObjectDataSource, 其 Data Layer 是採用一個 DataSet。你不一定要使用 ObjectDataSource, 使用 SqlDataSource 或其它 DataSource 都可以。其次, 如果你要使用這個 ListView 搭配另一個 ListView/GridView/FormView/DetailsView 等等來做 Master/Detail 應用, 只需要再加入一個 SelectedIndexChanged 即可。

從 ASP.NET 4.0 開始, LayoutTemplate 已經不一定要使用了 (現在 ItemTemplate 是唯一必須存在的 template)。我們可以在直接省略 LayoutTemplate, 而在各個 Template 裡把 HTML 配置寫上去即可。不過, 當然, 你還是可以依循舊有的做法而不必更改。

---

Dev 2Share @ 點部落