ASP.NET中一些JavaScript的使用技巧

範例一：使用javascript來傳送資料

　　default.aspx，拉一個HTML的Input(Button)控制項，在最後面的地方加上「runat="server"」，在「runat="server"」後面新增onclick事件：

view sourceprint?

1	<input id="Button1" type="button" value="button" runat="server" onclick ="javascript:window.location.href='result.aspx?result='+window.confirm('True or Flase')"/>

　　我們寫的javascript很簡單，使用者點擊button後，跳出一個確認視窗，然後將使用者選擇的值傳給result.aspx。重點在如果使用?result='…'的方式來傳送你的資料。

　　result.aspx，在Page_Load新增以下程式碼：

view sourceprint?

1	Dim ret As String

2	ret = Request("result")

3	If ret <> "" Then

4	Response.Write(ret)

5

End If

　　將default.aspx中javascript傳過來的值顯示出來。

範例二，使用Attributes屬性，動態新增javascript程式碼

　　我們修改Default.aspx的內容，新增一個HTML的Input(Text)在Input(Button)之前，然後將Input(Button)裡的onclick事件刪除。然後在Default.aspx.vb中Page_Load中新增以下程式碼：

view sourceprint?

1	Dim strJS As String

2	strJS = "javascript:"

3	strJS += "if (Text1.value == '')"

4	strJS += "window.location.href='result.aspx?result='+window.confirm('輸入值空白，傳送True或Flase');"

5	strJS += "if (Text1.value != '')"

6	strJS += "window.location.href='result.aspx?result='+Text1.value;"

7

8	Me.Button1.Attributes("onclick") = strJS

　　注意，我是透過Attributes新增onclick是事件到Button1控制項中。那透過控制項.Attributes()來新增事件有什麼好處呢？如果你寫過javascript，我想大約都是採用範例一的方法，直接在網頁裡寫javascript程式碼，但這樣的程式碼是死的，但透過Attributes後，可以讓我們的程式碼較有彈性。

　　在上面的程式碼中有一段「if (Text1.value != '')」，主要是判斷Text1控制項的值是否為空白，再來決定傳送的值。而重點是「Text1」這個名稱，Text1是ASP.NET網頁的控制項Client ID，而非Web From中的物件名稱，在一些情況下，在伺服器端執行的控制項不見得在Client端會採用一樣的名稱(雖然大部分是會一樣)。這也就是我們使用Attributes來動態建構JavaScript的原因之一。所以如果JavaScript中有參考到任何一個控制項，最好都使用Attributes屬性來建構。

view sourceprint?

01	'先修改Text1，加上runat="server"屬性

02	Dim strJS As String

03	strJS = "javascript:"

04	'取得Text1控制項ClientID

05	strJS += "if (" & Text1.ClientID & ".value == '')"

06	strJS += "window.location.href='result.aspx?result='+window.confirm('輸入值空白，傳送True或Flase');"

07	strJS += "if (" & Text1.ClientID & ".value != '')"

08	strJS += "window.location.href='result.aspx?result='+Text1.value;"

09

10	Me.Button1.Attributes("onclick") = strJS

範例三：利用Literal動態安插JavaScript

　　再來，我們示範使用Literal控制項與安插JavaScript。Literal可以讓我們在Web網頁上保留位置以顯示態文字，我們就是使用這樣的特性來動態的將JavaScript程式碼安插其中。

　　Default.aspx，再畫面上各拉一個TextBox、Button、Literal、Label控制項。我們要透過Literal安插一段JavaScript來顯示目前的時間，而且每一秒更新一次，如果我們點擊Button時取得目前時間，然將時間顯示在Label上。

view sourceprint?

1	<form id="form1" runat="server">

2

<div>

3	<asp:textbox id="TextBox1" runat="server" width="200px"></asp:textbox>

4	<asp:button id="Button1" runat="server" text="Button">

5	<asp:literal id="Literal1" runat="server"></asp:literal>

6	<asp:label id="Label1" runat="server"></asp:label>

7	</asp:button></div>

8

</form>

　　然後在Page_Load事件撰寫以下程式碼：

view sourceprint?

01	Dim JavaScript As String

02	Dim ClockID As String

03

04	'取得在伺服器端執行的TextBox1 控制項 ClientID

05	ClockID = "form1." & Me.TextBox1.ClientID

06	'組出JavaScript

07	JavaScript += vbCrLf & "<script type="text/javascript">"

08	JavaScript += vbCrLf & "function tick() {"

09	JavaScript += vbCrLf & "var today;"

10	JavaScript += vbCrLf & "today = new Date();"

11	'將時間值放入ClientID的value

12	JavaScript += vbCrLf & ClockID & ".value =today.toLocaleString();"

13	JavaScript += vbCrLf & "window.setTimeout('tick()', 1000);"

14	JavaScript += vbCrLf & "}"

15	JavaScript += vbCrLf & ""

16	JavaScript += vbCrLf & "tick();"

17	JavaScript += vbCrLf & "</script>"

18	'將JavaScript安插入 Literal1

19	Me.Literal1.Text = JavaScript

　　執行瀏覽器檢視，你就能看到時間在Text1顯示，且每秒更新一次。再看看原始碼，你就能看到Literal已經變成一段JavaScript：

view sourceprint?

1	<script type="text/javascript">

2	function tick() {

3	var today;

4	today = new Date();

5	form1.TextBox1.value =today.toLocaleString();

6	window.setTimeout('tick()', 1000);

7

}

8

tick();

9

</script>

　　「form1.TextBox1.value」是這段程式的重點，然後在Button的Click事件新增：

view sourceprint?

1	Me.Label1.Text = Me.TextBox1.Text.ToString

　　你可以點擊Button來取得即時的時間值。

　　三個範例，你可以選擇直接在控制項寫JavaScript程式碼，也可以使用控制項.Attributes來動態新增，也能透過Literal來動態安插你所需要的程式碼。