ASP.NET DataGrid 單選框實作：突破 RadioButton 分組限制

在 ASP.NET DataGrid 中使用 `` 時，常遇到一個經典問題：由於 ASP.NET 會自動修改 `name` 屬性以確保伺服器端唯一性，導致所有 RadioButton 無法在客戶端形成同一個互斥群組。本文提供一個經典且實用的解決方案：改用原生 HTML `` 搭配伺服器端資料繫結語法，完美實現單選功能。

核心技巧

• 使用 `` 固定相同 `name`，確保瀏覽器原生分組
• 透過 `<%# ... %>` 資料繫結語法動態設定 `value` 與 `checked` 狀態
• 伺服器端用 `Request.Form("rdo")` 取得選中值

完整實作程式碼

ASPX 頁面標記

<form id="Form1" method="post" runat="server">
  <asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False">
    <Columns>
      <asp:TemplateColumn>
        <ItemTemplate>
          <input type="radio" name="rdo" 
            <%# GetChecked(DataBinder.Eval(Container, "DataItem")) %> 
            value='<%# DataBinder.Eval(Container, "DataItem") %>'>
          <asp:Label runat="server" 
            Text='<%# DataBinder.Eval(Container, "DataItem") %>' 
            ID="Label1"></asp:Label>
        </ItemTemplate>
      </asp:TemplateColumn>
    </Columns>
  </asp:DataGrid><br>
  <asp:Button id="btnOk" runat="server" Text="確定"></asp:Button>
</form>

後台程式碼

' 頁面載入綁定資料
Dim arr As New ArrayList
arr.Add("新聞綜合")
arr.Add("綜藝")
arr.Add("電影")
arr.Add("教育")
arr.Add("戲劇")
arr.Add("軍事")
arr.Add("體育")
DataGrid1.DataSource = arr
DataGrid1.DataBind()

' 確定按鈕取得選中值
Protected Sub btnOk_Click(sender As Object, e As EventArgs)
    Response.Write(Request.Form("rdo"))
End Sub

' 判斷是否為當前選中項
Public Function GetChecked(ByVal str As String) As String
    If str = Request.Form("rdo") Then
        Return "checked"
    Else
        Return ""
    End If
End Function

關鍵點解析

1. name="rdo"：所有列共用同一 name，瀏覽器自動實現單選互斥
2. value 綁定資料項：提交表單時可直接取得該列代表的值
3. GetChecked 函數：回傳 "checked" 字串，配合內嵌語法 `<%# %>` 實現回發後保持選中狀態
4. Request.Form("rdo")：標準表單取值方式，無需尋找控制項

進階應用建議

• 若需攜帶主鍵 ID 而非顯示文字，可將 `value` 綁定 `DataItem.ID`，文字顯示 `DataItem.Name`
• 搭配 JavaScript 可即時取得選中值，無需回發
• 大量資料時建議改用 `GridView` + `RadioButtonList` 或前端框架處理

此技巧雖屬經典 WebForms 時代產物，但理解其原理有助於掌握伺服器控制項與客戶端 HTML 交互的本質，維護舊專案時極具參考價值。