ASP.NET MVC AJAX

ASP.NET MVCでAJAXを使ってみます。

POST

サーバ側処理

コントローラを「MVC5コントローラー-空」で作成します。ファイル名は「AjController.cs」で作成しました。

				
using System;
using System.Collections.Generic;
using System.Web.Mvc;

namespace HelloWorld3.Controllers
{
    public class AjController : Controller
    {
        public ActionResult AjaxTest()
        {
            return View();
        }


        [HttpPost]
        public ActionResult Test(string str1, string str2)
        {
            IDictionary<String, String> dic = new Dictionary<String, String>();
            dic.Add(str1, str2);
            return Json(dic);
        }
    }
}

クライアント側処理

コントローラを作成すると、Viewsにコントローラに対応するフォルダ(Aj)が作成されているので、この中にViewを作成します。
ファイル名は「AjaxTest.cshtml」としました。

				

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AjaxTest</title>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {

            var param = {
                str1: "Hello",
                str2: "World!!"
            };

            $.ajax({
                url: '@Url.Action("Test", "Aj")',
                type: "POST",
                data: param
            }).done(function (data, status, xhr) {
                // 正常
                for (var key in data) {
                    alert(key + " " + data[key]);
                }
            }).fail(function (xhr, status, error) {
                // 異常
                alert(error);
            }).always(function (data, status, xhr) {
                // 常に
            });
        });

    </script>
</head>
<body>
    AjaxTest
</body>
</html>

        }
    }
}

urlは、@Url.Actionで指定しています。直でURLを記述するとVisualStudioでは動作しますが、
本番環境に入れたときに404エラー(該当ページなし)になります。注意して下さい。

GET

サーバ側処理

コントローラを「MVC5コントローラー-空」で作成します。ファイル名は「AjController.cs」で作成しました。

				
using System;
using System.Collections.Generic;
using System.Web.Mvc;

namespace HelloWorld3.Controllers
{
    public class AjController : Controller
    {
        public ActionResult AjaxTest()
        {
            return View();
        }

        public ActionResult Test(string str1, string str2)
        {
            IDictionary<String, String> dic = new Dictionary<String, String>();
            dic.Add(str1, str2);
            return Json(dic, JsonRequestBehavior.AllowGet);
        }
    }
}

クライアント側処理

				

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AjaxTest</title>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {

            var param = {
                str1: "Hello",
                str2: "World!!"
            };

            $.ajax({
                url: "/Aj/Test",
                type: "GET",
                data: param
            }).done(function (data, status, xhr) {
                // 正常
                for (var key in data) {
                    alert(key + " " + data[key]);
                }
            }).fail(function (xhr, status, error) {
                // 異常
                alert(error);
            }).always(function (data, status, xhr) {
                // 常に
            });
        });

    </script>
</head>
<body>
    AjaxTest
</body>
</html>

実行イメージ

ページのトップへ戻る