Add RadioButton to ASP.net GridView solution _ Practical Tips

The problem with development today is that when the GridView is added a template column containing RadioButton, the result is run ... Oh, my God, the radio button can be more than a choice! Oh, that's embarrassing! To illustrate my mistake today, I'm going to simulate a feature scene, and the feature I want to implement is to display a list of student information that contains a radio button, and then select a line to display the details ~!

1. Problem presentation

① first prepares a GridView to display the student's basic information with the most important radio buttons, the following code:

 <asp:gridview id= "GridView1" runat= "Server" autogeneratecolumns= "false" >
    <Columns>
    <asp: templatefield>
     <ItemTemplate>
     <asp:radiobutton id= "rbstudent" runat= "server"/>
     </ itemtemplate>
    </asp:TemplateField>

    <asp:boundfield datafield= "sname" headertext= "username"/>
    <asp:boundfield datafield= "Ssex" headertext= "gender"/>
    </Columns>
    </asp:GridView>

② next prepare the entity to which you want to bind the data, the following code:

public class Student
  {public
    string SID {get; set;}
    public string Sname {get; set;}
    public string Ssex {get; set;}
  }

③ initializes the data and binds the GridView list with the following code:

protected void Page_Load (object sender, EventArgs e)
    {
      if (! IsPostBack)
      {this
        . Bindgridview ();
      }

    public void Bindgridview ()
    {
      list<student> slist = new List<student> ()
      {
        new Student (  {sid = "s001", Sname= "John", Ssex= "Man"},
        new Student () {sid = "s002", sname= "Dick", ssex= "female"},
        new Student () {sid = "S003", sname= "Harry", ssex= "male"}
      ;

      Gridview1.datasource = slist;
      Gridview1.databind ();
    }

It doesn't seem to be a problem at this time, but as soon as I'm running I do find that the checkbox loses its role, as shown in the figure:

What's the reason? The careful person may say RadioButton you do not set the GroupName property so it does not belong to a group, but the fact that I set this property is not valid!

2. Solving Ideas

Analysis of ① problems

After running, I right-click on the source code found this strange problem, it is the GridView will automatically give input the Name property assignment, resulting in each row of the Name property is not the same, resulting in a problem can not be selected, the GridView generated code as follows:

 <table cellspacing= "0" rules= "All" border= "1" id= "GridView1" style= " Border-collapse:collapse; " > <tr> <th scope= "col" > </th><th scope= "col" > User name </th><th scope= "Col" , gender </th> </tr><tr> <td> <input id= "GRIDVIEW1_RBSTUDENT_0" type= "Radio" name= "Gri" Dview1$ctl02$rbstudent "value=" Rbstudent "/> </td><td> John </td><td> men </td> </tr& gt;<tr> <td> <input id= "gridview1_rbstudent_1" type= "Radio" Name= "Gridview1$ctl03$rbstudent" Val Ue= "Rbstudent"/> </td><td> dick </td><td> women </td> </tr><tr> <td&
     Gt <input id= "Gridview1_rbstudent_2" type= "Radio" name= "Gridview1$ctl04$rbstudent" value= "rbstudent"/> </TD&G T;<td> Harry </td><td> men </td> </tr> </table> 

You can see that each RadioButton control's Name property is different, resulting in a problem that cannot be selected, so how do you solve the culprit?

My first thought was to manually change the name attribute to uniform, so how do I change it? Some people may say that it's very simple, use the Onrowdatabound event of the GridView to speak RadioButton's Name property when the line is bound! The code is as follows:

protected void GridView1_RowDataBound (object sender, GridViewRowEventArgs e)
    {
      if (E.row.rowtype = = Datacontrolrowtype.datarow)
      {
        RadioButton RADIOBUTTIONRB = (RadioButton) e.row.findcontrol ("Rbstudent");
        radiobuttionrb.attributes[' name ' = ' student ';
      }
    }

But after running, I was disappointed again, what reason? It's because RadioButton has a layer of <SPAN> tag outside the client output, and the name attribute is added to the SPAN, and it's dead. The evidence is as follows:

 <span name=" student "><input id=" GRIDVIEW1_RBSTUDENT_0 "type=" Radio "name=" Gridview1$ctl02$rbstudent "value=" rbstudent "/></span> </td><td> John </td><td> Men < /TD> </tr><tr> <td> <span name= "student" ><input id= "gridview1_rbstudent_1" Ty Pe= "Radio" name= "Gridview1$ctl03$rbstudent" value= "rbstudent"/></span> </td><td> Dick </td ><td> women </td> </tr><tr> <td> <span name= "student" ><input id= "Gridvi Ew1_rbstudent_2 "type=" Radio "name=" Gridview1$ctl04$rbstudent "value=" rbstudent "/></span> </td>< td> Harry </td><td> male </td> 

It seems that this idea does not work ah, can only use JS, so the topic came, I decided to data binding through the RadioButton after the GridView to change the Name property to the same value, OK? Try it!
② Problem Solving
First to implement a JS function, to get the traversal of the RadioButton in the GridView and set its Name property to a uniform value, such as "MyRadio", the code is as follows:

 <script type= "Text/javascript" >
    function Setradioname () {
      var gv = document.getElementById ("GridView1" ); Gets the client id
      var myradio = gv.getelementsbytagname ("input") of the GridView;//Get inputhtml for the GridView for
      (var i = 0; i < Myradio.length; i++) {
        if (Myradio[i].type = = ' Radio ')//hidden
        {
          myradio[i].setattribute ("name", "MyRadio");
        }
    }
  </script>

Next, register to call the script after binding the data, or write the script to the bottom of the page label view, the following code:

 protected void Page_Load (object sender, EventArgs e)
    {
      if (! IsPostBack)
      {this
        . Bindgridview ();
        Scriptmanager.registerstartupscript (this, this.) GetType (), Guid.NewGuid (). ToString (),
          "Setradioname ()", true);
      }
    

The problem is solved!

After some efforts to solve the problem finally, the whole problem analysis thinking clearly, hope can really help to solve similar problems, there are good ideas, welcome to discuss together