在論壇上,看見一位朋友的發問:
他想要把 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.主講 事先錄好的影片,並非上課側錄! 觀看時,有如「一對一」面對面講課。