問題
Button控制項與Javascript配合Client Button控制項取得RadioButtonList的值
解決方法
使用Server端的控制項,處理方式是將Client的整個網頁傳回Server,然後在Server端變更RadioButtonList的值以後,再回傳整個網頁回來Client端
使用Javascript配合html的input button,處理方式是直接由Javascript取得RadioButtonList的控制項id後,直接取得值
而前後者不同的是一個再Server端執行,一個則由Client處理完成,若網頁上的控制項很多,使用Server端的方式執行將會造成網路流量的增加,使用上須小心!
RadioButtonList傳到Client後會解譯像下面這樣：
水平式：
<table id="RadioButtonList1" border="0"> <tr> <td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="0" /><label for="RadioButtonList1_0">選擇0</label></td><td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="1" /><label for="RadioButtonList1_1">選擇1</label></td><td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="2" /><label for="RadioButtonList1_2">選擇2</label></td><td><input id="RadioButtonList1_3" type="radio" name="RadioButtonList1" value="3" /><label for="RadioButtonList1_3">選擇3</label></td> </tr> </table>垂直式：
<table id="RadioButtonList1" border="0"> <tr> <td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="0" /><label for="RadioButtonList1_0">選擇0</label></td> </tr><tr> <td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="1" /><label for="RadioButtonList1_1">選擇1</label></td> </tr><tr> <td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="2" /><label for="RadioButtonList1_2">選擇2</label></td> </tr><tr> <td><input id="RadioButtonList1_3" type="radio" name="RadioButtonList1" value="3" /><label for="RadioButtonList1_3">選擇3</label></td> </tr> </table>所以用Javascript的取RadioButtonList的值時候,也要注意顯示方向
.aspx如下：
>
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>未命名頁面</title>
</head>
<script language="javascript">
//取得垂直排列的RadioButton值
function cilckbtnVertical()
{
var table;
//取得並觸發按鍵動作
table=document.getElementById("RadioButtonList1");
for(i=0;i<table.rows.length;i++)
{
if(table.rows[i].cells[0].childNodes[0].checked == true)
{
selValue = table.rows[i].cells[0].childNodes[0].value;
alert(selValue);
return;
}
}
}
//取得水平排列的RadioButton值
function cilckbtnHorizontal()
{
var table; //取得並觸發按鍵動作 table=document.getElementById("RadioButtonList1");
for(i=0;i<table.rows[0].cells.length;i++)
{
if(table.rows[0].cells[i].childNodes[0].checked == true)
{
selValue = table.rows[0].cells[i].childNodes[0].value;
alert(selValue);
return;
}
}
}
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
</asp:RadioButtonList>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><%--按下btnServerCall的時候去Postback候傳回變更後的Textbox值--%>
<asp:Button ID="btnServerCall" runat="server" OnClick="Button1_Click" Text="ServerChoice1" />
<%--按下btnJavaScriptCall的時候去觸發javascript--%> <input id="btnJavaScriptCall" type="button" value="JavaScriptChoice1" onclick="cilckbtnHorizontal();" />
<%--<input id="Button1" type="button" value="JavaScriptChoice1" onclick="cilckbtnVertical();" />--%> </div>
</form>
</body>
</html>
.cs如下：namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
for (int i = 0; i <= 3; i++)
{
ListItem lt = new ListItem();
lt.Text = "選擇" + i.ToString();
lt.Value = i.ToString();
this.RadioButtonList1.Items.Add(lt);
}
}
}
protected void Button1_Click(object sender, EventArgs e)
{
this.TextBox1.Text = "Service call"; this.RadioButtonList1.SelectedValue = "1"; }
}
}
沒有留言:
張貼留言