首頁 > 開發者 > JavaScript
伺服器控制項與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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
