在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>