JavaScript学习笔记(三)—在ASP.NET网页中集成JavaScript
JavaScript是Web应用程序客户端的主流编程语言,在实际项目中经常需要向ASP.NET网页中动态添加JavaScript代码。
1.在控件声明中直接添加JavaScript代码
<asp:Button ID="Button2" runat="server" onmouseover="this.style.color='Red'" onmouseout="this.style.color='black'" Text="会变色的按钮"/>
onmouseover、onmouseout不是Button控件的属性,而是HTML元素的事件属性。当HTML页面呈现时,ASP.NET会原封不动地将它不能解析的属性发给浏览器客户端。
2.使用Control.Attributes.Add方法添加JavaScript代码
<script type="text/javascript">
//实现字符计数器的JavaScript函数
function inputcounter(inputid,counterid,maxlength)
{
var txt=document.getElementById(inputid);
var counterid=document.getElementById(counterid);
if((txt!=null) && (counterid!=null))
{
counterid.value=(parseInt(maxlength)-txt.value.length).toString();
}
}
</script>
protected void Page_Load(object sender, EventArgs e)
{
//动态“组装”JavaScript脚本,
//inputcounter()是一个JavaScript函数,定义在页面的<head>元素内
string script = "inputcounter('{0}','{1}',{2});";
script = string.Format(script, txtInput.ClientID, txtCount.ClientID, 2000);
//将JavaScript脚本附加到文本框控件的属性上
txtInput.Attributes.Add("onkeyup",script);
}
3.使用RegisterStartupScript等系列方法
Page类提供了一个ClientScript对象,它有一系列的方法向ASP.NET页面动态注入JavaScript代码
<input id="HtmlButton1" type="button" runat="server" value="我是一个普通的HTML按钮,现在没有任何的响应代码" />
<hr />
<asp:Button ID="btnRegisterJavaScript" runat="server" Text="给网页动态注入JavaScript代码"
OnClick="btnRegisterJavaScript_Click" />
protected void btnRegisterJavaScript_Click(object sender, EventArgs e)
{
//要加入的JavaScript代码块
string script = " function SayHello() {alert(\"Hello\"); }";
//以下两句中任何一句都可以向页面中添加的JavaScript代码块
//请通过生成的HTML网页源码找出这两个方法的差异
//ClientScript.RegisterClientScriptBlock(this.GetType(), "SayHello", script,true);
ClientScript.RegisterStartupScript(this.GetType(), "SayHello", script, true);
HtmlButton1.Value = "我是一个普通的HTML按钮,现在动态挂接上了的响应代码";
//给按钮添加事件响应函数
HtmlButton1.Attributes["onclick"] = "SayHello();";
}
3.1 RegisterClientScriptBlock、RegisterStartupScrip区别
这两个方法在客户端呈现的代码位置不同:RegisterClientScriptBlock添加的JavaScript代码出现在页面<body>元素内部,往往与其他HTML代码混杂在一起,因此这些代码可能无法访问页面上的所有HTML元素;而RegisterStartupScript添加的JavaScript代码出现在<body>元素的最后部分。
本文主要参考了金旭亮先生的《Asp.Net程序设计教程》。