.NET TIPS

［ASP.NET］ページにJavaScriptを埋め込むには？

デジタルアドバンテージ
2004/05/21

　クライアント・サイドで動作する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>
スクリプトをページに埋め込むC#のサンプル・プログラム（regscript_cs.aspx）
　
<% @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>
スクリプトをページに埋め込むVB.NETのサンプル・プログラム（regscript_vb.aspx）

　埋め込むスクリプトで、"</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>
上記サンプル・プログラムにより出力される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としては正しくないため、予期せぬ誤動作を招くことがあり（スマート・ナビゲーションの使用時など）、この方法は極力使用すべきでない。End of Article

カテゴリ：Webフォーム　処理対象：クライアント・スクリプト
使用ライブラリ：Pageクラス（System.Web.UI名前空間）
関連TIPS：［ASP.NET］コントロールにフォーカスをセットするには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］コントロールにフォーカスをセットするには？
ASP.NETでボタンのクリック時に確認メッセージを表示するには？
［ASP.NET AJAX］ScriptManagerコントロールで複数のJavaScriptファイルを統合するには？
［ASP.NET］DataGridコントロールでビューステートを使用せずにページ表示するには？
WebBrowserコントロール内のテキストボックスに文字列をセットするには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」

TechTargetジャパン

Insider.NET フォーラム 新着記事
  • Kinectが切り開く“夢の近未来” （2012/2/2）
    　日本を含めた世界中でKinect for Windowsセンサー商用版とSDK正式版がリリース。未来のコンピューティングはどう変化するのか？
  • 3つの視点でネイティブと.NETの適材適所を考察 （2012/1/31）
    　アプリ開発は「ネイティブ」と「.NET」、どちらが最良？ その問いには「適材適所」と答えるしかない。では、“適所”は一体どこかを考察する
  • SQL Azure Data Sync入門 （2012/1/30）
    　SQL Azure／SQL Serverデータベース間のデータ同期を簡単に実現するサービスとは？ その仕組みや使用手順を解説
  • Windows Phoneアプリ市場の現状を分析する （2012/1/27）
    　Windows Phone のアプリ・ストアに日々登録されている多種多様なアプリ。カテゴリ別のアプリ数は？ 市場の現状を明らかにする

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH