C#、JavaScript、jQuery を使用して複雑なオブジェクトの配列を JSON 形式で ASP.NET MVC コントローラーに投稿する方法

2024-04-08

C#, JavaScript、jQuery を使用して複雑なオブジェクトの配列を JSON 形式で ASP.NET MVC コントローラーに投稿する方法

前提条件

このチュートリアルを始める前に、以下のものが必要です。

  • Visual Studio 2019 以降
  • ASP.NET MVC 5 以降
  • jQuery ライブラリ

手順

  1. モデルの作成

まず、投稿するオブジェクトを表すモデルクラスを作成する必要があります。ここでは、Person クラスという名前のシンプルなモデルクラスを作成します。

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}
  1. コントローラーの作成

次に、投稿されたデータを受け取るコントローラーを作成する必要があります。ここでは、HomeController という名前のコントローラーを作成し、PostData という名前のアクションメソッドを追加します。

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult PostData(IEnumerable<Person> people)
    {
        // 投稿されたデータ処理
        return Json(new { success = true });
    }
}
  1. ビューの作成

最後に、データを投稿するためのビューを作成する必要があります。ここでは、Index.cshtml という名前のビューを作成し、jQuery を使用して JSON 形式でデータを投稿するコードを追加します。

@model IEnumerable<Person>

<script src="~/Scripts/jquery-3.5.1.min.js"></script>

<script>
$(function () {
    $("#submit").click(function () {
        var people = [];

        // 各フォーム要素からデータを取得
        $(".person").each(function () {
            var name = $(this).find(".name").val();
            var age = $(this).find(".age").val();

            people.push({
                Name: name,
                Age: age
            });
        });

        // データを JSON 形式で送信
        $.ajax({
            url: "/Home/PostData",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(people),
            success: function (response) {
                // 送信成功時の処理
            },
            error: function (xhr, status, error) {
                // 送信失敗時の処理
            }
        });
    });
});
</script>

<form>
    <div class="person">
        <label for="name">名前:</label>
        <input type="text" class="name" />

        <label for="age">年齢:</label>
        <input type="number" class="age" />
    </div>

    <div class="person">
        </div>

    <input type="button" id="submit" value="送信" />
</form>
  1. コードの実行

上記のコードをすべて作成したら、Visual Studio でプロジェクトを実行できます。ブラウザで localhost:5000 にアクセスすると、データ投稿用のフォームが表示されます。

フォームに入力して 送信 ボタンをクリックすると、データが JSON 形式で PostData アクションメソッドに送信されます。

  1. データの処理

PostData アクションメソッドでは、people パラメーターを使用して送信されたデータを受け取ることができます。このパラメーターは、Person クラスのオブジェクトの IEnumerable コレクションです。

このコレクションをループ処理して、各オブジェクトのデータを取得することができます。

このチュートリアルでは、C#、JavaScript、jQuery を使用して複雑なオブジェクトの配列を JSON 形式で ASP.NET MVC コントローラーに投稿する方法を説明しました。

この方法を使用することで、さまざまな種類のデータをサーバーに送信することができます。

補足

  • このチュートリアルでは、シンプルなモデルクラスを使用していますが、実際のアプリケーションでは、より複雑なモデルクラスを使用することができます。
  • 送信するデータ量が多い場合は、JSON 形式以外の形式を使用することもできます。


public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult PostData(IEnumerable<Person> people)
    {
        // 投稿されたデータ処理
        return Json(new { success = true });
    }
}

ビュー:

@model IEnumerable<Person>

<script src="~/Scripts/jquery-3.5.1.min.js"></script>

<script>
$(function () {
    $("#submit").click(function () {
        var people = [];

        // 各フォーム要素からデータを取得
        $(".person").each(function () {
            var name = $(this).find(".name").val();
            var age = $(this).find(".age").val();

            people.push({
                Name: name,
                Age: age
            });
        });

        // データを JSON 形式で送信
        $.ajax({
            url: "/Home/PostData",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(people),
            success: function (response) {
                // 送信成功時の処理
            },
            error: function (xhr, status, error) {
                // 送信失敗時の処理
            }
        });
    });
});
</script>

<form>
    <div class="person">
        <label for="name">名前:</label>
        <input type="text" class="name" />

        <label for="age">年齢:</label>
        <input type="number" class="age" />
    </div>

    <div class="person">
        </div>

    <input type="button" id="submit" value="送信" />
</form>


C#、JavaScript、jQuery を使用して複雑なオブジェクトの配列を JSON 形式で ASP.NET MVC コントローラーに投稿する他の方法

ASP.NET MVC の AjaxHelper を使用する

ASP.NET MVC には、Ajax 処理を簡単にするための AjaxHelper が用意されています。

@using (Ajax.BeginForm("PostData", "Home", new AjaxOptions { HttpMethod = "POST" }))
{
    <div class="person">
        <label for="name">名前:</label>
        <input type="text" class="name" />

        <label for="age">年齢:</label>
        <input type="number" class="age" />
    </div>

    <div class="person">
        </div>

    <input type="submit" value="送信" />
}

上記のコードでは、Ajax.BeginForm ヘルパーを使用して Ajax フォームを作成しています。

Ajax.BeginForm ヘルパーには、以下の属性を指定しています。

  • action: 送信先の URL
  • controller: 送信先のコントローラー
  • httpMethod: 送信方法

フォーム内の要素は、@Html.EditorFor ヘルパーを使用して自動的に生成されます。

送信ボタンをクリックすると、Ajax リクエストが送信され、PostData アクションメソッドが呼び出されます。

FormData オブジェクトを使用して、データを FormData オブジェクトに追加し、それを Ajax リクエストで送信することができます。

<script>
$(function () {
    $("#submit").click(function () {
        var formData = new FormData();

        // 各フォーム要素からデータを取得
        $(".person").each(function () {
            var name = $(this).find(".name").val();
            var age = $(this).find(".age").val();

            formData.append("people", JSON.stringify({
                Name: name,
                Age: age
            }));
        });

        // データを FormData オブジェクトで送信
        $.ajax({
            url: "/Home/PostData",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                // 送信成功時の処理
            },
            error: function (xhr, status, error) {
                // 送信失敗時の処理
            }
        });
    });
});
</script>

<form>
    <div class="person">
        <label for="name">名前:</label>
        <input type="text" class="name" />

        <label for="age">年齢:</label>
        <input type="number" class="age" />
    </div>

    <div class="person">
        </div>

    <input type="button" id="submit" value="送信" />
</form>

上記のコードでは、FormData オブジェクトを使用して、フォームデータを取得しています。

FormData オブジェクトには、append メソッドを使用して、データを追加することができます。

append メソッドには、キーと値を指定します。

キーは、サーバー側でデータを受け取る際に使用されます。

値は、送信するデータです。

上記のコードでは、JSON.stringify メソッドを使用して、データを JSON 形式に変換しています。

Axios ライブラリを使用して、Ajax リクエストを送信することができます。

<script src="~/Scripts/axios.min.js"></script>

<script>
$(function () {
    $("#submit").click(function () {
        var people = [];

        // 各フォーム要素からデータを取得
        $(".person").each(function () {
            var name = $(this).find(".name").val();
            var age = $(this).find(".age").val();

            people.push({
                Name: name,
                Age: age
            });
        });

        // Axios ライブラリを使用して、データを送信
        axios.post("/Home/PostData", people)
            .then(function (response) {
                // 送信成功時の処理
            })
            .catch(function (error) {
                // 送信失敗時の処理
            });
    });
});
</script>

<form>
    <div class="person">
        <label for="name">名前:</label>

c# javascript jquery

JavaScript/jQuery：配列を制覇せよ！includes、indexOf、filter、findを使いこなす

includes メソッドは、配列に特定の要素が含まれているかどうかを調べるために使用されます。この例では、fruits 配列に "banana" が含まれているため、isBananaIncluded 変数は true になります。indexOf メソッドは、配列内における特定の要素の最初の出現位置を返します。要素が見つからない場合は -1 を返します。...

 
javascript jquery arrays JavaScript/jQuery：配列を制覇せよ！includes、indexOf、filter、findを使いこなす

JavaScriptで配列を賢く操る: Array.prototype.slice.call の活用術

配列スライシング:既存の配列の一部を切り出し、新しい配列として取得できます。開始インデックスと終了インデックスを指定することで、必要な部分のみを効率的に抽出できます。元の配列は変更されず、新しい配列だけが生成されます。疑似配列の変換:arguments オブジェクトのような、配列と似ているけど実際には配列ではないオブジェクトを、真の配列に変換できます。...

 
javascript arrays JavaScriptで配列を賢く操る: Array.prototype.slice.call の活用術

ドラッグでゴーストが出ないのはなぜ？CSSとJavaScriptでドラッグゴースト画像を非表示にする仕組み

ここでは、CSSとJavaScriptを使用して、ドラッグゴースト画像を非表示にする方法を解説します。方法 1: CSS のみを使用するCSSのみでドラッグゴースト画像を非表示にするには、以下のプロパティを要素に設定します。上記のコードは、主要なブラウザでドラッグゴースト画像を非表示にします。...

 
javascript html css ドラッグでゴーストが出ないのはなぜ？CSSとJavaScriptでドラッグゴースト画像を非表示にする仕組み

【初心者向け】JavaScriptで5秒待ってから次の処理を実行する方法を徹底解説！

イベントリスナーは、特定のイベントが発生したときに実行される関数を定義するものです。DOM イベント完了を待機するには、以下の手順でイベントリスナーを使用します。待機したいイベントの種類を決定します。(例: click, load, DOMContentLoaded)...

 
javascript dom events 【初心者向け】JavaScriptで5秒待ってから次の処理を実行する方法を徹底解説！

ReactJSで「this.setState isn't merging states as I would expect」の謎を解き明かす！

原因: this. setStateは非同期処理であるため、状態更新が即座に反映されないことがあります。また、this. setStateを連続して呼び出すと、状態更新がキューに溜まり、まとめて処理されるため、期待通りの状態にならないことがあります。...

 
javascript reactjs ReactJSで「this.setState isn't merging states as I would expect」の謎を解き明かす！

SQL SQL SQL SQL Amazon で見る