GridView 資料列單選功能
GridView 的每筆資料列若需要 RadioButton 做單選的功能,一般直覺只要建立一個 TemplateField 放置 RadioButton 控制項即可達成這樣的功能。
1 <asp:TemplateField HeaderText="選擇" InsertVisible="False">
2 <STRONG><FONT color=#ff0000>
3 <ItemTemplate>
4 <asp:RadioButton ID="RadioButton1" runat="server" />
5 </ItemTemplate>
6 </FONT></STRONG>
7 </asp:TemplateField>
2 <STRONG><FONT color=#ff0000>
3 <ItemTemplate>
4 <asp:RadioButton ID="RadioButton1" runat="server" />
5 </ItemTemplate>
6 </FONT></STRONG>
7 </asp:TemplateField>
可是執行的結果會發現好像不是想像中的樣子,GridView 中的 RadioButton 無法做到資料列單選功能。
這樣為什麼呢?主要的原因是 GridView 中子控制項的命名規則,因為要識別每筆資料列的子控制項,所以 TemplateField 的 RadioButton 輸出的 HTML 碼的 name 都不一致,而 name 不一致無法視為同一群組,故無法做到單選的效果。
1 <input id="GridView1_ctl02_RadioButton1" type="radio" name="GridView1$ctl02$RadioButton1" value="RadioButton1" />
2
3 <input id="GridView1_ctl03_RadioButton1" type="radio" name="GridView1$ctl03$RadioButton1" value="RadioButton1" />
4
5 <input id="GridView1_ctl04_RadioButton1" type="radio" name="GridView1$ctl04$RadioButton1" value="RadioButton1" />
2
3 <input id="GridView1_ctl03_RadioButton1" type="radio" name="GridView1$ctl03$RadioButton1" value="RadioButton1" />
4
5 <input id="GridView1_ctl04_RadioButton1" type="radio" name="GridView1$ctl04$RadioButton1" value="RadioButton1" />
看了以上的結果,可以知道重點就是要想辨法讓 RadioButton 輸出的 name 相同就可以達成需求。所以我們將 RadioButton 控制項換成「HTML 頁籤」的 Input (Radio) HTML 控制項,將 name 屬性設為 RowSelected , value 屬性繫結 ProductID 欄位 (識別欄位)。
1 <asp:TemplateField HeaderText="選擇" InsertVisible="False">
2 <ItemTemplate>
3 <input id="Radio" type="radio" name="<STRONG><FONT color=#ff0000>RowSelected</FONT></STRONG>" value='<FONT color=#ff0000><STRONG><%# Eval("ProductID") %></STRONG></FONT>' />
4 </ItemTemplate>
5 </asp:TemplateField>
2 <ItemTemplate>
3 <input id="Radio" type="radio" name="<STRONG><FONT color=#ff0000>RowSelected</FONT></STRONG>" value='<FONT color=#ff0000><STRONG><%# Eval("ProductID") %></STRONG></FONT>' />
4 </ItemTemplate>
5 </asp:TemplateField>
執行結果查看 HTML 原始碼,可以輸出的 name 都相同,就可以達到單選的功能。
1 <input id="Radio" type="radio" name="RowSelected" value='1' />
2
3 <input id="Radio" type="radio" name="RowSelected" value='2' />
4
5 <input id="Radio" type="radio" name="RowSelected" value='3' />
2
3 <input id="Radio" type="radio" name="RowSelected" value='2' />
4
5 <input id="Radio" type="radio" name="RowSelected" value='3' />
接下來的問題就是 PostBack 後伺服端如何得知選了那筆資料,form 中的資料會透過 Request.Form 傳給伺服端。在頁面上放置一個按鈕撰寫取得使用者選取資料列的相關程式碼,其中 Request.Form("RowSelected") 的值即為選取資料列的識別值。
1 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
2 Dim sProductID As String
3 sProductID = Me.Request.Form("RowSelected")
4 Me.Response.Write("Select ProdustID: " & sProductID)
5 End Sub
2 Dim sProductID As String
3 sProductID = Me.Request.Form("RowSelected")
4 Me.Response.Write("Select ProdustID: " & sProductID)
5 End Sub