在這裡我列出一個標準的 ListView 範例。這個 ListView 具有以下幾個特色: 1. 已提供 Display, Select, Sorting, Paging, Editing 等功能, 2. 提供各個標準架構的 HTML 標記, 未來稍加修改就可以直接套用, 3. 已把光棒功能加入; 如果不喜歡這個配色系統, 自己改掉就可以了, 4. 已修改 DataPager, 使它既可顯示分頁頁碼, 又有前一頁、下一頁、最前頁、最末頁等按鈕 (請自己加入圖檔)...
在 DataPager 中, 可以把共幾筆、共幾頁等資訊一併顯示
在這裡我列出一個經本人精心製作的 ListView 範例。這個 ListView 具有以下幾個特色:
-
已提供 Display, Select, Sorting, Paging, Editing 等功能
-
提供各個標準架構的 HTML 標記, 未來稍加修改就可以直接套用
-
已把光棒功能加入; 如果不喜歡這個配色系統, 自己改掉就可以了
-
已修改 DataPager, 使它既可顯示分頁頁碼, 又有前一頁、下一頁、最前頁、最末頁等按鈕 (請自己加入圖檔)
-
在 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>
</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>
</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 配置寫上去即可。不過, 當然, 你還是可以依循舊有的做法而不必更改。