［ASP.NET］ページにJavaScriptを埋め込むには？：.NET TIPS
ASP.NETでは、C#やVB.NETのコード内からクライアント側のスクリプトを出力するために、RegisterStartupScriptメソッドとRegisterClientScriptBlockメソッドが提供されている。その使い方を解説する。
クライアント・サイドで動作するJavaSciptなどによるスクリプトは、あらかじめaspxファイル内のHTMLコード内に埋め込むこともできるが、画面デザインと処理ロジックを分離するという観点では、C#やVB.NETのコード内から出力する方が好ましい。このような用途のために、ASP.NETではPageクラス（System.Web.UI名前空間）のメソッドとして、RegisterStartupScriptメソッドとRegisterClientScriptBlockメソッドの2つが用意されている。
これら2つのメソッドでは、スクリプトを識別するためのキーと、スクリプトの内容をそれぞれ文字列としてパラメータに指定する。
RegisterStartupScript("startup", "<script language='JavaScript'> alert('スタートアップ') </script>")
RegisterClientScriptBlock("client", "<script language='JavaScript'> alert('クライアント') </script>")
第2パラメータで指定した文字列が、最終的にブラウザへ転送されるHTMLテキストに埋め込まれることになる。第1パラメータであるキーは、スクリプトに付ける任意の名前で、同じ内容のスクリプトを重複してクライアントに出力してしまわないようにするためのものだ。同じキー名で別の内容のスクリプトを登録しようとしても上書きできないので注意が必要である。
指定したキーがすでに登録されているかどうかは、IsStartupScriptRegisteredメソッドやIsClientScriptBlockRegisteredメソッドで調べることができる。
RegisterStartupScriptメソッドとRegisterClientScriptBlockメソッドの違い
ページにスクリプトを埋め込むこれら2つのメソッドの違いは、スクリプトが埋め込まれる位置である。次のようなASP.NETのプログラムにより、それを実際に確認してみよう。
<% @Page Language="C#" %>
<html>
<head>
<script runat="server">
void Page_Load(object sender, EventArgs e) {
string clientScript = "<script language='JavaScript'> alert('クライアント') <" + "/script>";
string startupScript = "<script language='JavaScript'> alert('スタートアップ') <" + "/script>";
RegisterClientScriptBlock("client", clientScript);
RegisterStartupScript("startup", startupScript);
}
</script>
</head>
<body>
<form runat="server">
<asp:TextBox id="myTextBox" runat="server" />
<asp:Button id="myButton" Text="ボタン" runat="server" />
</form>
</body>
</html>
regscript_cs.zipのダウンロード
<% @Page Language="VB" %>
<html>
<head>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim clientScript As String = "<script language='JavaScript'> alert('クライアント') <" + "/script>"
Dim startupScript As String = "<script language='JavaScript'> alert('スタートアップ') <" + "/script>"
RegisterClientScriptBlock("client", clientScript)
RegisterStartupScript("startup", startupScript)
End Sub
</script>
</head>
<body>
<form runat="server">
<asp:TextBox id="myTextBox" runat="server" />
<asp:Button id="myButton" Text="ボタン" runat="server" />
</form>
</body>
</html>
regscript_vb.zipのダウンロード
埋め込むスクリプトで、"</script>"と記述するのをわざわざ"……<" + "/script>"と分けて記述しているのは、これが<scirpt runat="server">要素を閉じるためのタグと認識されないようにするためだ。aspxファイル内にプログラム・コードを記述する場合には、こうしておかないとエラーとなる。もちろん、コードビハインドにより別ファイルでプログラム・コードを記述している場合には、この必要はない。
さて、このプログラムをブラウザより実行すると、まず「クライアント」と書かれたメッセージ・ボックスが表示され、テキストボックスとボタンが表示された後に、「スタートアップ」と書かれたメッセージ・ボックスが表示される。そのソースを開くと次のような内容になっているはずだ。
<html>
<head>
</head>
<body>
<form name="_ctl0" method="post" action="regscript_cs.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDwyMDA1M……utl+rWwY=" />
<script language='JavaScript'> alert('クライアント') </script>
<input name="myTextBox" type="text" id="myTextBox" />
<input type="submit" name="myButton" value="ボタン" id="myButton" />
<script language='JavaScript'> alert('スタートアップ') </script>
</form>
</body>
</html>
この出力から分かるように、RegisterClientScriptBlockメソッドによる出力は、<form>タグの直後（正確にはビューステートのための<input>要素より後で、各コントロールの定義より前）であり、一方、RegisterStartupScriptメソッドによる出力は、</form>タグの直前となる。
ASP.NETでは、基本的にすべてのコントロール要素を単一のform要素内で記述するため、実質的には、出力されるHTMLにおいて、RegisterClientScriptBlockメソッドによるスクリプトが最初に、RegisterStartupScriptメソッドによるスクリプトが最後に実行されることになる。
2つのメソッドの使い分けは？
まず、form要素の最後にスクリプトを出力するRegisterStartupScriptメソッドは、その名のとおりページの初期化のためのメソッドで、ページ表示が完全に整ってから実行する処理ロジックをスクリプトとして埋め込むためのものである。この例としては「TIPS：［ASP.NET］コントロールにフォーカスをセットするには？」を参考にしていただきたい。
RegisterClientScriptBlockメソッドは、すぐによい例が思いつかないのだが、リファレンス・マニュアルのサーバー コントロールのクライアント側機能（米マイクロソフトの原文）によると、主にスクリプトで記述した関数群（JavaScriptで定義した関数など）を埋め込むためのものである。ページ内の各コントロールを描画するのに必要なJavaScript関数の定義などは、当然ながらそのコントロールがページ内で出現するよりも前に行わなければならないので、こちらのメソッドが必要になる。
なお、プログラム・コード内で次のような記述をしてもスクリプトをページに埋め込むことができる。
Response.Write("<script language=JavaScript> alert('クライアント') </script>")
しかし、Response.Writeメソッドによる出力は、ページの先頭（<html>要素よりもさらに前）に埋め込まれる。これはHTMLとしては正しくないため、予期せぬ誤動作を招くことがあり（スマート・ナビゲーションの使用時など）、この方法は極力使用すべきでない。
カテゴリ：Webフォーム 処理対象：クライアント・スクリプト
使用ライブラリ：Pageクラス（System.Web.UI名前空間）
関連TIPS：［ASP.NET］コントロールにフォーカスをセットするには？
■この記事と関連性の高い別の.NET TIPS
Copyright© Digital Advantage Corp. All Rights Reserved.