在GridView中的每行加入RadioButton，实现单选一行的功能

     今天晚上在看到有人提这个问题：利用gridview 中的模板列加入一个RadioButton如何实现如果选择了单选的功能像RadionButtont那样一次只能选择一个，正好无事，自己尝试一下，开始通过GridView的RowDataBound事件为RadioButton加上onClientClick事件，将RadioButton的ClientID传到JS端，为JS处理做准备，因为GridView中控件的ID是比较特殊的，所以切记是传入的ClientID，然后通过JS达到RadioButtonList的效果，本以为OK啦，经测试发现，存在一个现在常见的问题，即客户端选择后，提交到服务器后取不到选中的是那一行。简单思考了一下，按照现在常见的解决办法，加入一个Hidden控件纪录下选择的RowIndex，提交到服务器后，从Hidden中取出选中的行号，使用服务器端程序的能够后续的工作，以下是完成的代码：

CS Code：

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public   partial   class  GridViewRadioButton : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        GridView1.DataSource = BuildGridViewDataSource();
        GridView1.DataBind();
    }

    /**//// <summary>
    /// 用来做例子中的数据源
    /// </summary>
    /// <returns></returns>
    private DataTable BuildGridViewDataSource()
    ...{
        DataTable dt = new DataTable();
        dt.Columns.Add("Number");

        DataRow dr = dt.NewRow();
        dr["Number"] = "1000";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["Number"] = "1001";
        dt.Rows.Add(dr);

        return dt;
    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    ...{
        if (e.Row.RowType == DataControlRowType.DataRow)
        ...{
            RadioButton rb = (RadioButton)e.Row.FindControl("RadioButton1");
            if (rb != null)
                rb.Attributes.Add("onclick", "onClientClick('" + rb.ClientID + "','" + e.Row.RowIndex + "')");  //把选中行的RowIndex也传过去，提交后在服务器端取值时用
        }
    }

    /**//// <summary>
    /// 测试取得客户端选中的行号
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Submit_Click(object sender, EventArgs e)
    ...{
        //取得客户端选中是那行，可以根据这个行号进行服务器端的操作，比如存储、删除、更新...
        int rowIndex = Convert.ToInt32(Hidden1.Value);

        L_Msg.Text = "你选择了第 " + rowIndex + "行!";
    }
}

JS Code：

  < script type = " text/javascript " >
    function  onClientClick(selectedId, rowIndex)
    ... {
        //用隐藏控件记录下选中的行号
        var hidden = document.getElementById("Hidden1").value=rowIndex;
        
        var inputs = document.getElementById("<%=GridView1.ClientID%>").getElementsByTagName("input");
        for(var i=0; i <inputs.length; i++)
        ...{
            if(inputs[i].type=="radio")
            ...{
                if(inputs[i].id==selectedId)
                    inputs[i].checked = true;
                else
                    inputs[i].checked = false;
               
            }
        }
   }
      </ script >

Html Code： 

< form  id ="form1"  runat ="server" >
         < div >
        
             < asp:GridView  ID ="GridView1"  runat ="server"  OnRowDataBound ="GridView1_RowDataBound" >
                 < Columns >
                     < asp:TemplateField  HeaderText ="操作" >
                         < HeaderTemplate >
                             &nbsp;
                         </ HeaderTemplate >
                         < ItemTemplate >
                             < asp:RadioButton  ID ="RadioButton1"  runat ="server"  Text ="选择"   />
                         </ ItemTemplate >
                     </ asp:TemplateField >
                 </ Columns >
             </ asp:GridView >
             < br  />< asp:Button  ID ="Submit"  runat ="server"  Text ="提交"  OnClick ="Submit_Click"   />
             < br  />
             < br  />
             < asp:Label  ID ="L_Msg"  runat ="server" ></ asp:Label >
             < input  id ="Hidden1"  type ="hidden"  runat ="server" /></ div >
     </ form >