ASP.NET MVCでAjaxを使った非同期通信の実装方法！初心者でもわかるページ更新なしのデータ取得

Ajaxを使った非同期通信の実装方法

先生と生徒の会話形式で理解しよう

生徒

「ASP.NET MVCでデータを更新したいとき、ページ全体がリロードされてしまって不便です…。」

先生

「それは同期通信という動作ですね。ページ全体を更新する動きなので負担が大きい場合があります。」

生徒

「もっとスムーズに更新できる方法はありますか？」

先生

「そこで活躍するのが《Ajax（エイジャックス）》です！ページを更新せずにデータだけやり取りできます。」

1. Ajaxとは？初心者向けにやさしく解説

Ajaxとは、ページをリロードせずにサーバーとデータのやり取りができる仕組みのことです。画面全体を更新する必要がないため、ユーザーにとってスムーズで負担の少ない操作が実現できます。正式名称は「Asynchronous JavaScript + XML」ですが、仕組みをすべて覚える必要はありません。まずは“ページを切り替えずに情報が変わる技術”と理解すれば十分です。

イメージとしては、レストランで席に座ったまま店員さんに追加注文するようなものです。いちいちレジまで行かなくても、その場で注文が通り、テーブルに料理が運ばれてきます。Ajaxも同様に、画面をそのまま残したまま必要なデータだけを交換することができます。

実際のWebサービスでも活用例は多く、SNSの「いいね」や通知更新、ショッピングサイトのカート追加、チャットアプリのメッセージ更新など、日常的に目にする動きのほとんどがAjaxによる非同期通信で実現されています。ページ遷移がないため、ユーザー体験が大きく向上する重要な技術です。

下記は、JavaScriptの基本機能を使った「とても簡単なAjax風の動き」をイメージできるサンプルです（実際の通信は行いません）。


<button id="demoBtn" class="btn btn-secondary">メッセージ取得</button>
<p id="demoResult"></p>

<script>
document.getElementById("demoBtn").addEventListener("click", function () {
    // 通信した“つもり”でデータが返ってきたと仮定したサンプル
    const fakeResponse = "サーバーからデータを取得しました！（サンプル）";
    document.getElementById("demoResult").textContent = fakeResponse;
});
</script>

このように、ページを切り替えず画面の一部分だけが変わる動きこそが、Ajaxの大きな特徴です。ここから学んでいく本格的なAjax通信の理解にもつながりやすくなります。

2. ASP.NET MVCでAjax通信を行う流れ

ASP.NET MVCでAjax通信を使うときの基本的な流れは、とてもシンプルです。初心者がつまずきやすいポイントでもあるため、まずは「どんな順番で処理が進むのか」をイメージできるようになることが大切です。ここを理解しておくと、後の実装が驚くほどスムーズになります。

① JavaScript（jQuery）でサーバーにリクエストを送る
ボタンが押されたタイミングなどで、JavaScriptが“サーバーに対して質問を送る”役割を担当します。
② コントローラでそのリクエストを受け取り処理する
ASP.NET MVCのコントローラがリクエストを受け取り、必要な計算やデータ取得を行います。
③ JSONやHTMLとして結果を返す
完了した処理結果を、ブラウザ側が読み取りやすい形で返します。
④ ブラウザ側で結果を画面に反映する
JavaScriptが受け取ったデータを使い、ページの一部分だけを更新します。

この流れをより具体的にイメージできるように、簡単なサンプルを用意しました。以下は「サーバーに挨拶メッセージを送って返事をもらう」という、非常にシンプルな例です。


public class SampleController : Controller
{
    public JsonResult Hello()
    {
        return Json(new { message = "サーバーからこんにちは！" }, JsonRequestBehavior.AllowGet);
    }
}

このコントローラは、呼び出されるとメッセージを返してくれるだけのとても簡単なものです。次は、これを呼び出す側のJavaScriptを見てみましょう。


<button id="helloBtn" class="btn btn-warning">あいさつを取得</button>
<p id="helloText"></p>

<script>
$("#helloBtn").click(function () {
    $.ajax({
        url: "/Sample/Hello",
        type: "GET",
        success: function (data) {
            $("#helloText").text(data.message);
        }
    });
});
</script>

ボタンを押すとページは更新されず、受け取ったメッセージだけが画面に表示されます。これがAjaxを用いた非同期通信の基本的な流れであり、どのようなWebアプリでも応用できる重要な考え方です。

3. コントローラでデータを返す（JSON返却）

Ajax通信では、サーバーが返すデータの形式としてもっともよく使われるのがJSON（ジェイソン）です。JSONは「データをわかりやすく届けるための箱」のような役割を持ち、JavaScriptから扱いやすいため、初心者でも比較的すぐに使いこなせる形式です。ASP.NET MVCでは、コントローラで処理した結果を簡単にJSONとして返すことができます。


public class UserController : Controller
{
    public JsonResult GetTime()
    {
        // 現在の時刻を取得して JSON 形式で返すサンプル
        var now = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");
        return Json(new { time = now }, JsonRequestBehavior.AllowGet);
    }
}

このメソッドでは「現在時刻」を取得し、timeという名前のデータとして返しています。返却されたJSONは、ブラウザ側で「data.time」のように呼び出して利用できます。つまり、Controllerは“データの受け渡し役”として動き、必要な情報だけをすばやく提供してくれる存在なのです。

以下は JSON の中身がどのように見えるかのイメージです。


{
  "time": "2025/01/01 12:00:00"
}

数値や文字列だけでなく、複数のデータをまとめて返すことも可能です。例えば次のように、ユーザー情報を返すこともできます。


public JsonResult GetUser()
{
    return Json(
        new { name = "太郎", age = 25, message = "データ取得完了" },
        JsonRequestBehavior.AllowGet
    );
}

このように、Controllerは必要なデータを作成し、JSONとして返すだけという非常にシンプルな役割を担っています。後でJavaScript側から簡単に扱えるため、Ajax通信では欠かせない仕組みです。ASP.NET MVCを学ぶ上でも、まずは「Controller → JSON → JavaScript」の流れを理解しておくと、その後の応用がぐっと楽になります。

4. ViewでAjaxを実装する（jQueryを使用）

ボタンをクリックするとサーバーから時刻を取得し、画面に表示する例です。


<button id="btn" class="btn btn-primary">時刻取得</button>
<p id="result"></p>

<script>
$("#btn").click(function () {
    $.ajax({
        url: "/User/GetTime",
        type: "GET",
        success: function (data) {
            $("#result").text("現在時刻：" + data.time);
        }
    });
});
</script>

ページを更新せず、取得結果だけ反映できます。


現在時刻：2025/01/01 12:00:00

5. AjaxでPOST通信してサーバーへデータ送信

次に、入力した名前をサーバーへ送る例を紹介します。


<input type="text" id="name" placeholder="名前を入力" class="form-control mb-2">
<button id="send" class="btn btn-success">送信</button>
<p id="msg"></p>

<script>
$("#send").click(function () {
    $.ajax({
        url: "/User/SendName",
        type: "POST",
        data: { name: $("#name").val() },
        success: function (res) {
            $("#msg").text(res.message);
        }
    });
});
</script>

コントローラ側：


[HttpPost]
public JsonResult SendName(string name)
{
    return Json(new { message = name + "さん、データを受け取りました！" });
}

実行すると入力に応じて結果が返されます。


太郎さん、データを受け取りました！

6. 部分ビューを返して画面の一部を書き換える

Ajaxでは、JSONだけでなくHTMLを返して画面の一部を差し替える使い方も可能です。更新型のWebアプリで便利です。


public ActionResult GetList()
{
    var users = GetUserList();
    return PartialView("_UserList", users);
}

View側：


<div id="list-area"></div>
<button id="reload" class="btn btn-info">更新</button>

<script>
$("#reload").click(function () {
    $.ajax({
        url: "/User/GetList",
        type: "GET",
        success: function (html) {
            $("#list-area").html(html);
        }
    });
});
</script>

ボタンを押すたびに部分ビューが更新されます。

まとめ

ASP.NET MVCでAjaxを活用すると、ページ全体を更新する必要がなく、必要なデータだけを素早く取得できるという大きなメリットがあります。とくに初心者が最初に感じやすい「ページが毎回リロードされてストレスになる」「ボタンを押すたびに画面がちらつく」といった悩みを、Ajaxの非同期通信が自然に解決してくれます。Ajaxは、ASP.NET MVCのコントローラで返したJSON形式のデータをjQueryで受け取り、必要な部分だけ書き換えるという仕組みによって、動的で使いやすいWebアプリを構築するための重要な技術となります。今回の記事では、GET通信で時刻を取得する基本的なサンプル、POST通信で名前を送信してサーバー側からメッセージを返す処理、さらに部分ビューを差し替える実践的な方法まで、初心者でも理解しやすい順序で学びました。これらの操作は、実際の業務システムやSNS、ECサイト、管理画面など、さまざまな場面でよく利用されており、Ajaxを理解することでWebアプリの表現力がぐっと広がります。例えば、一覧データの更新、ボタンのクリックによるカート追加、ユーザー操作に応じた情報の即時反映など、近年のインタラクティブなWebサイトでは欠かせない動きです。ASP.NET MVCは部分ビューやJsonResultとの相性も良く、Ajaxを組み合わせることでより滑らかで心地よい操作感を実現できます。とくに非同期通信を使った学習では、画面の一部だけを書き換える発想が重要であり、これを理解するとアプリ全体の設計も自然と洗練されていきます。実務でも、Ajaxを使った画面更新やデータ取得は頻繁に使われるため、今回のサンプルはそのまま応用可能です。たとえば、部分ビューを更新する処理は在庫管理画面や予約一覧画面などにも利用でき、POST通信はユーザー登録やコメント投稿などに応用できます。ページ全体をリロードしないことで、サーバー負荷の軽減、ユーザー体験の向上、画面操作の効率化など多くのメリットがあります。ここでは、記事と同じ形式で簡単なサンプルコードを復習として掲載します。初心者でもイメージしやすいように構造を整え、理解しながら読み進められるよう配慮しています。

Ajax復習サンプルコード


<button id="check" class="btn btn-warning">データ確認</button>
<p id="area"></p>

<script>
$("#check").click(function () {
    $.ajax({
        url: "/User/GetTime",
        type: "GET",
        success: function (res) {
            $("#area").text("現在のサーバー時刻：" + res.time);
        }
    });
});
</script>

このように、jQueryを使ったAjax処理は短いコードで実装でき、扱いやすい点が特徴です。エラー処理やローディング表示などを組み合わせることで、より実用的な非同期通信が可能になり、初心者から中級者へのステップアップにもつながります。ASP.NET MVCでの非同期通信の基本をしっかり身につけておくことで、将来的に他のフレームワークやライブラリ（例えばReactやVue、Blazorなど）を学ぶ際にも役立ち、柔軟な開発スキルへとつながります。非同期通信という概念はどの技術でも共通する重要ポイントであり、今回の学習内容はその基礎として非常に価値があります。

先生と生徒の振り返り会話

生徒：「Ajaxって最初は難しそうだと思っていましたが、部分だけを書き換える仕組みが分かると、とても便利ですね！」

先生：「その通りです。画面全体を更新しないというだけで、体感速度が大きく変わりますし、ユーザーにとって使いやすいサイトになります。」

生徒：「特にJSON形式でデータを返す処理が思ったより簡単で驚きました！」

先生：「JSONは軽くて扱いやすいので、現代のWeb開発では標準のように使われています。ASP.NET MVCとAjaxの組み合わせも非常に強力ですよ。」

生徒：「部分ビューの差し替えも便利でした。管理画面などにも確かに使えそうです！」

先生：「その応用力が大切です。今回覚えた仕組みは、いろいろな場面で自然に使えるようになりますよ。」