[ ASP.NET ] Webサーバーで動的に埋め込んだ Javascript を実行する ( ClientScript.RegisterStartupScript )

Tweet

Pocket

『ASP.NET ボタンクリック時に静的に埋め込んだ Javascript を実行する』では、OnClientClick プロパティで静的に埋め込んだ Javascript をボタンクリック時に実行させましたが、サーバー処理実行前に Javascript が実行されるため、サーバー処理の結果によって表示するメッセージ内容を変更させるといったことはできません。

サーバーで動的に Javascript を埋め込む

ボタンクリック時、サーバー側処理で動的に埋め込んだ Javascript をブラウザ上で実行させてみたいと思います。

ASPX

<form id="form1" runat="server">
   <div>
     <asp:Button id="Button1" runat="server" Text="Button"/>
   </div>
</form>

次に、クリックイベントハンドラを定義します。実際に、Javascript を HTML に埋め込んでいる部分は、 ClientScript.RegisterClientScriptBlock と、ClientScript.RegisterStartupScript の部分です。 両者の違いは、ブラウザで描画が開始される前に実行されるか、描画後に実行されるかの違いです。

VB.NET

 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
     Dim cScript As String = "alert('ClientScript');"
     Dim sScript As String = "alert('StartupScript');"

     ClientScript.RegisterClientScriptBlock(Me.GetType(), "key", cScript, True)
     ClientScript.RegisterStartupScript(Me.GetType(), "key", sScript, True)
 End Sub

C#

 protected void Button1_Click(object sender, EventArgs e)
 {
     string cScript = "alert('ClientScript');";
     string sScript = "alert('StartupScript');";

     ClientScript.RegisterClientScriptBlock(this.GetType(), "key", cScript, true);
     ClientScript.RegisterStartupScript(this.GetType(), "key", sScript, true);
 }

実行した結果は、以下のようになります。

1. 描画開始前に、メッセージダイアログ”ClientScript”が出力される
2. ブラウザで描画が開始される
3. 描画完了後に、メッセージダイアログ”StartupScript”が出力される

どのように、描画前、描画後の制御を行っているかは、レスポンスの HTML で確認できます。HTML ソースは返ってきた順にブラウザで処理されますので、HTML 描画を行う部分よりも前にスクリプトが記述されているか後に記述されているかの違いでです。

注意事項

ClientScript.RegisterStartupScript および、ClientScript.RegisterClientScriptBlock は最初の ２つの引数をキーとしています。従って、第2引数 “key” の部分を変更することによってスクリプトを複数記述することが可能です。ただし、ClientScript.RegisterStartupScript を同一パラメータで2回コールした場合は、キーが重複するため（エラーにはなりません）、 埋め込まれる Javascript は1つだけとなります。
今回の例では、描画前と描画後で同一のキーを指定していますが、スクリプトを埋め込む位置が異なるため、どちらも問題なく実行されています。

Tweet

Pocket