iPentec.com  /  Doc  /  C#  /  ASP.NET

目次

C#のコードからJavaScriptを実行する - サーバー側コードからのJavaScript実行 - ASP.NET

ASP.NETにてC#(またはVB)のコードからJavaScriptを実行したい場合があります。この記事ではASP.NETのサーバー側コードからJavaScriptを実行する方法を紹介します。

シンプルな例

もっともシンプルな例を紹介します。

コード

下記のコードを記述します。
Demo-01.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo-01.aspx.cs"
  Inherits="CsharpToJavaScript.Demo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    </div>
    </form>
</body>
</html>

画面


解説

WebフォームファイルにはButtonとLiteralを1つづつ配置します。
Demo-01.aspx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CsharpToJavaScript
{
  public partial class Demo : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      Literal1.Text 
        = "<script type=\"text/javascript\" >alert(\"Hello C# and JavaScript world!!\");</script>";
    }
  }
}

解説

Button1をクリックするとLiteral1にJavaScritpのタグを書き出すコードです。上記の例ではalert()を実行しメッセージボックスを表示します。

実行結果

プロジェクトを実行します。Webブラウザが起動し、下図の画面が表示されます。


Button1をクリックします。ASP.NETのコードに記述された、JavaScriptが実行され、下図のメッセージボックスが表示されます。

JavaScriptの関数を用いた例

JavaScriptの関数を用いた例を紹介します。

コード

下記のコードを記述します。
Demo-02.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo-02.aspx.cs" 
  Inherits="CsharpToJavaScript.Demo01" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <div id="output"></div> <!-- 順番に注意(Literalより先) -->
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    </div>
    </form>
</body>
</html>

画面


解説

WebフォームにはButton,Literalを1つづつ配置します。また、結果を出力するためのDiv枠を配置します。
Div枠はJavaScriptのコードが実行される以前に画面に読み込まれる必要があるため、Literalより手前に設置します。
Demo-02.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CsharpToJavaScript
{
  public partial class Demo01 : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      string jssrc =
        "<script type=\"text/javascript\" >"
       + "function add(a, b) {"
       + "    c = a + b;"
       + "    target = document.getElementById(\"output\");"
       + "    target.innerHTML = c;"
       + "}"
       + "window.onload=add(12,8);"
       + "</script>";

      Literal1.Text = jssrc;
    }
  }
}

解説

Button1をクリックすると、Literl1にJavaScriptのコードを書き出します。JavaScriptのコードは関数になっており、起動部分が"window.onload=add(12,8);"の部分になります。

補足

上記の例ではwindow.onloadイベントで関数の実行を開始していますが、下記のように関数の外側に関数呼び出しを記述ページ読み込み時に実行させ手も動作します。
  string jssrc =
    "<script type=\"text/javascript\" >"
   + "function add(a, b) {"
   + "    c = a + b;"
   + "    target = document.getElementById(\"output\");"
   + "    target.innerHTML = c;"
   + "}"
   + "add(12,8);"
   + "</script>";

実行結果

プロジェクトを実行します。Webブラウザが起動し、下図の画面が表示されます。


Button1をクリックします。Button1の下に"20"が表示されました。JavaScriptの関数"add(12,8)"が実行できたことが確認できました。


ページに記述されているJavaScriptを実行する

ページに記述されているJavaScriptを実行する例を紹介します。ページに記述されているJavaScriptの場合ページ側のJavaScriptを関数にしておき、関数を実行するJavaScriptコードをサーバー側で書き出す仕組みにします。

コード

下記のコードを記述します。
Demo-03.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo-03.aspx.cs" 
  Inherits="CsharpToJavaScript.Demo_03" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function calc(a, b, c) {
            r = c * (a + b);
            target = document.getElementById("output");
            target.innerHTML = c+ "*("+a+"+"+b+") = " + r;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <div id="output"></div>
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    </div>
    </form>
</body>
</html>

画面


解説

WebフォームにはButtonと結果を表示するためのDiv枠、JavaScriptのコードを書き出すLiteralを配置します。
Demo-03.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CsharpToJavaScript
{
  public partial class Demo_03 : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      Literal1.Text = "<script type=\"text/javascript\" >window.onload=calc(3,4,2);</script>";
    }
  }
}

解説

Button1がクリックされると、LiterlにJavaScriptのcalc関数を呼び出すコードを書き出し、JavaScriptを実行します。

実行結果

プロジェクトを実行します。Webブラウザが起動し下図の画面が表示されます。


Button1をクリックします。計算結果と計算式がButtonの下部に表示されます。


このページのキーワード
  • C#のコードからJSを実行する - サーバー側コードからのJS実行
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2024-01-06
作成日: 2013-03-07
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.