C#のコードからJavaScriptを実行する - サーバー側コードからのJavaScript実行 - ASP.NET
ASP.NETにてC#(またはVB)のコードからJavaScriptを実行したい場合があります。この記事ではASP.NETのサーバー側コードからJavaScriptを実行する方法を紹介します。
シンプルな例
もっともシンプルな例を紹介します。
コード
下記のコードを記述します。
<%@ 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つづつ配置します。
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の関数を用いた例を紹介します。
コード
下記のコードを記述します。
<%@ 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より手前に設置します。
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コードをサーバー側で書き出す仕組みにします。
コード
下記のコードを記述します。
<%@ 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を配置します。
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実行
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
