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を使用）

ここからは、実際に画面側（View）でAjaxを使い、サーバーにデータを取りに行く処理を作っていきます。といっても難しく考える必要はありません。ボタンを押したらサーバーに「今の時刻を教えて」とお願いし、その結果だけを書き換えるという、とてもシンプルな流れです。ページ全体を読み込み直す必要がないため、ユーザーにとっても軽快に動作するしくみが作れます。

まずは、最小限の構成で「時刻を取得する」例を見てみましょう。


<button id="btn" class="btn btn-primary">時刻を取得する</button>
<p id="result" class="mt-2"></p>

<script>
// ボタンが押されたときに処理を実行
$("#btn").click(function () {
    $.ajax({
        url: "/User/GetTime",   // 先ほど作成したコントローラのURL
        type: "GET",            // 今回はデータ取得なので GET を使用
        success: function (data) {
            // サーバーから返ってきた JSON の「time」部分を表示
            $("#result").text("現在時刻：" + data.time);
        },
        error: function () {
            $("#result").text("時刻が取得できませんでした。");
        }
    });
});
</script>

このコードでは、「#btn」がクリックされたらAjax通信を開始するという処理を書いています。サーバーが返したJSONデータ（例：{ time: "2025/01/01 12:00:00" }）は、data.timeとして取り出せる仕組みになっています。初めて見ると難しく感じる部分かもしれませんが、仕組み自体はとてもシンプルで、1つのボタン操作をきっかけに画面の一部分だけを切り替える“部分更新”が可能になります。

実際の動作イメージは次のようになります。


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

ページ全体はまったくリロードされず、必要な部分だけがスッと切り替わるため、操作が途切れず使いやすさが大きく向上します。ここで学んだ構造は、ボタン操作だけでなく、フォーム送信や自動更新などにも応用できるため、Ajaxの基礎としてぜひ押さえておきたいポイントです。

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

ここでは、ユーザーが入力したデータをサーバーに送り、その返事を画面に表示する仕組みを作っていきます。Ajaxでは「ページを切り替えずにデータを送信すること」ができるため、フォーム入力などと非常に相性が良い方法です。たとえば、ちょっとした確認メッセージを出したいときや、データ登録の前段階のチェックなどにも気軽に利用できます。

まずは、名前を入力してサーバーに送り、その返事を受け取る簡単なサンプルを見てみましょう。


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

<script>
// 「送信」ボタンが押されたらサーバーへデータを送る
$("#send").click(function () {
    const userName = $("#name").val(); // 入力された名前を取得

    // 入力チェック（初心者向けの簡単な例）
    if (!userName) {
        $("#msg").text("名前を入力してください。");
        return;
    }

    $.ajax({
        url: "/User/SendName",
        type: "POST",
        data: { name: userName },  // サーバーへ送るデータ
        success: function (res) {
            // サーバーから返ってきたメッセージを表示
            $("#msg").text(res.message);
        },
        error: function () {
            $("#msg").text("通信に失敗しました。もう一度お試しください。");
        }
    });
});
</script>

この仕組みでは、JavaScriptがサーバーへデータを送り、コントローラがそれを受け取って処理します。処理が終わるとサーバーは JSON を返し、それを受け取った画面側が結果を表示する流れです。通信が行われてもページ全体はリロードされないため、ユーザーが操作を中断することなくスムーズに使い続けることができます。

続いて、サーバー側でデータを受け取るコントローラのサンプルです。


[HttpPost]
public JsonResult SendName(string name)
{
    // 受け取った名前に応じたメッセージを返すサンプル
    return Json(new { message = name + "さん、データを受け取りました！" });
}

このコントローラは、受け取った「name」を使ってメッセージを作り、そのままJSONとして返しています。実行すると次のようなメッセージが画面に表示されます。


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

わずかなコードで「ページを更新せずにデータを送信して結果を受け取る」という、Webアプリの基本ともいえる動作が実現できます。Ajax の POST 通信は、ユーザー入力を扱う場面で特に役立つため、ぜひ一度手を動かして流れを確認してみてください。

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の組み合わせも非常に強力ですよ。」

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

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