摘要: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 約 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.主講 事先錄好的影片，並非上課側錄！ 觀看時，有如「一對一」面對面講課。
