[.NET Webform]_ListView_DataPager使用方式
ASP.NET 3.5 的產物 ListView
基本常用的三種Template，分別為LayoutTemplate、ItemTemplate和EmptyDataTemplate。
LayoutTemplate定義了放置資料的容器，容器可以使用像是Table來裝，換言之，就是指Table Header。
ItemTemplate就是實際上和資料做Binding的容器，有點類似Repeater，換言之，就是指Table Body。
EmptyDataTemplate無資料時候會被套用的樣版面。
其他還有像是AlternatingItemTemplate等樣版
ListView如果layout使用<table>的話，其實長出來跟GridView就沒啥太大差異，
只是ListView的layout可以更加彈性的設計，
使用方式基本上也差不多，最大的差異就是ListView上是Item，而GridView是用Row。
ListView有點包含了像DataList 一般可用於展示清單
或跟GrdiView一樣用於展示表格的資料
ListView基本上可用於取代asp.net weborm中其他涉及資料綁定的控件
(例如:GridView , DataList , Repeater , FormView , DetailsView等等)
ListView可說是更具彈性的上述控件集合體
較為不同的是在設定完DataSource後
預設是不會有外觀的必須自行透過設定自己寫的樣板或內建樣板來設計外觀
ListView本身提供的五種預設外觀
- Grid
- Titled
- BulletedList
- Flow
- SingleRow
其中一種應用情境:
資料存成DataTable後再Bind到ListView的控制項
這裡先產生一個本機端測試用的資料庫
使用北風資料庫中的Customer
https://github.com/microsoft/sql-server-samples/tree/master/samples/databases/northwind-pubs
webconfig
1 2 3 4 | <connectionStrings> <add name="NorthwindConnectionString" connectionString="Data Source=localhost;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient" /> </connectionStrings> |
aspx程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample2.aspx.cs" Inherits="Sample2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:ListView ID="ListView1" runat="server"> <LayoutTemplate> <table id="tbCategory" cellpadding="2" width="640px" border="1" runat="server"> <tr runat="server"> <%--表頭 Table Header--%> <th runat="server">CustomerID</th> <th runat="server">CompanyName</th> <th runat="server">ContactName</th> <th runat="server">ContactTitle</th> <th runat="server">Address</th> <th runat="server">City</th> <th runat="server">Region</th> <th runat="server">PostalCode</th> <th runat="server">Country</th> <th runat="server">Phone</th> <th runat="server">Fax</th> </tr> <%--決定資料長出來後要放在哪裡，沒加會報的錯誤訊息 System.InvalidOperationException: '必須在 ListView 'ListView1' 上指定項目預留位置。 請將控制項的 ID 屬性設定為 "itemPlaceholder" 來指定項目預留位置。 項目預留位置控制項也必須指定 runat="server"。' --%> <tr runat="server" id="itemPlaceholder" /> </table> <%--資料分頁處理--%> <asp:DataPager ID="CustomerDataPager" runat="server" PageSize="10" PagedControlID="ListView1" QueryStringField="pageNum"> <Fields> <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="false" ShowNextPageButton="false" ShowPreviousPageButton="true" PreviousPageText="上一頁" /> <asp:NumericPagerField /> <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="false" ShowNextPageButton="true" ShowPreviousPageButton="false" PreviousPageText="下一頁" /> </Fields> </asp:DataPager> </LayoutTemplate> <ItemTemplate> <tr runat="server"> <td> <asp:Label ID="lblCustomerID" runat="server" Text='<%#Eval("CustomerID")%>'></asp:Label></td> <td> <asp:Label ID="lblCompanyName" runat="server" Text='<%#Eval("CompanyName")%>'></asp:Label></td> <td> <asp:Label ID="lblContractName" runat="server" Text='<%#Eval("ContactName")%>'></asp:Label></td> <td> <asp:Label ID="lblContactName" runat="server" Text='<%#Eval("ContactTitle")%>'></asp:Label></td> <td> <asp:Label ID="lblAddress" runat="server" Text='<%#Eval("Address")%>'></asp:Label></td> <td> <asp:Label ID="lblCity" runat="server" Text='<%#Eval("City")%>'></asp:Label></td> <td> <asp:Label ID="lblRegion" runat="server" Text='<%#Eval("Region")%>'></asp:Label></td> <td> <asp:Label ID="lblPostalCode" runat="server" Text='<%#Eval("PostalCode")%>'></asp:Label></td> <td> <asp:Label ID="lblCountry" runat="server" Text='<%#Eval("Country")%>'></asp:Label></td> <td> <asp:Label ID="lblPhone" runat="server" Text='<%#Eval("Phone")%>'></asp:Label></td> <td> <asp:Label ID="lblFax" runat="server" Text='<%#Eval("Fax")%>'></asp:Label></td> </tr> </ItemTemplate> </asp:ListView> </div> </form> </body> </html> |
aspx.cs程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Sample2 : System.Web.UI.Page { //Ref: //https://dotblogs.com.tw/kevintan1983/2012/03/14/70730 protected void Page_Load(object sender, EventArgs e) { string strConn = System.Configuration.ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString; string strSQL = "select * from Customers"; DataTable dtCustomers = GetDataTable(strConn,strSQL); ListView1.DataSource = dtCustomers; ListView1.DataBind(); } private DataTable GetDataTable(string strConn, string strSQL, int shiftDataSet = -1) { try { using (var conn = new SqlConnection()) { conn.ConnectionString = strConn; conn.Open(); using (var SqlCmd = new SqlCommand()) { SqlCmd.Connection = conn; SqlCmd.CommandText = strSQL; var dt = new DataTable(); int idxDs = 0; shiftDataSet = shiftDataSet - 1; using (var dr = SqlCmd.ExecuteReader()) { var loopTo = shiftDataSet; for (idxDs = 0; idxDs <= loopTo; idxDs++) dr.NextResult(); dt.Load(dr); } return dt; dt = null; } } } catch (Exception ex) { throw; } } } |
效果
Ref:
https://dotblogs.com.tw/kevintan1983/2012/03/14/70730
https://www.codeproject.com/Articles/24570/Complete-ListView-in-ASP-NET-3-5
https://dotblogs.azurewebsites.net/hatelove/2010/12/08/listview-dynamic-hide-columns
留言
張貼留言