在asp.net服務器控件中使用javascript

来源:互联网 发布:学生收费软件 编辑:程序博客网 时间:2024/05/14 18:35
在asp.net服務器控件中使用javascript
2008-10-08 19:46

總結起來,在服務器控件中使用js的方法有如下幾種:
1.在<body>的onload中直接寫js.(如例1)
2.將服務器控件的事件代碼寫在html中,然後在控件的屬性中直接調用事件名稱.(如例1,3)
3.在Page_Load事件或服務器控件的事件中(如DataBound)設定服務器控件的Attribute(如例2)


1.将Js添加到服务器控件
例1:本示例通過onload屬性將js置於頁面的<body>中,單擊服務器button後,在button上顯示本地時間.
<%@ Page Language="C#" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
//單擊按鈕後會回發消息
//Response.Write("回发!");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>使用 JavaScript</title></head>
<body onload="javascript:document.forms[0]['Button1'].value=Date();">
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="按钮"
OnClick="Button1_Click" Font-Bold="True" Font-Names="Verdana"
Font-Size="Larger" />
</div>
</form>
</body>
</html>

輸出的代碼:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>使用 JavaScript</title></head>
<body onload="javascript:document.forms[0]['Button1'].value=Date();">
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUKMTY3NzE5MjIyMGRkVUxVdzEWBhD7U89t7JKIkQc6Cko=" />
</div>
<div>
<input type="submit" name="Button1" value="" id="Button1"
style="font-family:Verdana;font-size:Larger;font-weight:bold;" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWAgK394SHCAKM54rGBtsX8d2S8MO7sf02DOAiquFyBkeY" />
</div></form>
</body>
</html>

例2:本示例通過在Page_Load事件中,將js添加到一個服務器button的Attribute上.
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add("onclick","javascript:alert('多加注意!')");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>使用 JavaScript</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button id="Button1" runat="server" Font-Bold="True"
Font-Names="Verdana" Font-Size="Larger"
Text="单击我!"></asp:Button>
</div>
</form>
</body>
</html>

例3:本示在服務器控件Attributes中直接調用事件,從而來使用js
<%@ Page Language="C#" %>
<script runat="server">
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
//Label1.Text = "回发!";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>使用 JavaScript</title>
</head>
<body>
<form id="form1" runat="server">
<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>
</form>
</body>
</html>


2.使用大塊的js
--1.使用Page.ClientScript.RegisterStartupScript()
這個函數會將js代碼注冊在頁面的最後面,</form>的前面.
它的聲明如下:
RegisterStartupScript (type, key, script)
RegisterStartupScript (type, key, script, script tag specification)

例4:
在Page_Load事件添加如下代碼:
Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript",
"function AlertHello() { alert('你好,ASP.NET'); }", true);
Button1.Attributes["onclick"] = "AlertHello()";
Button2.Attributes["onclick"] = "AlertHello()";

則生成後的代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>使用 JavaScript</title>
</head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJMTM4ODA1MjE5D2QWAgIED2QWBAIBDw9kFgIeB29uY2xpY2s
FDEFsZXJ0SGVsbG8oKWQCAw8PZBYCHwAFDEFsZXJ0SGVsbG8oKWRk+DQIaJpw5
A7pyhzP8dxf/JGUSbA=" />
</div>
<div>
<input type="submit" name="Button1" value="Button"
onclick="AlertHello();" id="Button1" />
<input type="submit" name="Button2" value="Button"
onclick="AlertHello();" id="Button2" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWAwK4yNWFBwKM54rGBgK7q7GGCHwBEr6DyGutQ/egvNrB3OYhCwM4" />
</div>
<script type="text/javascript">
<!--
function AlertHello() { alert('你好,ASP.NET'); }// -->
</script>
</form>
</body>
</html>

--2.使用Page.ClientScript.RegisterClientScriptBlock()
這個函數會將js注冊在頁面的最前面,<form>的後面.如果js中調用了其它控件,將有可能出錯.
例5:
<%@ Page Language="C#" %>
<script runat="server">
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 = "回发!";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>使用 JavaScript</title></head>
<body>
<form id="form1" runat="server">
<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>
</form>
</body>
</html>

輸出代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<title>使用 JavaScript</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUKMTcyMTcwOTQ2NA9kFgICBA9kFgICAQ8PZBYEHgtvbm1
vdXNlb3ZlcgVCdGhpcy5zcmMgPSBNeUJ1dHRvblNoYWRlZC5zcmM7d2luZ
G93LnN0YXR1cz0nT2ggWWVzISBDbGljayBoZXJlISc7Hgpvbm1vdXNlb3V
0BSl0aGlzLnNyYyA9IE15QnV0dG9uLnNyYzt3aW5kb3cuc3RhdHVzPScnO
2QYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFDEltYWd
lQnV0dG9uMXDJ4zl4FNylcdE+kep0e5wzi14T" />
</div>
<script type="text/javascript">
<!--
if (document.images)
{MyButton = new Image;MyButtonShaded = new Image;
MyButton.src = 'button1.gif';MyButtonShaded.src = 'button2.gif';}
else
{MyButton= '';MyButtonShaded = '';}// -->
</script>
<div>
<p>
<input type="image" name="ImageButton1" id="ImageButton1"
onmouseover="this.src = MyButtonShaded.src;window.status='是的!请单击此处!';"
onmouseout="this.src = MyButton.src;window.status='';"
src="button1.gif" style="border-width:0px;" />
</p>
<p>
<span id="Label1"></span>
</p>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWAgLhoLy4DwLSwpnTCEKaKJJN3KmLU7TP4vwT5VSKMT+M" />