GridView做成 3X3 九宮格、棋盤式畫面(類似ListView或PChome首頁)

摘要:GridView做成 3X3 九宮格、棋盤式畫面(類似ListView或PChome首頁)


 

 

在論壇上,看見一位朋友的發問:

他想要把 GridView做成 3X3 九宮格、棋盤式畫面(類似ListView或PChome首頁),如下圖。

 

每一列,有三筆記錄。

設定每一頁的 PageSize屬性 = 3 就能完成  3 X 3。

 

 

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

上圖應該改用 ListView來做最簡單,一下子就好了

.NET 3.5 (VS 2008)以後都有這個控制項。

(點選上圖,可以連到另一個範例 -- FileUpload + ListView,做出PChome那種圖片型的、棋盤式首頁)

 

如果您堅持要用 GridView來做,會看見下圖的困難點

    沒錯。GridView每一列只有「一筆記錄」。

    不可能像是上圖,一列有「三筆記錄」

 

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

 

這個範例會用到的技巧,在我出版的書本的「上集」通通用過了

只要有學通,就能串在一起。

 

HTML畫面設計:

第一,只留一個欄位的空間,然後轉成樣板

           (書本上集,第七、八章)

 

第二,自己放一個HTML表格,我做成一列有三個儲存格,便能一列放「三筆記錄」

           (書本上集,第十二章 Repeater有簡單介紹)

 

第三,注意到我的 Label,他們的ID都經過設計,故意做成「流水號」

          (書本上集的,批次上傳、聊天室,都有介紹這個技巧)

 

 

 

後置程式碼比較亂:

   protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {

            if (e.Row.RowIndex == 0)
            {
                Session["RecordNo"] = e.Row.RowIndex;
            }

            int RecordNo = Convert.ToInt32(Session["RecordNo"]);
            int StartNo = RecordNo + 1;
            int EndNo = RecordNo + 3;

            //=======微軟SDK文件的範本=======
            //----上面已經事先寫好NameSpace --  using System.Web.Configuration; ----     
            //----或是寫成下面這一行 (連結資料庫)----
            SqlConnection Conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["放在Web.Config檔裡面的連結字串"].ConnectionString);
            SqlDataReader dr = null;
            SqlCommand cmd = new SqlCommand("Select id, title, author from (select ROW_NUMBER() OVER(ORDER BY id) AS 'RowNo', * from test) as t where t.RowNo between " + StartNo + " and " + EndNo, Conn);
            //***使用SQL指令進行分頁(ROW_NUMBER())***

            try
            {
                //== 第一,連結資料庫。
                Conn.Open();
                //== 第二,執行SQL指令。
                dr = cmd.ExecuteReader();

                //==第三,自由發揮,把執行後的結果呈現到畫面上。
                int i = 1;
                while (dr.Read())
                {   //使用流水號當作 Label的ID,書本上集介紹過兩次。
                    Label Ax = (Label)e.Row.FindControl("LabelA" + i);
                    Ax.Text = dr["id"].ToString();
                    Label Bx = (Label)e.Row.FindControl("LabelB" + i);
                    Bx.Text = dr["title"].ToString();
                    Label Cx = (Label)e.Row.FindControl("LabelC" + i);
                    Cx.Text = dr["author"].ToString();

                    Session["RecordNo"] = Convert.ToInt32(Session["RecordNo"]) + 1;
                    i++;
                }
            }
            catch (Exception ex)
            {   
                Response.Write("Error Message----  " + ex.ToString() + "
	"); } 
finally { // == 第四,釋放資源、關閉資料庫的連結。
if (dr != null) { cmd.Cancel(); dr.Close(); } //---- Close the connection when done with it. if (Conn.State == ConnectionState.Open) { Conn.Close(); Conn.Dispose(); } } } 

 

 

 

嚴格來說,用到了書本上集「第十一章」 GridView 的 RowDataBound事件與RowCreated事件

書本上集「第十章」,  .FindControl()方法

 

也用到了ADO.NET自己撰寫分頁程式(SQL指令的 Row_Number() )

然後自己用國小數學,做了一點小搭配就好了。

 

 

稍微改一下,應該可以讓這功能有「分頁」功能。

 

 

學通了,信手拈來,東拼西湊都有成品!

沒學通?  每天庸庸碌碌 四處抄人家零散的程式碼(還組不起來、不會動?)

 

學通 ASP.NET (Web Form)快速開發,就是這麼簡單

一個好老師、一次好課程、一本好書,搞定!!

 

 

 

 

 

 

 

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

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

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

線上課程教學,遠距教學 (ASP.NET MVC 約 140hr)  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.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課