服务器控件与JavaScript
我们用js访问服务器Button控件，
Function AspButtonClick(){document.form1.Button1.value="我被单击了"; }
这段js是放在<head></head>里的。
<form id="form2" runat="server">
<div>
<asp:Button ID="Butt1on1" runat="server" Text="我是AspButton" OnClick="AspButtonClick()" />
</div>
</form>
这样做的话会得到以下错误：
CS0117: “ASP.default13_aspx”并不包含“AspButtonClick”的定义
为什么会得到这样的错误呢？我认为是这个button是服务器的，在服务器上运行，而js是在浏览器上运行的，所以会找不到函数AspButtonClick。
1.如果我们把<asp:Button ID="Butt1on1" runat="server" Text="我是AspButton" OnClick="AspButtonClick()" />换成<input type="button" ID="Button1" runat="server" value="我是服务器Button" onclick="AspButtonClick()" />
就可以正确执行了。注意那个runat="sever";<input type="button" />加上不加都可以正确运行。
如果你双击那个input，会在.cs文件里产生这样的事件protected void Button1_ServerClick(object sender, EventArgs e){}，我在里面这样做，Response.Write("你好，Web");
但是这样会有两个单击事件处理，虽然可以理解为一个是客户端单击事件，一个是服务器单击事件，
但结果被证实：两个事件都不能正常执行。两者只要去掉任何一个就可以正确执行。
2.如果我们去掉单击事件，把<script language="javascript" type="text/javascript">document.form1.Button1.value="我被单击了";
</script>
放在<asp:Button ID="Butt1on1" runat="server" Text="我是AspButton" />的后面，代码就可以正确执行。
对于asp:Button控件，它的单击事件也可以这样做（注意：查看—>>源文件中的javascript代码的位置）
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add("onclick",
"javascript:alert('多加注意！！！')");
}或者
Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript",
"function AlertHello() { alert('你好，ASP.NET'); }", true);
Button1.Attributes["onclick"] = "AlertHello()";
Button2.Attributes["onclick"] = "AlertHello()";
看msdn的一个例子：
<div>
<p>
<asp:ImageButton id="ImageButton1"
onmouseover="this.src='button2.gif'"
onclick="ImageButton1_Click"
onmouseout="this.src='button1.gif'" runat="server"
ImageUrl="button1.gif"></asp:ImageButton>
</p>
<p>
<asp:Label id="Label1" runat="server" />
</p>
</div>
protected void Page_Load(object sender, EventArgs e)
{
Page.RegisterClientScriptBlock("MyScript", _
"if (document.images) {" +
"MyButton = new Image;" +
"MyButtonShaded = new Image;" +
"MyButton.src = 'button1.gif;" +
"MyButtonShaded.src = 'button2.gif;" +
"}" +
"else {" +
"MyButton = '';" +
"MyButtonShaded = '';" +
"}", true);
ImageButton1.Attributes.Add("onmouseover",
"this.src = MyButtonShaded.src;" +
"window.status='是的！请单击此处！';");
ImageButton1.Attributes.Add("onmouseout",
"this.src = MyButton.src;" +
"window.status='';");
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
Label1.Text = "回发！";
}
-->
<!--
下面我们来看看js控制服务器控件CheckBoxList的示例。
客户端生成的CheckBoxList
<div>
<table id="Table1" border="0">
<tr>
<td><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">1232</label></td>
</tr><tr>
<td><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">254</label></td>
</tr><tr>
<td><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">5643</label></td>
</tr><tr>
<td><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3" /><label for="CheckBoxList1_3">789</label></td>
</tr><tr>
<td><input id="CheckBoxList1_4" type="checkbox" name="CheckBoxList1$4" /><label for="CheckBoxList1_4">654</label></td>
</tr><tr>
<td><input id="CheckBoxList1_5" type="checkbox" name="CheckBoxList1$5" /><label for="CheckBoxList1_5">564</label></td>
</tr><tr>
<td><input id="CheckBoxList1_6" type="checkbox" name="CheckBoxList1$6" /><label for="CheckBoxList1_6">8564</label></td>
</tr><tr>
<td><input id="CheckBoxList1_7" type="checkbox" name="CheckBoxList1$7" /><label for="CheckBoxList1_7">8564</label></td>
</tr><tr>
<td><input id="CheckBoxList1_8" type="checkbox" name="CheckBoxList1$8" /><label for="CheckBoxList1_8">5452</label></td>
</tr><tr>
<td><input id="CheckBoxList1_9" type="checkbox" name="CheckBoxList1$9" /><label for="CheckBoxList1_9">5641</label></td>
</tr>
</table>
</div>
-->
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function checkAll()
{
//alert(document.getElementById("CheckBoxList1").getElementsByTagName("input").length);
for(var i=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
{
document.getElementById("CheckBoxList1_"+i).checked=true;
}
}
function deleteAll()
{
for(var i=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
{
document.getElementById("CheckBoxList1_"+i).checked=false;
}
}
function reverseAll()
{
for(var i=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
{
var objCheck=document.getElementById("CheckBoxList1_"+i);
if(objCheck.checked)
objCheck.checked=false;
else objCheck.checked=true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem >1232</asp:ListItem>
<asp:ListItem >254</asp:ListItem>
<asp:ListItem Value="5643">5643</asp:ListItem>
<asp:ListItem>789</asp:ListItem>
<asp:ListItem>654</asp:ListItem>
<asp:ListItem>564</asp:ListItem>
<asp:ListItem>8564</asp:ListItem>
<asp:ListItem>8564</asp:ListItem>
<asp:ListItem>5452</asp:ListItem>
<asp:ListItem>5641</asp:ListItem>
</asp:CheckBoxList>
</div>
<div>
<input type="button" onclick="checkAll()" value="全选"/>
<input type="button" onclick="deleteAll()" value="取消" />
<input type="button" onclick="reverseAll()" value="反选" />
</div>
</form>
</body>
</html>