Home>

Today's development encountered a problem,That is, when a template column containing a radiobutton is added to the gridview,As a result, it runs.. . . . Oh my god, there are multiple radio buttons! Huh! In order to demonstrate my mistake today, I still simulate a functional scenario,What I want to achieve is display a list of student information with radio buttons,Select a line to display detailed information ~!

Problem display

① First prepare a gridview to display the basic information of the students and the most important radio buttons.code show as below:

<asp:gridview runat="server" autogeneratecolumns="false">
    <columns>
    <asp:templatefield>
     <itemtemplate>
     <asp:radiobutton runat="server" />
     </itemtemplate>
    </asp:templatefield>
    <asp:boundfield datafield="sname" headertext="username" />
    <asp:boundfield datafield="ssex" headertext="gender" />
    </columns>
    </asp:gridview>

② Next, prepare the entities that need to bind data.code show as below:

public class student
  {
    public string sid {get;set;}
    public string sname {get;set;}
    public string ssex {get;set;}
  }

③ initialization data,Binding gridview list, the code is as follows:

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="Zhang San", ssex="male"},        new student () {sid="s002", sname="Li Si", ssex="Female"},        new student () {sid="s003", sname="Wang Wu", ssex="male"}
      };
      gridview1.datasource=slist;
      gridview1.databind ();
    }

At this time it looks like there is no problem,But after running, I did find thatThe radio box loses its role,As shown in the figure:

What is the reason?A careful person may say that 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 still invalid!

2. Solving ideas

① Problem analysis

After running,I right-clicked the source code and found this weird problem,It turned out that the gridview will automatically assign a value to the name attribute of the input.Causes the name attribute of each row to be different,Caused the problem of being unselectable,The gridview generated code is as follows:

<table cellspacing="0" rules="all" border="1">
    <tr>
      <th scope="col"></th><th scope="col">username</th><th scope="col">gender</th>
    </tr><tr>
      <td>
     <input type="radio" name="gridview1 $ctl02 $rbstudent" value="rbstudent" />
     </td><td>Zhang San</td><td>male</td>
    </tr><tr>
      <td>
     <input type="radio" name="gridview1 $ctl03 $rbstudent" value="rbstudent" />
     </td><td>Lee Si</td><td>female</td>
    </tr><tr>
      <td>
     <input type="radio" name="gridview1 $ctl04 $rbstudent" value="rbstudent" />
     </td><td>King Five</td><td>Male</td>
    </tr>
  </table>

It can be found that the name property of each radiobutton control is different,Led to the problem of non-radio,So how to solve this culprit?

My first thought was to manually change the name attribute to be uniform.So how to change it?Some people may say that is very simple,Use the onrowdatabound event of the gridview to change the name property of the radiobutton when the row is bound! code show as below:

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'm disappointed again,What is the reason?It is because the radiobutton will have a layer of "span" tag on the outside when the client outputs it. The name attribute is added to the span, and it suffocates. The evidence is as follows:

<span name="student"<input type="radio" name="gridview1 $ctl02 $rbstudent" value="rbstudent" /></span>
     </td><td>Zhang San</td><td>male</td>
    </tr><tr>
      <td>
     <span name="student"<input type="radio" name="gridview1 $ctl03 $rbstudent" value="rbstudent" /></span>
     </td><td>Lee Si</td><td>female</td>
    </tr><tr>
      <td>
     <span name="student"<input type="radio" name="gridview1 $ctl04 $rbstudent" value="rbstudent" /></span>
     </td><td>King Five</td><td>Male</td>

It seems that this idea does not work,I can only use js, so here comes the topic.I decided to traverse the radiobutton in the gridview through js after data binding to change the name property to the same value,Does it work?Try it!

② Problem solving

First, let's implement a js function to get the radiobutton in the gridview and set its name property to a uniform value.For example, "myradio", the code is as follows:

<script type="text/javascript">
    function setradioname () {
      var gv=document.getelementbyid ("gridview1");//Get the client id of the gridview
      var myradio=gv.getelementsbytagname ("input");//Get the inputhtml of the gridview
      for (var i=0;i<myradio.length;i ++) {
        if (myradio [i] .type == "radio") //hidden
        {
          myradio [i] .setattribute ("name", "myradio");
        }
      }
    }
  </script>

Then register and call this script after binding the data,Or write the script at the bottom of the page tab view,code show as below:

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!

  • Previous Event filter with query SELECT * FROM __InstanceModificationEvent WITHIN
  • Next C # implementation of multiple SQL statements with GO instances