GridView自訂分頁樣式#1(以下拉式選單,DropDownList做分頁)與分頁樣版(PagerTemplate)-- TopPagerRow與 BottomPagerRow屬性

摘要:GridView自訂分頁樣式 #1(下拉式選單,DropDownList)與分頁樣版(PagerTemplate)-- TopPagerRow與 BottomPagerRow屬性

我想把 GridView分頁的樣式,改成下拉式選單(DropDownList)。本範例提供 Youtube教學影片

 

 

 

GridView自訂分頁樣式(下拉式選單,DropDownList)與分頁樣版(PagerTemplate)-- TopPagerRow與 BottomPagerRow屬性


預設的 GridView分頁,不是「符號」分頁,不然就是「數字(超連結)」分頁
看膩了!


我想把 GridView 分頁的樣式,改成下拉式選單(DropDownList)

成果如下圖:

 

Youtube教學影片 -- https://youtu.be/B34lVUNro5s

 

 

以前我們自己寫程式,不管是 ASP / PHP / JSP

都可以完成這樣的功能(如下圖)

但現在採用 GridView來做,該怎麼處理??

 

這個範例源自微軟MSDN,

我們可以利用 GridView天生就有的兩個屬性-- TopPagerRow與 B0ttomPagerRow屬性

便可以完成。

從字眼上可以得知,一個是「頂端」的分頁列,另一個則是「底端」的分頁列囉!

 

=============================================================================

主要的HTML畫面設計並不難,

上面第一張圖都有列出來。

 

首先,我們設定好 GridView的「分頁」樣式

分頁的樣式,位置(Position)設定在「頂端(Top),以便搭配 TopPagerRow屬性

 

接著,進入「樣版」,設計您自己的分頁樣版 (PagerTemplate)

 

別忘了,設定下拉式選單,DropDownList,為 AutoPostBack喔!

 

 

最後值得注意的重點,就是

GridView的 DataBound事件。................ 並非  RowDataBound事件喔~

 

完成 DataBinding之後(英文的過去式,即是 DataBound),才會知道 GridView共有幾頁

這時才把頁數,放入「下拉式選單,DropDownList」裡面

 

 

完整的程式碼,微軟網站都有(VB、C#)

http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.gridview.toppagerrow.aspx


   Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As System.EventArgs)
        '-- TopPagerRow的屬性值()
        '-- 型別:     System.Web.UI.WebControls.GridViewRow()
        '-- GridViewRow,表示控制項中的 [頂端]頁面巡覽列。注意!有另外一個 BottomPagerRow 屬性
        Dim pagerRow As GridViewRow = GridView1.TopPagerRow

        Dim DDL As DropDownList = CType(pagerRow.FindControl("DropDownList1"), DropDownList)

        '-- 使用者在 DropDownList選擇的頁數,傳給 GridView來展示這一頁
        GridView1.PageIndex = DDL.SelectedIndex
    End Sub


    '*************************************************
    '  注意這個事件!不是 RowDataBound事件喔~
    '*************************************************
    Protected Sub GridView1_DataBound(sender As Object, e As System.EventArgs) Handles GridView1.DataBound
        '-- TopPagerRow的屬性值()
        '-- 型別:     System.Web.UI.WebControls.GridViewRow()
        '-- GridViewRow,表示控制項中的 [頂端]頁面巡覽列。注意!有另外一個 BottomPagerRow 屬性
        Dim pagerRow As GridViewRow = GridView1.TopPagerRow

        Dim DDL As DropDownList = CType(pagerRow.FindControl("DropDownList1"), DropDownList)
        Dim LB As Label = CType(pagerRow.FindControl("Label1"), Label)

        If Not DDL Is Nothing Then

            '-- 把 GridView的頁數,逐一放進下拉式選單的「子選項」
            For i As Integer = 0 To (GridView1.PageCount - 1)

                ' Create a ListItem object to represent a page.
                Dim pageNumber As Integer = i + 1
                Dim item As ListItem = New ListItem(pageNumber.ToString())

                '-- 把目前 GridView頁數,當成 DropDownList的(頁數)預設值
                If i = GridView1.PageIndex Then
                    item.Selected = True
                End If

                DDL.Items.Add(item)
            Next i

        End If

        If Not LB Is Nothing Then
            '-- GridView「目前」所在的頁數。因為頁數從零算起,所以要加一!
            Dim currentPage As Integer = GridView1.PageIndex + 1

            LB.Text = "Page " & currentPage.ToString() & " of " & GridView1.PageCount.ToString()
        End If
    End Sub

 

範例下載:GridView_TopPagerRow.rar

 

其他關於「自訂分頁」的功能&教學影片:

 

 

 

在這裡補充一下。

因為是在「樣版」裡面,每一個控制項都出現「專屬的ID」了

書本的上集 Ch. 10-3 就有範例說明各種 .FindControl()方法的變化(ASP.NET 4.0專題實務 / 松崗出版)

 

微軟的範例這樣寫

DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");

事實上,這樣寫也可以。子控制項 有了ID,不會抓錯!

DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");

[ASP.NET]FindControl 簡單練習--GridView + CheckBox,點選多列資料(複選刪除) 
YouTube影片  https://youtu.be/LnYXiyQghKs

 

 

上面的範例,其實不難。

如果您不會,就是以下基礎沒打好:

-----------------------------------------------------------------------------------------------------------------------------------

1. 不熟悉工具的操作,如 Visual Studio(或VWD)。也不熟悉 GridView的「樣版」

      這非常基本!!

 

2. 您不懂「如何抓取 GridView身體裡面的「子控制項」。需要透過 .FindControl()方法

      這小有難度,有人帶你一下就會了

 

3. 您不懂 GridView的事件作什麼用?有啥功能?......    何時該用哪個?

    DataBound事件?與 RowDataBound事件的差異在哪裡

    我要修改 GridView外觀,該怎麼著手?

    我有一套完整的「教學」,讓您在幾個範例之後,學會「大型控制項,原來都是這樣玩?一點都不難!!!」

 

4. 您對於基礎控制項(如 Button / DropDownList),根本不熟悉。必備的程式碼與技巧都沒有

    這不怪您。

    市面上的「入門」書、賣給學校的「教科書」,大部分都在 "混"!!!!

          這種最基礎,最重要的東西,都不「充分」提供、不解說。

 

    我的書寫了一百多頁

        就是因為真正寫程式的人,都需要這些東西。

 

真正需要的技巧,一次,只要一次!      都幫您備齊!

-----------------------------------------------------------------------------------------------------------------------------------

2012/3/8 補充

本範例的下一篇文章

GridView自訂分頁樣式 #2 -- 分頁按鈕的 CommandName="Page"與對應的 CommandArgument
http://www.dotblogs.com.tw/mis2000lab/archive/2012/03/08/gridview_pagertemplate_page_commandname.aspx.aspx

相關範例   ListView自訂分頁樣式 - ListView+清單控制項 的 分頁
                  https://dotblogs.com.tw/mis2000lab/2016/01/29/listview_page_findcontrol

 

 

 

評估一下自己的實力,

您看了這麼多本 ASP.NET「入門書

是否懂這些東西?

 

下面這篇文章講到的,都會學到。

內容保證比其他書本與補習班 更深入、充實!

[自我評量表] ASP.NET 我該上什麼課?入門、或是進階?.....以「ASP.NET專題實務」本書為例

 

人家學會哪些心法,可以不斷自修。自我練功??

請看:與其零散地找範例、四處組合一些片段的程式....不如一次學通 ASP.NET的心法!

 

 

我的書,我的(入門班)課程,不會讓您失望!!!

如何選擇補習班?    最貴的就是「 師 資 成本」

[給初學者的話]挑書 與 買書,如何買適合自己的書(電腦書、程式設計入門書)

http://www.dotblogs.com.tw/mis2000lab/archive/2010/11/15/choice_your_style_choice_good_book_for_yourself.aspx

 

 

 

 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學,遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學,遠距教學 (ASP.NET MVC 約 135hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片(5.5小時 / .NET 4.x版)免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片(3小時 / .NET Core 6.0~8.0)免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課