不使用 MVC(HTTP 415) 将数据发布到操作

Question

我希望将以下字段发送到 MVC 操作

public class AddProductViewModel
{
    public string ProductId { get; set; }
    public string ProductName { get; set; }
    public int Quantity { get; set; }
    public double Price { get; set; }
    public bool Enabled { get; set; }
    public List<CategorySelectModel> Categories { get; set; } = new List<CategorySelectModel>(); 
    public List<IFormFile> Photos { get; set; } = new List<IFormFile>();
}

类别选择模型：

    
    public string CategoryId { get; set; }
    public string CategoryName { get; set; }

并且我使用了我认为代表实际 json 数据的内容...但我不明白为什么它不将数据发布到操作中这是我序列化数据并发送到控制器的 js 代码

function SubmitProducts(element)
{
    element.preventDefault();

    let ulContainer = document.getElementById("dropDownAndSel").getElementsByTagName('ul')[0];

    var Categories = [];
    let x = document.getElementById("dropDownCategories");
    for (let i = 0; i < x.children.length; i++) {
        if (x.options[i].selected) {
           let CategoryName = x.options[i].innerHTML;
            let CategoryId = x.children[i].value;
            let dropdownItems = { CategoryId, CategoryName };

            if (!Categories.includes(dropdownItems)) {

                Categories.push(dropdownItems);
            }
        }
    }
    let pId = document.getElementById('pId').value;
    let ProductId = pId;
    let ProductName = document.getElementById('ProductName').value;
    if (!ProductName || ProductName.length ==0) {
        alert('ProdutName cannot be null or empty');
        return;
    }
    let priceStr = document.getElementById('productPriceId').value;
    if (!priceStr || priceStr.length == 0) {
        alert('Price cant be empty')
        return;
    }
    let Price = parseFloat(priceStr);
    
    let QuantityStr = document.getElementById('qtyNum').value;
    if (!QuantityStr || QuantityStr.length==0) {
        alert('Quantity cant be empty');
        return;
    }
    let Quantity = parseInt(QuantityStr);
 
    var formData = new FormData();

    let filesContainer = document.getElementById('photoProduct_0');
    for (let i = 0; i < filesContainer.files.length; i++) {
        formData.append('model.Photos', filesContainer.files[i], filesContainer.files[i].name);
    }

    formData.set('model.ProductId', ProductId);
    formData.set('model.ProductName', ProductName);
    formData.set('model.Price', Price);
    formData.set('model.Quantity', Quantity);
    formData.set('model.Categories', JSON.stringify(Categories));


    $.ajax({
        url: '/' + 'Product' + '/' + 'AddProduct',
        type: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: console.log('success'),

    });
}

这是动作签名：

[HttpPost]
public async Task<IActionResult> AddProduct([FromBody] AddProductViewModel model)

Answer 1

postFormData 数据上方的代码。因此，AddProductViewModel参数应该在请求体中使用form-data进行绑定：

[HttpPost]
public async Task<IActionResult> AddProduct([FromForm] AddProductViewModel model)

参考以下post：

不使用 MVC(HTTP 415) 将数据发布到操作

Not posting data to an action with MVC(HTTP 415)

c#

jquery

.net

asp.net-mvc

asp.net-core