web-dev-qa-db-ja.com

jQuery Ajaxを使用してMVCコントローラーメソッドにオブジェクトのリストを渡す

私はjQueryのajax（）関数を使ってMVCコントローラーメソッドにオブジェクトの配列を渡そうとしています。 PassThing（）C＃コントローラメソッドを使用するとき、引数 "things"はnullです。私はこれを引数にList型のリストを使って試しましたが、それもうまくいきません。何がおかしいのですか？

<script type="text/javascript">
    $(document).ready(function () {
        var things = [
            { id: 1, color: 'yellow' },
            { id: 2, color: 'blue' },
            { id: 3, color: 'red' }
        ];

        $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: '/Xhr/ThingController/PassThing',
            data: JSON.stringify(things)
        });
    });
</script>

public class ThingController : Controller
{
    public void PassThing(Thing[] things)
    {
        // do stuff with things here...
    }

    public class Thing
    {
        public int id { get; set; }
        public string color { get; set; }
    }
}
c#asp.net-mvcjquery
104
Halcyon

NickWの提案を使用して、things = JSON.stringify({ 'things': things });を使用してこれを機能させることができました。これは完全なコードです。

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

    things = JSON.stringify({ 'things': things });

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


public void PassThings(List<Thing> things)
{
    var t = things;
}

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

これから学んだことが2つあります。

  1. Ajax（）関数では、contentTypeとdataTypeの設定が絶対に必要です。足りない場合は機能しません。私は多くの試行錯誤の末にこれを見つけました。

  2. オブジェクトの配列をMVCコントローラメソッドに渡すには、単純にJSON.stringify（{'things'：things}）形式を使用します。

私はこれが他の人に役立つことを願っています！

165
Halcyon

あなたはこれをしてもらえませんか？

var things = [
    { id: 1, color: 'yellow' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'red' }
];
$.post('@Url.Action("PassThings")', { things: things },
   function () {
        $('#result').html('"PassThings()" successfully called.');
   });

...であなたの行動をマークしてください

[HttpPost]
public void PassThings(IEnumerable<Thing> things)
{
    // do stuff with things here...
}
28
lanternmarsh

あなたのデータをフォーマットすることは問題かもしれません。次のいずれかを試してください。

data: '{ "things":' + JSON.stringify(things) + '}',

または（from フォームなしで文字列の配列をASP.NET MVC Controllerに投稿する方法は？ ）

var postData = { things: things };
...
data = postData
12
nick_w

.Net Core 2.1 Webアプリケーションを使用していますが、ここで1つの回答が得られませんでした。空のパラメータ（メソッドが呼び出された場合）または500サーバーエラーが発生しました。私は可能な限りの答えの組み合わせで遊び始め、ついに作業結果を得ました。

私の場合、解決策は次のとおりです。

スクリプト - 元の配列を文字列化する（名前付きプロパティを使わずに）

    $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: mycontrolleraction,
        data: JSON.stringify(things)
    });

そしてコントローラーメソッドでは、[FromBody]を使用します

    [HttpPost]
    public IActionResult NewBranch([FromBody]IEnumerable<Thing> things)
    {
        return Ok();
    }

失敗は次のとおりです。

  • コンテンツの命名

    データ：{content：nodes}、//サーバーエラー500

  • ContentType = Serverエラー500を持たない

ノート

  • いくつかの答えが言っているにもかかわらず、dataTypeは必要ありません。これはresponseデコードに使用されるためです（したがって、requestの例には関係ありません）。
  • List<Thing>はコントローラーメソッドでも動作します
9
Gone Coding

これを機能させる唯一の方法は、JSONを文字列として渡してからJavaScriptSerializer.Deserialize<T>(string input)を使用してデシリアライズすることです。これがMVC 4のデフォルトのデシリアライザである場合、これはかなり奇妙なことです。

私のモデルはオブジェクトのリストを入れ子にしていて、私がJSONデータを使って得ることができる最善のものはそれの中にアイテムの正しい数を持つための一番上のリストですが、アイテムのすべてのフィールドはnullでした。

このようなことはそれほど難しいことではありません。

    $.ajax({
        type: 'POST',
        url: '/Agri/Map/SaveSelfValuation',
        data: { json: JSON.stringify(model) },
        dataType: 'text',
        success: function (data) {

    [HttpPost]
    public JsonResult DoSomething(string json)
    {
        var model = new JavaScriptSerializer().Deserialize<Valuation>(json);
7
user1650892

私はこのすべてに完璧な答えを持っています。

       $.ajax({
            traditional: true,
            url: "/Conroller/MethodTest",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify( 
               [
                { id: 1, color: 'yellow' },
                { id: 2, color: 'blue' },
                { id: 3, color: 'red' }
                ]),
            success: function (data) {
                $scope.DisplayError(data.requestStatus);
            }
        });

コントローラー

public class Thing
{
    public int id { get; set; }
    public string color { get; set; }
}

public JsonResult MethodTest(IEnumerable<Thing> datav)
    {
   //now  datav is having all your values
  }
6
Veera Induvasi

コントローラ.

ジャバスクリプト

    [HttpPost]
    public ActionResult save(List<ListName> listObject)
    {
    //operation return
    Json(new { istObject }, JsonRequestBehavior.AllowGet); }
    }

javascript

  $("#btnSubmit").click(function () {
    var myColumnDefs = [];
    $('input[type=checkbox]').each(function () {
        if (this.checked) {
            myColumnDefs.Push({ 'Status': true, 'ID': $(this).data('id') })
        } else {
            myColumnDefs.Push({ 'Status': false, 'ID': $(this).data('id') })
        }
    });
   var data1 = { 'listObject': myColumnDefs};
   var data = JSON.stringify(data1)
   $.ajax({
   type: 'post',
   url: '/Controller/action',
   data:data ,
   contentType: 'application/json; charset=utf-8',
   success: function (response) {
    //do your actions
   },
   error: function (response) {
    alert("error occured");
   }
   });
4
sach4all
     var List = @Html.Raw(Json.Encode(Model));
$.ajax({
    type: 'post',
    url: '/Controller/action',
    data:JSON.stringify({ 'item': List}),
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        //do your actions
    },
    error: function (response) {
        alert("error occured");
    }
});
1
Athul Nalupurakkal

オブジェクトのリストを、MVCコントローラーが機能すると予想されるパラメーターの名前と一致するプロパティーを含む別のオブジェクトでラップする。重要な点は、オブジェクトリストのラッパーです。

$(document).ready(function () {
    var employeeList = [
        { id: 1, name: 'Bob' },
        { id: 2, name: 'John' },
        { id: 3, name: 'Tom' }
    ];      

    var Employees = {
      EmployeeList: employeeList
    }

    $.ajax({
        dataType: 'json',
        type: 'POST',
        url: '/Employees/Process',
        data: Employees,
        success: function () {          
            $('#InfoPanel').html('It worked!');
        },
        failure: function (response) {          
            $('#InfoPanel').html(response);
        }
    }); 
});


public void Process(List<Employee> EmployeeList)
{
    var emps = EmployeeList;
}

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
}
0
Hoodlum

@veeresh iからの変更点

 var data=[

                        { id: 1, color: 'yellow' },
                        { id: 2, color: 'blue' },
                        { id: 3, color: 'red' }
                        ]; //parameter
        var para={};
        para.datav=data;   //datav from View


        $.ajax({
                    traditional: true,
                    url: "/Conroller/MethodTest",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data:para,
                    success: function (data) {
                        $scope.DisplayError(data.requestStatus);
                    }
                });

In MVC



public class Thing
    {
        public int id { get; set; }
        public string color { get; set; }
    }

    public JsonResult MethodTest(IEnumerable<Thing> datav)
        {
       //now  datav is having all your values
      }
0
Minhajul Islam

ASP.NET Web APIを使用している場合は、data: JSON.stringify(things)を渡す必要があります。

そしてあなたのコントローラはこのように見えるはずです：

public class PassThingsController : ApiController
{
    public HttpResponseMessage Post(List<Thing> things)
    {
        // code
    }
}
0
FleGMan