javascript - 我想通过 post 将对象列表从 javascript 发送到控制器方法

Question

我想将对象列表发送到控制器方法，但控制器中的集合为空。我收到 500 内部服务器错误。我检查了 xhr 网络，我的请求负载是：{,...}

collection: [{categoryID: 1, pageID: 1, positionX: 1, positionY: 1, dimensionX: 3, dimensionY: 3},...] 0: {categoryID: 1, pageID: 1, positionX: 1, positionY: 1,维度X: 3, 维度Y: 3} 1: {categoryID: 1, pageID: 3, positionX: 1, positionY: 3, dimensionX: 3, dimensionY: 7} 2: {categoryID: 1, pageID: 5, positionX: 1, positionY: 7, dimensionX: 2, dimensionY: 9} 3: {categoryID: 1, pageID: 6, positionX: 2, positionY: 7, dimensionX: 3, dimensionY: 9} 4: {categoryID: 1, pageID: 7, positionX: 3, positionY: 1, dimensionX: 5, dimensionY: 3} 5: {categoryID: 1, pageID: 8, positionX: 3, positionY: 3, dimensionX: 5, dimensionY: 5} 6: {categoryID: 1, pageID: 9, positionX: 3, positionY: 5, dimensionX: 5, dimensionY: 7} 7: {categoryID: 1, pageID: 10, positionX: 3, positionY: 7, dimensionX: 4, dimensionY: 9} 8: {类别ID：1，页面ID：11，位置X：4，位置Y：7，尺寸X：5，尺寸Y：9}

网格.html

<button type="button" class="button" style="margin-left:400px" onclick="saveChanges()">Save Changes</button>

网格.js

function saveChanges() {
    var collection = [];
    Array.from(document.querySelectorAll('.grid-container>.icon')).forEach((element) => {
        var single = {};
        single['categoryID'] = 1;
        single['pageID'] = parseInt(element.getAttribute("icon-id"));
        var gridArea=element.style.gridArea.split(" / ");
        single['positionX']=parseInt(gridArea[0]);
        single['positionY'] = parseInt(gridArea[1]);
        single['dimensionX'] = parseInt(gridArea[2]);
        single['dimensionY'] = parseInt(gridArea[3]);
        collection.push(single);
    });
    var xhr = new XMLHttpRequest();
    xhr.open("POST",  "PageView/Create", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify({'collection': collection }));
}

PageViewController.cs

[HttpPost]
        public ActionResult Create(List<PageCategoryPageViewModel> collection)
        {
            try
            {
                collection.ForEach((x)=>_pageCategoryPageService.CreatePageCategoryPage(x));
                return View("Grid");
            }
            catch
            {
                return View("Grid");
            }
        }

标签： javascriptajaxasp.net-mvcmodel-view-controller