使用巢狀的Repeater控制元件顯示分級資料

阿新 • • 發佈：2019-01-25

作者：wincheer 來自：Asp.Net中文專業網

簡介

　　本文描述如何使用巢狀的Repeater 控制元件來顯示分級資料。當然了，你也可以將這一技術應用到其他的列表繫結控制元件上去，比如DataGrid包含DataGrid，DataList包含DataList等等的組合。

　　繫結到父表

　　1.新增一個新的Web Form 到應用程式專案中，名稱為Nestedrepeater.aspx.
　　2.從工具箱託動一個Repeater 控制元件到這個頁面上, 設定其ID 屬性為 parent .
　　3.切換到HTML 檢視.
　　4.選中下列＜itemtemplate＞程式碼,複製到Repeater 控制元件對應的位置。注意，貼上的時候請使用“貼上為html”功能。這些語句包含了資料繫結語法，很簡單。

＜itemtemplate＞
＜b＞＜%# DataBinder.Eval(Container.DataItem, "au_id") %＞＜/b＞＜br＞
＜/itemtemplate＞

　　5.開啟Nestedrepeater.aspx.cs 這個程式碼分離檔案。降下列程式碼新增到Page_Load 事件中，其作用是建立一個到 Pubs (這個資料庫是sql server的演示資料庫。另外在安裝.net framework sdk的時候也會安裝這個資料庫)資料庫的連線，並繫結Authors 表到Repeater 控制元件

public void Page_Load()
{
　SqlConnection cnn = new SqlConnection("server=(local);database=pubs;uid=sa;pwd=;");
　SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors",cnn);
　 DataSet ds = new DataSet();
　 cmd1.Fill(ds,"authors");

　 //這裡將要插入子表的資料繫結

　 parent.DataSource = ds.Tables["authors"];
　 Page.DataBind();
　cnn.Close();
}

　　6.在檔案的頭部新增下面的名稱空間
　　using System.Data.SqlClient;
　　7.根據你自己的情況修改一下連線字串
　　8.儲存並編譯應用程式
　　9.在瀏覽器中開啟這個頁面，輸出結果類似於下面的格式

172-32-1176 
213-46-8915 
238-95-7766 
267-41-2394 
...

　　繫結到子表

　　1.在頁面的HTML檢視中，新增下列程式碼。其目的是增加子Repeater 控制元件到父Repeater的專案模板中，形成巢狀。

＜asp:repeater id="child" runat="server"＞
＜itemtemplate＞
＜%# DataBinder.Eval(Container.DataItem, "["title_id"]") %＞＜br＞
＜/itemtemplate＞
＜/asp:repeater＞

　　2.設定子Repeater 控制元件的DataSource 屬性:

＜asp:repeater ... datasource=’＜%# ((DataRowView)Container.DataItem)
.Row.GetChildRows("myrelation") %＞’＞

　　3.在頁面頂部新增下列指令（請注意，是在.aspx檔案中）:

　　＜%@ Import Namespace="System.Data" %＞

　　在.cs檔案中,將Page_Load中的註釋部分（//這裡將要插入子表的資料繫結）替換成下列程式碼:

SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor",cnn);
cmd2.Fill(ds,"titles");
ds.Relations.Add("myrelation",
ds.Tables["authors"].Columns["au_id"],
ds.Tables["titles"].Columns["au_id"]);

　　4.儲存並編譯應用程式。
　　.在瀏覽器中察看修改後的頁面。顯示格式類似於下面的格式:

172-32-1176 
PS3333 
213-46-8915 
BU1032 
BU2075 
238-95-7766 
PC1035 
267-41-2394 
BU1111 
TC7777 
...

完整的程式碼

Nestedrepeater.aspx 
＜%@ Page Language=C# Inherits="yourprojectname.nestedrepeater" %＞
＜%@ Import Namespace="System.Data" %＞

＜html＞
＜body＞
＜form runat=server＞

＜!-- start parent repeater --＞
＜asp:repeater id="parent" runat="server"＞
　 ＜itemtemplate＞
　　　＜b＞＜%# DataBinder.Eval(Container.DataItem,"au_id") %＞＜/b＞＜br＞

　　　＜!-- start child repeater --＞
　　　＜asp:repeater id="child" datasource=’＜%# ((DataRowView)Container.DataItem)
.Row.GetChildRows("myrelation") %＞’ runat="server"＞
　　　　＜itemtemplate＞
　　　　　　＜%# DataBinder.Eval(Container.DataItem, "["title_id"]")%＞＜br＞
　　　　 ＜/itemtemplate＞
　　　＜/asp:repeater＞
　　　＜!-- end child repeater --＞

　＜/itemtemplate＞
＜/asp:repeater＞
＜!-- end parent repeater --＞

＜/form＞
＜/body＞
＜/html＞
Nestedrepeater.aspx.cs 
using System;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace yourprojectname
{
　public class nestedrepeater : System.Web.UI.Page
　 {
　　　protected System.Web.UI.WebControls.Repeater parent;
　　　public nestedrepeater()
　　　{
　　　　 Page.Init += new System.EventHandler(Page_Init);
　　　}
　　　public void Page_Load(object sender, EventArgs e)
　　　{
　　　　 //Create the connection and DataAdapter for the Authors table.
　　　　 SqlConnection cnn = new SqlConnection("server=(local);database=pubs;uid=sa;pwd=;");
　　　　 SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors",cnn);

　　　　 //Create and fill the DataSet.
　　　　 DataSet ds = new DataSet();
　　　　 cmd1.Fill(ds,"authors");

　　　　 //Create a second DataAdapter for the Titles table.
　　　　 SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor",cnn);
　　　　 cmd2.Fill(ds,"titles");

　　　　 //Create the relation bewtween the Authors and Titles tables.
　　　　 ds.Relations.Add("myrelation",
　　　　 ds.Tables["authors"].Columns["au_id"],
　　　　 ds.Tables["titles"].Columns["au_id"]);

　　　　 //Bind the Authors table to the parent Repeater control, and call DataBind.
　　　　 parent.DataSource = ds.Tables["authors"];
　　　　 Page.DataBind();

　　　　 //Close the connection.
　　　　 cnn.Close();
　　　}
　　　private void Page_Init(object sender, EventArgs e)
　　　{
　　　　 InitializeComponent();
　　　}
　　　private void InitializeComponent()
　　　{ 
　　　　this.Load += new System.EventHandler(this.Page_Load);
　　 }
　 }
}

使用巢狀的Repeater控制元件顯示分級資料

使用巢狀的Repeater控制元件顯示分級資料

使用巢狀 Repeater 控制元件和 Visual C# .Net 顯示分層資料

手機顯示資料的原理：手機通過WebView控制元件顯示網頁資料

安卓Android控制元件ListView巢狀EditText控制元件

Android-ListView中巢狀(ListView)控制元件時item的點選事件不起作用的問題

ajax獲取巢狀JSON，樹形控制元件顯示

asp.net中Repeater中巢狀Repeater來顯示跟外層Repeater資料相關的其他資訊

巢狀Repeater獲取父級控制元件的值

在DataGridView控制元件中設定資料顯示格式

python tkinter控制元件treeview的資料列表顯示的實現_code

jquery-easyui中列表控制元件datagrid沒有資料時顯示列表為空資訊

[C#] 檢索資料庫並用DataGridView 控制元件顯示資料.

winform，DataGridView繫結資料後更改列屬性、動態建立（用一個控制元件顯示多表適用）

.NET dropdownlist控制元件繫結資料後，新增“全部”項，實現功能

Android中使用ImageView控制元件顯示網路圖片

Asp.net Image控制元件顯示Bitmap生成影象

NestedScrollView中巢狀Listview後只顯示一個item

使用TreeView控制元件顯示磁碟檔案

Winform下使用ListView控制元件和ImageList控制元件顯示圖片縮圖

ScoreView巢狀Listview或GradView顯示不全問題解決

使用巢狀的Repeater控制元件顯示分級資料

相關推薦