Chuyển danh sách các đối tượng vào một phương pháp điều khiển MVC bằng jQuery Ajax

Tôi đang cố gắng chuyển một mảng đối tượng vào phương thức bộ điều khiển MVC bằng cách sử dụng hàm ajax () của jQuery. Khi tôi truy cập vào phương thức bộ điều khiển PassThing () C #, đối số "things" là rỗng. Tôi đã thử điều này bằng cách sử dụng một loại Danh sách cho đối số, nhưng điều đó cũng không hoạt động. Tôi đang làm gì sai?

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

Sử dụng gợi ý của NickW, tôi có thể làm cho điều này hoạt động bằng cách sử dụng things = JSON.stringify({ 'things': things });Đây là mã hoàn chỉnh.

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

Có hai điều tôi học được từ điều này:

1. Cài đặt contentType và dataType là hoàn toàn cần thiết trong hàm ajax (). Nó sẽ không hoạt động nếu chúng bị thiếu. Tôi đã tìm ra điều này sau nhiều lần thử và sai.

2. Để chuyển một mảng đối tượng vào phương thức bộ điều khiển MVC, chỉ cần sử dụng định dạng JSON.stringify ({'things': things}).

Tôi mong điều này giúp được người nào khác!

Bạn không thể chỉ làm điều này?

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

... và đánh dấu hành động của bạn bằng

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

Định dạng dữ liệu của bạn có thể là vấn đề. Hãy thử một trong hai cách sau:

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

Hoặc (từ Làm cách nào để đăng một mảng chuỗi lên Bộ điều khiển ASP.NET MVC mà không có biểu mẫu? )

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

Tôi đang sử dụng Ứng dụng web .Net Core 2.1 và không thể nhận được câu trả lời nào ở đây để hoạt động. Tôi nhận được một tham số trống (nếu phương thức được gọi) hoặc lỗi máy chủ 500. Tôi bắt đầu chơi với mọi sự kết hợp có thể có của các câu trả lời và cuối cùng đã có kết quả.

Trong trường hợp của tôi, giải pháp như sau:

Tập lệnh - xâu chuỗi mảng ban đầu (không sử dụng thuộc tính được đặt tên)

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

Và trong phương thức bộ điều khiển, hãy sử dụng [FromBody]

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

Các lỗi bao gồm:

• Đặt tên cho nội dung

  data: {content: node}, // Lỗi máy chủ 500

• Không có contentType = Lỗi máy chủ 500

Ghi chú

• dataTypelà không cần thiết, mặc dù một số câu trả lời nói gì, vì điều đó được sử dụng để giải mã phản hồi (vì vậy không liên quan đến yêu cầu ví dụ ở đây).
• List<Thing> cũng hoạt động trong phương thức bộ điều khiển

Tôi có câu trả lời hoàn hảo cho tất cả điều này: Tôi đã thử rất nhiều giải pháp mà cuối cùng vẫn không thể xoay sở được, vui lòng tìm câu trả lời chi tiết bên dưới:

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

Bộ điều khiển

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
  }

Cách duy nhất tôi có thể làm cho điều này hoạt động là chuyển JSON dưới dạng một chuỗi và sau đó sử dụng deserialise nó JavaScriptSerializer.Deserialize<T>(string input), điều này khá lạ nếu đó là trình giải mã mặc định cho MVC 4.

Mô hình của tôi có danh sách các đối tượng lồng nhau và điều tốt nhất tôi có thể nhận được bằng cách sử dụng dữ liệu JSON là danh sách trên cùng để có số mục chính xác trong đó, nhưng tất cả các trường trong các mục đều rỗng.

Kiểu này chắc không khó lắm đâu.

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

Đây là mã làm việc cho truy vấn của bạn, bạn có thể sử dụng nó.

Bộ điều khiển

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

Bao bọc danh sách các đối tượng của bạn bằng một đối tượng khác có chứa thuộc tính khớp với tên của tham số được mong đợi bởi bộ điều khiển MVC. Bit quan trọng là trình bao bọc xung quanh danh sách đối tượng.

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

Nếu bạn đang sử dụng ASP.NET Web API thì bạn chỉ cần vượt qua data: JSON.stringify(things).

Và bộ điều khiển của bạn sẽ trông giống như sau:

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

Sửa đổi từ @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
      }

Những gì tôi đã làm khi cố gắng gửi một số dữ liệu từ một số hàng đã chọn trong DataTable sang hành động MVC:

HTML Ở đầu trang:

@Html.AntiForgeryToken()

(chỉ một hàng được hiển thị, liên kết từ mô hình):

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

Nút khởi động hàm JavaScript:

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

Hàm 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();
                    }
                });
            }
        }

Hành động MVC:

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

Và MODEL trong 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; }
 }

PHẦN KẾT LUẬN:

Lý do cho LỖI:

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

Thuộc tính Is: [ValidateAntiForgeryToken]cho hành động MVCStartWorkflow

Giải pháp trong cuộc gọi Ajax:

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

Để gửi Danh sách các đối tượng, bạn cần tạo dữ liệu như trong ví dụ (điền đối tượng danh sách) và:

dữ liệu: {model: list},

gõ: "đăng",

Đây là cách nó hoạt động tốt với tôi:

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

Với "ContentType" viết hoa "C".