[主細表 / 主表明細]大腸包小腸/巢狀GridView內部的「子控制項」搭配不同SqlDataSource(留言版)

我做的是一個類似大腸包小腸的留言版功能--


外圍的 (大)GridView1,連結主要的資料表1
內部的 (小)GridView2,連結主要的資料表2

1). 當我在 (大)GridView1點選某一篇文章的時候,
2). 裡面的 (小)GridView2就會出現這篇文章的相關留言。





[習題] [主細表]Gridview內部的「子控制項」,搭配不同SqlDataSource



這個補充的習題,用來回答讀者的疑問。
可以當成書本(上集)的第七~第十章的後續補充。

新出版的「ASP.NET 4.0專題實務 I -- 入門實戰篇 / 松崗出版」,把這些相關範例歸納在第十一章



======================================
[問題]我有一個 GridView,裡面的樣版(Template) 有著其他「子控制項」
      這個子控制項要搭配其他資料表。

======================================
     
我做的是一個類似大腸包小腸的留言版功能--


外圍的 (大)GridView1,連結主要的資料表1
內部的 (小)GridView2,連結主要的資料表2

1).  當我在 (大)GridView1點選某一篇文章的時候,
2).  裡面的 (小)GridView2就會出現這篇文章的相關留言。


執行成果如下圖:




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

HTML畫面設計:


首先,設計一個 外圍的 (大)GridView1,連結主要的資料表1
      搭配 SqlDataSource1
      並且產生「選取」按鈕,也就是一個 Button的 CommandName = "Select"


然後在 (大)GridView1的「樣版(Template)」
編輯樣版內,放置 (小)GridView2,連結主要的資料表2。用來呈現這篇文章的留言。


兩個資料表,互有關連,透過 資料表1的「主索引鍵(PK。Primary Key)」串連在一起。
 (小)GridView2 重要的設定畫面如下:



 

01     <form id="form1" runat="server">
02     <div>
03    
04         <br />
05         選取某一列紀錄之後,進入編輯模式。<br />
06         而且帶出這筆紀錄相關的「讀者留言」。<br />
07         <br />
08         <br />
09         <asp:GridView ID="GridView1" runat="server" AllowPaging="True"
10             AllowSorting="True" AutoGenerateColumns="False" BackColor="White"
11             BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3"
12             DataKeyNames="id" DataSourceID="SqlDataSource1" GridLines="Horizontal">
13             <AlternatingRowStyle BackColor="#F7F7F7" />
14             <Columns>
15                 <asp:CommandField ShowSelectButton="True" />
16                 <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False"
17                     ReadOnly="True" SortExpression="id" />
18                 <asp:BoundField DataField="test_time" HeaderText="test_time"
19                     SortExpression="test_time" />
20                 <asp:BoundField DataField="title" HeaderText="title" SortExpression="title" />
21                 <asp:TemplateField>
22
23                     <EditItemTemplate>
24
25
26                         <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
27                             BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px"
28                             CellPadding="4" DataSourceID="SqlDataSource2" GridLines="Horizontal">
29                             <Columns>
30                                 <asp:BoundField DataField="test_id" HeaderText="test_id"
31                                     SortExpression="test_id" />
32                                 <asp:BoundField DataField="test_time" HeaderText="test_time"
33                                     SortExpression="test_time" />
34                                 <asp:BoundField DataField="article" HeaderText="article"
35                                     SortExpression="article" />
36                                 <asp:BoundField DataField="author" HeaderText="author"
37                                     SortExpression="author" />
38                             </Columns>
39                             <FooterStyle BackColor="White" ForeColor="#333333" />
40                             <HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
41                             <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
42                             <RowStyle BackColor="White" ForeColor="#333333" />
43                             <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
44                             <SortedAscendingCellStyle BackColor="#F7F7F7" />
45                             <SortedAscendingHeaderStyle BackColor="#487575" />
46                             <SortedDescendingCellStyle BackColor="#E5E5E5" />
47                             <SortedDescendingHeaderStyle BackColor="#275353" />
48                         </asp:GridView>
49
50                         <asp:SqlDataSource ID="SqlDataSource2" runat="server"
51                             ConnectionString="<%$ ConnectionStrings:testConnectionString1 %>"
52                             SelectCommand="SELECT [test_id], [test_time], [article], [author] FROM [test_talk] WHERE ([test_id] = @test_id)">
53                             <SelectParameters>
54                                 <asp:ControlParameter ControlID="GridView1" Name="test_id"
55                                     PropertyName="SelectedValue" Type="Int32" />
56                             </SelectParameters>
57                         </asp:SqlDataSource>
58
59
60                     </EditItemTemplate>
61
62                 </asp:TemplateField>
63             </Columns>
64             <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
65             <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
66             <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
67             <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
68             <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
69             <SortedAscendingCellStyle BackColor="#F4F4FD" />
70             <SortedAscendingHeaderStyle BackColor="#5A4C9D" />
71             <SortedDescendingCellStyle BackColor="#D8D8F0" />
72             <SortedDescendingHeaderStyle BackColor="#3E3277" />
73         </asp:GridView>
74
75         <asp:SqlDataSource ID="SqlDataSource1" runat="server"
76             ConnectionString="<%$ ConnectionStrings:testConnectionString1 %>"
77             SelectCommand="SELECT [id], [test_time], [class], [title], [summary], [article], [author] FROM [test]">
78         </asp:SqlDataSource>
79         <br />
80    
81     </div>
82     </form>


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


最後,寫後置程式碼:




C#的寫法,請在最後加上「;」符號即可。

這東西一點都不難,書本的第七~第十章,好好練習幾次,就能有很多變化囉。

 

 

另外一個類似的範例,請參考:

[習 題]GridView樣版內部,改用CheckBox/Radio/DropDownList(單/複選 ...

 新出版的「ASP.NET 4.0專題實務 I -- 入門實戰篇 / 松崗出版」,把這些相關範例歸納在第十一 章

 

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

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----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.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課