การส่งรายการวัตถุไปยังวิธีการควบคุม MVC โดยใช้ jQuery Ajax

ฉันกำลังพยายามส่งอาร์เรย์ของวัตถุไปยังวิธีการควบคุม MVC โดยใช้ฟังก์ชัน ajax () ของ jQuery เมื่อฉันเข้าสู่เมธอดคอนโทรลเลอร์ PassThing () C # อาร์กิวเมนต์ "things" จะเป็นโมฆะ ฉันได้ลองสิ่งนี้โดยใช้ประเภทรายการสำหรับอาร์กิวเมนต์ แต่ก็ไม่ได้ผลเช่นกัน ผมทำอะไรผิดหรือเปล่า?

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

ด้วยคำแนะนำของ 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; }
}

มีสองสิ่งที่ฉันได้เรียนรู้จากสิ่งนี้:

1. การตั้งค่า contentType และ dataType จำเป็นอย่างยิ่งในฟังก์ชัน ajax () มันจะไม่ทำงานถ้าพวกเขาหายไป ฉันพบสิ่งนี้หลังจากลองผิดลองถูกมากมาย

2. ในการส่งอาร์เรย์ของออบเจ็กต์ไปยังเมธอดคอนโทรลเลอร์ MVC ให้ใช้รูปแบบ JSON.stringify ({'things': things})

ฉันหวังว่านี่จะช่วยคนอื่นได้!

คุณทำสิ่งนี้ไม่ได้เหรอ?

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

การจัดรูปแบบข้อมูลของคุณที่อาจเป็นปัญหา ลองทำอย่างใดอย่างหนึ่งต่อไปนี้:

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

หรือ (จากฉันจะโพสต์อาร์เรย์ของสตริงไปยัง ASP.NET MVC Controller โดยไม่มีแบบฟอร์มได้อย่างไร )

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

ฉันใช้เว็บแอปพลิเคชัน. Net Core 2.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 = ข้อผิดพลาดเซิร์ฟเวอร์ 500

หมายเหตุ

• dataTypeไม่จำเป็นแม้ว่าบางคำตอบจะพูดว่าอย่างไรเนื่องจากใช้สำหรับการถอดรหัสคำตอบ (จึงไม่เกี่ยวข้องกับตัวอย่างคำขอที่นี่)
• List<Thing> ยังทำงานในวิธีการควบคุม

ฉันมีคำตอบที่สมบูรณ์แบบสำหรับทั้งหมดนี้: ฉันลองใช้วิธีแก้ปัญหามากมายจนไม่สามารถจัดการตัวเองได้ในที่สุดโปรดค้นหาคำตอบโดยละเอียดด้านล่าง:

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

controler

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
  }

วิธีเดียวที่ฉันจะทำให้มันใช้งานได้คือส่ง JSON เป็นสตริงจากนั้นจึงJavaScriptSerializer.Deserialize<T>(string input)ยกเลิกการกำหนดค่าโดยใช้ซึ่งค่อนข้างแปลกถ้านั่นเป็น deserializer เริ่มต้นสำหรับ MVC 4

โมเดลของฉันมีรายการวัตถุที่ซ้อนกันอยู่และสิ่งที่ดีที่สุดที่ฉันจะได้รับจากการใช้ข้อมูล JSON คือรายการบนสุดที่มีจำนวนรายการที่ถูกต้อง แต่ช่องทั้งหมดในรายการนั้นเป็นค่าว่าง

เรื่องแบบนี้ไม่ควรหนักหนา

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

นี่เป็นรหัสที่ใช้งานได้สำหรับแบบสอบถามของคุณคุณสามารถใช้งานได้

controler

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

จาวาสคริปต์

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

การห่อรายการวัตถุของคุณด้วยออบเจ็กต์อื่นที่มีคุณสมบัติที่ตรงกับชื่อของพารามิเตอร์ซึ่งคาดว่าโดยตัวควบคุม 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; }
}

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

หากคุณกำลังใช้เว็บ ASP.NET API data: JSON.stringify(things)แล้วคุณก็ควรจะผ่าน

และคอนโทรลเลอร์ของคุณควรมีลักษณะดังนี้:

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

ดัดแปลงจาก @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
      }

สิ่งที่ฉันทำเมื่อพยายามส่งข้อมูลจากแถวที่เลือกหลายแถวใน DataTable ไปยังการกระทำ MVC:

HTML ที่จุดเริ่มต้นของหน้า:

@Html.AntiForgeryToken()

(แสดงเพียงแถวเดียวผูกจากโมเดล):

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

ปุ่มที่เริ่มฟังก์ชัน JavaScript:

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

ฟังก์ชัน 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();
                    }
                });
            }
        }

การกระทำ MVC:

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

และ MODEL ใน 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; }
 }

สรุป:

สาเหตุของข้อผิดพลาด:

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

เป็นแอตทริบิวต์: [ValidateAntiForgeryToken]สำหรับการกระทำ MVCStartWorkflow

วิธีแก้ปัญหาในการโทร Ajax:

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

ในการส่งรายการวัตถุคุณต้องสร้างข้อมูลเช่นในตัวอย่าง (การเติมข้อมูลวัตถุ) และ:

ข้อมูล: {model: list},

พิมพ์: "post",

นี่คือวิธีการทำงานที่ดีสำหรับฉัน:

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

ด้วย "ContentType" ในตัวพิมพ์ใหญ่ "C"