Method of using RadioButton radio button in asp. net GridView
- 2021-08-03 10:03:06
- OfStack
This article illustrates the use of the RadioButton radio button in asp. net GridView. Share it for your reference, as follows:
I used three methods to make radio buttons in GridView
Method 1: Add the server-side control RadioButton to the template column of GridView, and use js to control radio selection
Add RadioButton to the template column
<script type="text/javascript">
function setRadio(nowRadio)
{
var myForm,objRadio;
myForm=document.forms[0];
/**////alert(myForm);
for(var i=0;i<myForm.length;i++)
{
if(myForm.elements[i].type=="radio")
{
objRadio=myForm.elements[i];
/**////alert(objRadio.name);
if(objRadio!=nowRadio && objRadio.name.indexOf("GridView1")>-1 && objRadio.name.indexOf("RadioButton1")>-1)
{
alert(objRadio.name);
if(objRadio.checked)
{
objRadio.checked=false;
}
}
}
}
}
</script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowHeader="False" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton ID="RadioButton1" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text=" Choose an option " OnClick="Button1_Click"/>
<asp:Label ID="Label1" runat="server"></asp:Label>
The preceding section of code is to control the radio js, here, I use the method of traversing all the controls on the page, adding conditions, that is, the red judgment, only control GridView1 id is the radio button generated by RadioButton1
This approach requires binding client events
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
// To each RadioButton1 Binding setRadio Events
try
{
((RadioButton)e.Row.FindControl("RadioButton1")).Attributes.Add("onclick", "setRadio(this)");
}
catch (Exception)
{ }
}
The method to get the value is to traverse every 1 row of GridView and get the selected control
protected void Button1_Click(object sender, EventArgs e)
{
// Use the template column to add RadioButton
Label1.Text = "";
foreach (GridViewRow gvr in GridView1.Rows)
{
try
{
if (((RadioButton)gvr.FindControl("RadioButton1")).Checked)
{
Label1.Text = " The currently selected " + Convert.ToString(gvr.RowIndex + 1) + " A ";
break;
}
}
catch (Exception)
{ }
}
if (Label1.Text.Length == 0)
{
Label1.Text = " No items selected ";
}
}
This method uses traversal on both the client and server sides
Method 2: Add the html control Radio to the template column of GridView
Adding the html control Radio to the template column
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" ShowHeader="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<input type="radio" name="myRadio" value='<%# Container.DataItemIndex.ToString() %>'>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="Button2" runat="server" Text=" Choose an option " OnClick="Button2_Click" />
<asp:Label ID="Label2" runat="server"></asp:Label>
<script type="text/javascript">
function setNowRadio(v)
{
//alert(v);
var myForm,objRadio;
myForm=document.forms[0];
for(var i=0;i<myForm.length;i++)
{
if(myForm.elements[i].type=="radio")
{
objRadio=myForm.elements[i];
//alert(objRadio.name);
//alert(objRadio.value);
if(objRadio.value==v)
{
objRadio.checked=true;
}
}
}
}
<asp:Literal ID="jsLiteral" runat="server"></asp:Literal>
</script>
The preceding sentence < input type="radio" name="myRadio" value=' < %# Container.DataItemIndex.ToString() % > ' > I bind the current line in his value value, because when operating in GridView, we often use the selected line number. With the line number, we can take the DataKeys of GridView
Because the html control is used here, Request. Form should be used when fetching data
protected void Button2_Click(object sender, EventArgs e)
{
// Use the template column to add html Control Radio
if (Request.Form["myRadio"] == null)
{
Label2.Text = " No items selected ";
jsLiteral.Text = "";//*****
}
else
{
string value;
value = Request.Form["myRadio"].ToString();
Label2.Text = " The currently selected " + Convert.ToString(Convert.ToInt16(value) + 1) + " A ";
jsLiteral.Text = "setNowRadio('" + value + "');";//*****
}
}
This method itself can complete the task without traversing the control
It is because the client control is used, so the selected value cannot be written into viewstate. If there is a page return, this value cannot be retained. If you want to keep this value after the page return, you should use js. Look at the code with **** in the comment. I chose to set up an setNowRadio (), and then add Literal control
In every return, um, because I only have the value to return, so I wrote it in the value, in fact, it should be written in the Page_Load event, plus the judgment of if (IsPostBack), that is, every return, we must take the value of this myRadio, execute the function, and re-select the selected item
In this setNowRadio, traversal is used again, that is, it traverses less things than the first method
Method 3: Use RadioButtonList simulation table directly
Using RadioButtonList
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
</asp:RadioButtonList>
<asp:Button ID="Button3" runat="server" Text=" Choose an option " OnClick="Button3_Click" />
<asp:Label ID="Label3" runat="server"></asp:Label>
What I am simulating here is a thing like a forum that shows the voting page, that is, giving a radio box, writing options behind it, and then a picture, and then showing how many votes there are
private void SetListItem(RadioButtonList rbt)
{
// To RadioButtonList Add a few ListItem Which is used to test the data
string item, space, info;
int per;
for (int i = 0; i < 3; i++)
{
per = 5;
item = "<div style='float:left; width:300px;'> No. 1 " + Convert.ToString(i + 1) + " Items </div>";
space = Convert.ToString(per * 3.50);
space = "<div style='float:left; background-color:MistyRose;border-color:Silver;border-width:1px;border-style:solid; width:" + space + "px;'></div>";
info = "<div style='float:left; width:70px;'> " + per.ToString() + "% 5 Ticket </div>";
info = item + space + info;
RadioButtonList1.Items.Add(new ListItem(info, ""));
}
}
This method solves the problem of single selection and the problem of backhaul, because RadioButtonList originally generated a set of Radio controls, that is, it was very troublesome when simulating, and I used a lot of div+css here, that is, I still can't make the generated radio and options put on the same line
Here is one line in the generated html code:
<tr>
<td>
<input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="" />
<label for="RadioButtonList1_0">
<div style='float:left; width:300px;'> No. 1 1 Items </div>
<div style='float:left; background-color:MistyRose;border-color:Silver;border-width:1px;border-style:solid; width:17.5px;'></div>
<div style='float:left; width:70px;'> 5% 5 Ticket </div>
</label>
</td>
</tr>
div is a block-level element, which uses float: left, and can't be on the same line as radio. If the width of the page can be controlled, for example, it is determined to be 788px, then we can use float: right; text-align: left; To control, that is, in many cases, it is not allowed to use px to control the page width
Another way is to write code directly
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowHeader="False" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton ID="RadioButton1" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text=" Choose an option " OnClick="Button1_Click"/>
<asp:Label ID="Label1" runat="server"></asp:Label>
For more readers interested in asp. net, please check out the topics on this site: "asp. net Operation json Skills Summary", "asp. net String Operation Skills Summary", "asp. net Operation XML Skills Summary", "asp. net File Operation Skills Summary", "asp. net ajax Skills Summary" and "asp. net Cache Operation Skills Summary".
I hope this article is helpful to everyone's asp. net program design.