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程式設計教程》。
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
