十二:通过JavaScript处理页面和服务器控件
示例1:
<%@ Page Language="C#" %>
<!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>
<body onload="javascript:document.forms[0]['TextBox1'].value=Date();">
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Width="300"></asp:TextBox>
</div>
</form>
</body>
</html>
1. 使用Page.ClientScripterClientScriptBlock(此函数可以把JavaScript函数放债页面顶部)。
示例:
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string myScript = @"function AlertHello(){alert('Hello ASP.Net');}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript",myScript, true);
}
</script>
<!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>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="AlertHello()" />
</div>
</form>
</body>
</html>
Html代码:
<!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><title>
无标题页
</title></head>
<body>
<form name="form1" method="post" action="DEMO3t.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ2OTkzNDMyMWRkQThr+kz+YTDnmorf+9qdnrCaP60=" />
</div>
<script type="text/javascript">
//<![CDATA[
function AlertHello(){alert('Hello ASP.Net');}//]]>
</script>
<div>
<input type="submit" name="Button1" value="Button" onclick="AlertHello();" id="Button1" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLBr6/5CwKM54rGBmw/QI9nqBf09vafBo0yphGxdAIb" />
</div></form>
</body>
</html>
注:在测试时由后台向前台写入JavaScript时出错,原因是在家在页面是在加载页面时JavaScript触发时间早于控件触发时间。
2. 使用Page.ClientScript.RegisterStartupScript(此函数可以把JavaScript函数放债页面底部)。
示例:
页面部分:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server">Hello ASP.Net</asp:TextBox>
</div>
</form>
</body>
</html>
后台代码:
protected void Page_Load(object sender, EventArgs e)
{
string myScript = @"alert(document.forms[0]['TextBox1'].value);";
Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript", myScript, true);
}
页面代码:
<!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><title>
无标题页
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTkzNjc2OTI0MWRksrCniArYwFwg+bmsADQDkggE3Yc=" />
</div>
<div>
<input name="TextBox1" type="text" value="Hello ASP.Net" id="TextBox1" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLjhsnGCALs0bLrBozlx322RLNmqm2WNszJjllZ7DdC" />
</div>
<script type="text/javascript">
//<![CDATA[
alert(document.forms[0]['TextBox1'].value);//]]>
</script>
</form>
</body>
</html>
3. 使用Page.ClientScript.RegisterClientScriptInclude
许多开发人员都习惯吧JavaScript放在.js文件中,这是最好的方式,因为很容易把对JavaScript的修改应用于整个程序中。使用Page.ClientScript.
RegisterClientScriptInclude方法可以在ASP.Net页面上注册脚本文件。
示例:
后台
string myScript = "myScriptCode.js";
Page.ClientScript. RegisterClientScriptInclude("myKey",myScript);
页面
<script src="myScriptCode.js" type="text/javascript"></script>