jQuery AJAX を使用してオブジェクトの配列を MVC コントローラーに渡す方法

jQuery AJAX を使用してオブジェクトの配列を MVC コントローラーに送信する

jQuery の ajax() メソッドを使用してオブジェクトの配列を MVC コントローラーに送信する場合、一般的な問題はコントローラーで配列の null 値を受信することです。 これは、コントローラー パラメーターが List<t></t>.

として正しく定義されている場合でも発生する可能性があります。

この解決策には 2 つの重要な調整が必要です:

1. JSON データ型を指定します: ajax() 呼び出しでは、contentType と dataType の両方を明示的に 'application/json; charset=utf-8' に設定する必要があります。

2. JSON.stringify() によるデータのシリアル化: オブジェクトの JavaScript 配列は、JSON.stringify() を使用して JSON 文字列に変換する必要があります。 重要なのは、この文字列はプロパティ (例: 'things') 内の配列をカプセル化する必要があります。

これらの変更を実装した修正コードは次のとおりです:

$(document).ready(function () {
    const things = [
        { id: 1, color: 'yellow' },
        { id: 2, color: 'blue' },
        { id: 3, color: 'red' }
    ];      

    const data = JSON.stringify({ things: things });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Home/PassThings',
        data: data,
        success: function () {          
            $('#result').html('"PassThings()" successfully called.');
        },
        error: function (response) {          
            $('#result').html(response.responseText); // Display error details
        }
    }); 
});

および対応する C# コントローラー メソッド:

public void PassThings(List<Thing> things)
{
    // Access the 'things' array here
}

public class Thing
{
    public int Id { get; set; }
    public string Color { get; set; }
}

これらの手順に従うことで、jQuery AJAX 経由でオブジェクトの配列を MVC コントローラー メソッドに正常に送信できます。 エラー処理を改善し、デバッグ目的で応答テキストを表示するために、AJAX 呼び出しの failure から error への変更に注意してください。

以上がjQuery AJAX を使用してオブジェクトの配列を MVC コントローラーに渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。