Meneruskan Daftar Objek Ke Metode Pengontrol MVC Menggunakan jQuery Ajax

Saya mencoba untuk melewatkan array objek ke dalam metode pengontrol MVC menggunakan fungsi ajax () jQuery. Ketika saya masuk ke metode pengontrol PassThing () C #, argumen "hal" adalah null. Saya sudah mencoba ini menggunakan tipe List untuk argumennya, tetapi itu juga tidak berhasil. Apa yang saya lakukan salah?

<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; }
    }
}

Dengan menggunakan saran NickW, saya bisa membuatnya berfungsi menggunakan things = JSON.stringify({ 'things': things });Berikut ini kode lengkapnya.

$(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; }
}

Ada dua hal yang saya pelajari dari ini:

1. Pengaturan contentType dan dataType mutlak diperlukan dalam fungsi ajax (). Itu tidak akan berhasil jika mereka hilang. Saya menemukan ini setelah banyak trial and error.

2. Untuk meneruskan larik objek ke metode pengontrol MVC, cukup gunakan format JSON.stringify ({'things': things}).

Saya harap ini membantu orang lain!

Tidak bisakah kamu melakukan ini?

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.');
   });

... dan tandai tindakan Anda dengan

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

Memformat data Anda yang mungkin menjadi masalah. Coba salah satu dari ini:

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

Atau (dari Bagaimana saya bisa memposting array string ke ASP.NET MVC Controller tanpa formulir? )

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

Saya menggunakan Aplikasi Web .Net Core 2.1 dan tidak bisa mendapatkan satu jawaban pun di sini untuk berfungsi. Saya mendapat parameter kosong (jika metode ini dipanggil sama sekali) atau kesalahan server 500. Saya mulai bermain dengan setiap kemungkinan kombinasi jawaban dan akhirnya mendapatkan hasil yang berhasil.

Dalam kasus saya, solusinya adalah sebagai berikut:

Script - merangkai array asli (tanpa menggunakan properti bernama)

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

Dan dalam metode pengontrol, gunakan [FromBody]

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

Kegagalan meliputi:

• Memberi nama pada konten

  data: {content: node}, // Kesalahan server 500

• Tidak memiliki contentType = Kesalahan server 500

Catatan

• dataTypetidak diperlukan, terlepas dari apa yang dikatakan beberapa jawaban, karena itu digunakan untuk decoding respons (jadi tidak relevan dengan contoh permintaan di sini).
• List<Thing> juga bekerja dalam metode pengontrol

Saya punya jawaban yang sempurna untuk semua ini: Saya mencoba begitu banyak solusi yang tidak bisa akhirnya saya sendiri dapat mengelola, silakan temukan jawaban detail di bawah ini:

       $.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);
            }
        });

Pengontrol

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
  }

Satu-satunya cara saya bisa membuat ini berfungsi adalah dengan meneruskan JSON sebagai string dan kemudian deserialise menggunakan JavaScriptSerializer.Deserialize<T>(string input), yang cukup aneh jika itu adalah deserializer default untuk MVC 4.

Model saya memiliki daftar objek bersarang dan yang terbaik yang bisa saya peroleh dengan menggunakan data JSON adalah daftar paling atas untuk memiliki jumlah item yang benar di dalamnya, tetapi semua bidang dalam item tersebut null.

Hal semacam ini seharusnya tidak terlalu sulit.

    $.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);

Ini adalah kode yang berfungsi untuk kueri Anda, Anda dapat menggunakannya.

Pengontrol

    [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");
   }
   });

Membungkus daftar objek Anda dengan objek lain yang berisi properti yang sesuai dengan nama parameter yang diharapkan oleh pengontrol MVC bekerja. Bit yang penting menjadi pembungkus di sekitar daftar objek.

$(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; }
}

     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");
    }
});

Jika Anda menggunakan ASP.NET Web API maka Anda harus lulus data: JSON.stringify(things).

Dan pengontrol Anda akan terlihat seperti ini:

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

Modifikasi dari @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
      }

Apa yang saya lakukan ketika mencoba mengirim beberapa data dari beberapa baris yang dipilih dalam tindakan DataTable ke MVC:

HTML Di awal halaman:

@Html.AntiForgeryToken()

(hanya satu baris yang ditampilkan, ikat dari model):

 @foreach (var item in Model.ListOrderLines)
                {
                    <tr data-orderid="@item.OrderId" data-orderlineid="@item.OrderLineId" data-iscustom="@item.IsCustom">
                        <td>@item.OrderId</td>
                        <td>@item.OrderDate</td>
                        <td>@item.RequestedDeliveryDate</td>
                        <td>@item.ProductName</td>
                        <td>@item.Ident</td>
                        <td>@item.CompanyName</td>
                        <td>@item.DepartmentName</td>
                        <td>@item.ProdAlias</td>
                        <td>@item.ProducerName</td>
                        <td>@item.ProductionInfo</td>
                    </tr>
                }

Tombol yang memulai fungsi JavaScript:

 <button class="btn waves-effect waves-light btn-success" onclick="ProcessMultipleRows();">Start</button>

Fungsi JavaScript:

  function ProcessMultipleRows() {
            if ($(".dataTables_scrollBody>tr.selected").length > 0) {
                var list = [];
                $(".dataTables_scrollBody>tr.selected").each(function (e) {
                    var element = $(this);
                    var orderid = element.data("orderid");
                    var iscustom = element.data("iscustom");
                    var orderlineid = element.data("orderlineid");
                    var folderPath = "";
                    var fileName = "";

                    list.push({ orderId: orderid, isCustomOrderLine: iscustom, orderLineId: orderlineid, folderPath: folderPath, fileName : fileName});
                });

                $.ajax({
                    url: '@Url.Action("StartWorkflow","OrderLines")',
                    type: "post", //<------------- this is important
                    data: { model: list }, //<------------- this is important
                    beforeSend: function (xhr) {//<--- This is important
                      xhr.setRequestHeader("RequestVerificationToken",
                      $('input:hidden[name="__RequestVerificationToken"]').val());
                      showPreloader();
                    },
                    success: function (data) {

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                    },
                     complete: function () {
                         hidePreloader();
                    }
                });
            }
        }

Tindakan MVC:

[HttpPost]
[ValidateAntiForgeryToken] //<--- This is important
public async Task<IActionResult> StartWorkflow(IEnumerable<WorkflowModel> model)

Dan MODEL di C #:

public class WorkflowModel
 {
        public int OrderId { get; set; }
        public int OrderLineId { get; set; }
        public bool IsCustomOrderLine { get; set; }
        public string FolderPath { get; set; }
        public string FileName { get; set; }
 }

KESIMPULAN:

Alasan ERROR:

"Failed to load resource: the server responded with a status of 400 (Bad Request)"

Atribut Is: [ValidateAntiForgeryToken]untuk aksi MVCStartWorkflow

Solusi dalam panggilan Ajax:

  beforeSend: function (xhr) {//<--- This is important
                      xhr.setRequestHeader("RequestVerificationToken",
                      $('input:hidden[name="__RequestVerificationToken"]').val());
                    },

Untuk mengirim List of object Anda perlu membentuk data seperti di contoh (mengisi list object) dan:

data: {model: list},

ketik: "post",

Beginilah cara kerjanya dengan baik bagi saya:

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: '/Controller/action',
    data: { "things": things },
    success: function () {
        $('#result').html('"PassThings()" successfully called.');
    },
    error: function (response) {
        $('#result').html(response);
    }
});

Dengan "ContentType" dengan huruf besar "C".