asp.net GridView中使用RadioButton单选按钮的方法
本文实例讲述了asp.net gridview中使用radiobutton单选按钮的方法。分享给大家供大家参考,具体如下:
在gridview里做单选按钮,我用了三种方法
第一种方法:在gridview的模版列里加服务器端控件radiobutton,使用js控制单选
使用模版列里加radiobutton
<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="取选项" onclick="button1_click"/> <asp:label id="label1" runat="server"></asp:label>
前面那段代码就是控制单选的js,在这里,我使用了遍历页面上所有控件的方法,加入了条件,就是红色那个判断,只控制gridview1里id是radiobutton1生成的单选按钮
这种办法需要绑定客户端事件
protected void gridview1_rowdatabound(object sender, gridviewroweventargs e) { //给每个radiobutton1绑定setradio事件 try { ((radiobutton)e.row.findcontrol("radiobutton1")).attributes.add("onclick", "setradio(this)"); } catch (exception) { } }
取值的方法就是遍历gridview的每一行,取选中的控件
protected void button1_click(object sender, eventargs e) { //使用模版列里加radiobutton label1.text = ""; foreach (gridviewrow gvr in gridview1.rows) { try { if (((radiobutton)gvr.findcontrol("radiobutton1")).checked) { label1.text = "当前选中第" + convert.tostring(gvr.rowindex + 1) + "个"; break; } } catch (exception) { } } if (label1.text.length == 0) { label1.text = "没有选中项"; } }
这种方法,在客户端和服务器端都使用了遍历
第二种方法:在gridview的模版列里,加html控件radio
使用模版列里加html控件radio
<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="取选项" 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>
前面那句<input type="radio" name="myradio" value='<%# container.dataitemindex.tostring() %>'>,我在他的value值里,绑定的是当前行,因为一般在gridview里操作的时候,我们经常要用的是选中的行号,有了行号,我们就可以取gridview的datakeys了
因为这里使用的是html控件,所以取数据的时候,要使用request.form
protected void button2_click(object sender, eventargs e) { //使用模版列里加html控件radio if (request.form["myradio"] == null) { label2.text = "没有选中项"; jsliteral.text = "";//***** } else { string value; value = request.form["myradio"].tostring(); label2.text = "当前选中第" + convert.tostring(convert.toint16(value) + 1) + "个"; jsliteral.text = "setnowradio('" + value + "');";//***** } }
这种方法自己,是不用遍历控件就可以完成任务的
就是因为使用的是客户端控件,所以选中的值不可以写入viewstate里面,如果有页面回传,这个值就不可以保留了,如果要在页面回传后还保留这个值,就要使用js,看注释里有****的那段代码,我选设置了一个setnowradio(),然后呢加入literal控件
在每一次回传的时候,嗯,因为我这里只有取值需要回传,所以我写在了取值那里,其实是应该写在page_load事件里的,加上if (ispostback)的判断,就是每次回传,就要取这个myradio的值,执行函数,重新选择已经选中的项
在这个setnowradio里,又用到了遍历,就是他比第一种方法遍历的东西少
第三种方法:直接使用radiobuttonlist模拟表格
使用radiobuttonlist
<asp:radiobuttonlist id="radiobuttonlist1" runat="server"> </asp:radiobuttonlist> <asp:button id="button3" runat="server" text="取选项" onclick="button3_click" /> <asp:label id="label3" runat="server"></asp:label>
我在这里模拟的是一个像论坛里,显示投票页面的东西,就是给出一个单选框,后面写选项内容,然后是一个图片,再显示有几票
private void setlistitem(radiobuttonlist rbt) { //给radiobuttonlist加几个listitem,用来测试数据 string item, space, info; int per; for (int i = 0; i < 3; i++) { per = 5; item = "<div style='float:left; width:300px;'> 第 " + convert.tostring(i + 1) + " 项</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票</div>"; info = item + space + info; radiobuttonlist1.items.add(new listitem(info, "")); } }
这种方法解决了单选的问题,解决了回传的问题,因为radiobuttonlist本来就是生成一组radio控件的,就是,在模拟的时候很麻烦,我这里使用了很多div+css,就是,我还是没有办法做到让生成的radio和选项放在同一行上
下面是生成的html代码里的一行:
<tr> <td> <input id="radiobuttonlist1_0" type="radio" name="radiobuttonlist1" value="" /> <label for="radiobuttonlist1_0"> <div style='float:left; width:300px;'> 第 1 项</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票</div> </label> </td> </tr>
div是块级元素,使用了float:left,也不可以让他们和radio在同一行上,如果可以把页面的宽度控制,比如确定是788px,那我们就可以使用float:right; text-align:left;来控制,就是很多时候,是不允许用px控制页面宽度的
另外的一个办法是直接写代码
protected void rbtnsel_checkedchanged(object sender, eventargs e) { for (int i = 0; i < this.gridview1.rows.count; i++) { ((radiobutton)this.gridview1.rows[i].findcontrol("rbtnsel")).checked = false; } ((radiobutton)sender).checked = true;//经典 }
更多关于asp.net相关内容感兴趣的读者可查看本站专题:《asp.net操作json技巧总结》、《asp.net字符串操作技巧汇总》、《asp.net操作xml技巧总结》、《asp.net文件操作技巧汇总》、《asp.net ajax技巧总结专题》及《asp.net缓存操作技巧总结》。
希望本文所述对大家asp.net程序设计有所帮助。
推荐阅读
-
asp.net GridView中使用RadioButton单选按钮的方法
-
Android RadioButton单选框的使用方法
-
灵活掌握Asp.net MVC中GridView的使用方法
-
ASP.NET MVC4中使用Html.DropDownListFor的方法示例
-
Android开发中button按钮的使用及动态添加组件方法示例
-
ASP.NET中GridView 重复表格列合并的实现方法
-
Android开发 RadioButton使用中遇到的问题与解决方法
-
Android单选按钮RadioButton的使用详解
-
iOS开发中UISwitch按钮的使用方法简介
-
ASP.NET 中使用 Routing 进行 URL 优化,规则中的 .html 不起作用的解决方法