如何将二维Javascript数组从视图传递到控制器-Asp.net Core 6 MVC

xlpyo6sf  于 2022-11-19  发布在  .NET
关注(0)|答案(2)|浏览(135)

我是一个全新的ASP.NET核心,我正在尝试实现一个库存控制系统。现在我面临着一个将销售数据保存到数据库的问题。主要问题是我无法将数据导入控制器。我在数据库中有“sales”、“SalesProducts”和“products”表。到目前为止,我所尝试的是,
Sales Create View有一个下拉列表,用于选择产品,并使用SalesViewModel填充:

销售视图模型

public class SalesViewModel
{
    public Sale Sale { get; set; }
    public List<SelectListItem> Products { get; set; }
}

要创建销售项目列表,每次用户选择产品及其数量时,都会创建'subArray',并将该项目数组推送到'SalesItemArray',

$('.btn-sales-add').on('click', function () {
    let subArray = [];
    let productId = $('#product-id').val();
    let productName = $('#product-id option:selected').text();
    let price = $('#sales-price').val();
    let quanity = $('#sales-quantity').val();
    let subTotal = $('#sales-sub-total').val();
    quanity = parseInt(quanity);
    subTotal = parseFloat(subTotal);

    total += subTotal;
    $('#sales-total input').val(total);

    subArray.push(productId);
    subArray.push(productName);
    subArray.push(price);
    subArray.push(quanity);
    subArray.push(subTotal);

    salesItemsArray.push(subArray);

});

数组格式

[[pro_id, pro_name, quantity, subTotal],[pro_id, pro_name, quantity, subTotal]]

为了将销售数据和销售项导入控制器,我使用了FormData对象和另一个FormDataViewModel,如this solution所示

销售表单数据视图模型

public class SalesFormDataViewModel
{
    public string StoreId { get; set; }
    public string Total { get; set; }
    public string[] SalesItemList { get; set; }
}

我将SalesViewModel传递给视图并将SalesFormDataViewModel传递给控制器,

let storeId = $("#sales-store-id").val();
let total = $("#sales-total input").val();
let salesItemList = salesItemsArray;var 

formData = new FormData();

formData.append("StoreId", storeId);
formData.append("Total", total);
formData.append("salesItemList", salesItemList);

$.ajax({
    url: '/api/sales/createSales',
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(formData),
    success: function (response) {
        alert('success');
    },
    error: function (response, error) {
        alert('error');
    }
});

控制器

[HttpPost]
[Route("createSales")]
[ValidateAntiForgeryToken]
public async Task<IActionResult> createSales(SalesFormDataViewModel 
salesFormDataViewModel)
{
    return Ok(new { success = "Stock updated successfully" });
}

事实上,我已经尝试了几乎所有的解决方案搜索网络,但无论尝试,每次我得到相同的错误响应。我甚至不能达到断点在controler,因为 AJAX 抛出异常。Ajax Response
拜托,我期待你们的帮助。谢谢。
我正在编辑此问题以添加更多详细信息。在尝试Chens解决方案后,现在获得this error

crcmnpdw

crcmnpdw1#

我不能传递数组,直到我改变了我的viewModel。我必须删除字符串数组类型为字符串类型。

public class SalesFormDataViewModel
 {
     public string StoreId { get; set; }
     public string Total { get; set; }
     public string SalesItemList { get; set; }
 }

然后,在将数组转换为json字符串之后,我将数组追加到formData。

formData.append("SalesItemList", JSON.stringify(SalesItemList));

在搜索了如何将formData发送到控制器之后,在通过 AJAX 直接发送formData对象之前,我必须执行以下操作。

let dataObj = {};
formData.forEach((value, key) => {
    dataObj[key] = value;
});

然后 AJAX 叫:

let jsonData = JSON.stringify(dataObj);
$.ajax({
    url: '/api/Sales/createSales',
    method: 'POST',
    contentType: 'application/json',
    data: jsonData,
    processData: false,
    cache: false,
    success: function (response) {
        alert("success");
    },
    error: function (response) {
        alert("error");
    }
});

通过这种方式,我可以将二维js数组从视图传递到控制器。但是,由于接收到的SalesItemList数组是一个JSON数组,因此无法保存传递的对象保存到数据库。在尝试将该数组反序列化为销售控制器中的对象时,会引发异常无法反序列化当前JSON数组。因此,不是传递数组的数组,而是传递对象的数组。同上解决了问题。

let SalesItemList = [{},{}];

我张贴这个答案,以为它会帮助那些谁面临同样的问题,并希望强调,我结束了这个解决方案感谢那些谁回答这个问题。

dly7yett

dly7yett2#

400响应是由于您没有传递ValidateAntiForgeryToken。在使用 AJAX 创建POST请求时,很容易忘记防伪造令牌。如果您在请求中省略了该值,服务器将返回400错误请求结果。请检查您是否传递了正确的令牌。
方法一:
手动添加标题:

$.ajax({
   //...
   headers: { "RequestVerificationToken": yourtoken },
   //...
});

有关详细信息,请参阅此链接。
方法二:
注解掉验证防伪令牌:

//[ValidateAntiForgeryToken]

编辑:

让我们一步一步地解决您的错误:
查看方式:
假设你得到的formData是正确的,它应该是这样的(注意 AJAX 的几个属性):

<script>
    function Test()
    {
        let storeId = 1;
        let total = "Total";
        let salesItemList = [[1, "Name1", "quantity1", "subTotal1"], [2, "Name2", "quantity2", "subTotal2"]];

        var formData = new FormData();

        formData.append("StoreId", storeId);
        formData.append("Total", total);
        formData.append("salesItemList", salesItemList);

        $.ajax({
            url: '/createSales',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            async: false,
            success: function (response) {
                alert('success');
            },
            error: function (response, error) {
                alert('error');
            }
        });
    }

</script>

控制器:

[HttpPost]
[Route("createSales")]
public async Task<IActionResult> createSales(SalesFormDataViewModel
            salesFormDataViewModel)
{
     return Ok(new { success = "Stock updated successfully" });
}

相关问题