ScriptManagerを使用せずにJavaScriptからASP.NETのロジックを呼び出す - ASP.NET

JavaScriptからASP.NETのロジック処理を呼び出したい場合があります。こちらの記事ではScriptManagerを用いてJavaScriptからASP.NETを呼び出す方法を紹介しましたが、ページをASP.NETではなく、HTMLファイルで作成したい場合はScriptManagerを使うことができません。
この記事ではScriptManagerを用いずにHTMLファイルのjavaScriptからASP.NETのロジックを呼び出す方法を紹介します。

概要

HTMLファイルのJavaScriptから情報の受け渡しをする場合にはXMLHttpRequestを用いてURLにリクエストし、結果を受け取る方法が簡単です。結果はXMLでもテキストでも可能ですが、JavaScriptの場合はJSON形式で受け取るとパージングが容易です。

コード例

JavaScriptから引数を与えてASP.NETのロジックで計算をする例です。

CalcHandler.ashx

計算をして結果をJson形式で返すジェネリックハンドラーです。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JavaScriptToAspNet
{
  /// <summary>
  /// CalcHandler の概要の説明です
  /// </summary>
  public class CalcHandler : IHttpHandler
  {

    public void ProcessRequest(HttpContext context)
    {
      int val_a = Convert.ToInt32(context.Request["input1"]);
      int val_b = Convert.ToInt32(context.Request["input2"]);

      context.Response.ContentType = "application/javascript";
      context.Response.Write("{");
      context.Response.Write(string.Format("\"add\": {0:f},", val_a + val_b));
      context.Response.Write(string.Format("\"sub\": {0:f},", val_a - val_b));
      context.Response.Write(string.Format("\"mul\": {0:f},", val_a * val_b));
      context.Response.Write(string.Format("\"div\": {0:f}", (double)val_a / (double)val_b));
      context.Response.Write("}");
    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

解説

与えられた2つのパラメーターの四則演算を実行し、それぞれの結果を返します。結果はJSON形式のオブジェクトで返します。

HTMLファイル

JavaScriptを用いてASP.NETのロジックを呼び出すHTMLファイルです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript">
    function getJson() {
      //var xmlhttp = createXMLHttpRequest(); //旧バージョンのIEなどに対応する場合
      var xmlhttp = new XMLHttpRequest();

      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            var data = JSON.parse(xmlhttp.responseText);

            var elem = document.getElementById("output_name");
            elem.innerText = data.name;
            var elem = document.getElementById("output_weight");
            elem.innerText = data.weight;
            var elem = document.getElementById("output_height");
            elem.innerText = data.height;
            var elem = document.getElementById("output_price");
            elem.innerText = data.price;
            var elem = document.getElementById("output_memo");
            elem.innerText = data.memo;
          } else {
            alert("status = " + xmlhttp.status);
          }
        }
      }
      xmlhttp.open("GET", "http://utils.ipentec.com/jsontest/JsonHandler.ashx");
      xmlhttp.send();
    }

    function createXMLHttpRequest() {
      if (window.XMLHttpRequest) { return new XMLHttpRequest() }
      if (window.ActiveXObject) {
        try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch (e) { }
        try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch (e) { }
        try { return new ActiveXObject("Microsoft.XMLHTTP") } catch (e) { }
      }
      return false;
    }

  </script>
</head>
<body>
  <input id="Button_Get" type="button" value="JSON読み込み" onclick="getJson();" />
  <hr />
  <div>受信情報</div>
  Name:<span id="output_name"></span><br />
  Height:<span id="output_height"></span><br />
  Weight:<span id="output_weight"></span><br />
  Price:<span id="output_price"></span><br />
  Memo:<span id="output_memo"></span><br />

</body>
</html>