GridView 資料列單選功能

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>

可是執行的結果會發現好像不是想像中的樣子,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" />

看了以上的結果,可以知道重點就是要想辨法讓 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>

執行結果查看 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' />

接下來的問題就是 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

ASP.NET 魔法學院