C#•2y ago

✅ Typescript form sending model empty to C# API layer

hey guys, I have these samples here: My React/Typescript POST method

export async function saveProduct(product: ProductsType): Promise<ProductsType[]> {
    try {
        const response = await axios.post(`${ProductsAPI}/CreateProduct`,
            {
                product
            },
            {
                headers: { 'Content-Type': 'application/json' }
            });
        return response.data;
    } catch (err) {
        console.log(err);
        return [];
    }
};

export async function saveProduct(product: ProductsType): Promise<ProductsType[]> {
    try {
        const response = await axios.post(`${ProductsAPI}/CreateProduct`,
            {
                product
            },
            {
                headers: { 'Content-Type': 'application/json' }
            });
        return response.data;
    } catch (err) {
        console.log(err);
        return [];
    }
};

My C# Post controller:

        [HttpPost]
        [Route("CreateProduct")]
        public IActionResult CreateProduct([FromBody] Product model)
        {
            try
            {
                var response = _productService.Add(model);
                return Ok(response.Result);
            }
            catch (Exception ex)
            {
                return BadRequest(ex.InnerException?.ToString());
            }
        }

        [HttpPost]
        [Route("CreateProduct")]
        public IActionResult CreateProduct([FromBody] Product model)
        {
            try
            {
                var response = _productService.Add(model);
                return Ok(response.Result);
            }
            catch (Exception ex)
            {
                return BadRequest(ex.InnerException?.ToString());
            }
        }

Models: - Typescript

export type ProductsType = {
    tenantId: number;
    productId: number;
    name: string;
    description: string;
    price: number;
    productTypeId: number;
    modifiedBy: number;
    dateCreated: Date;
    active: number;
};

export type ProductsType = {
    tenantId: number;
    productId: number;
    name: string;
    description: string;
    price: number;
    productTypeId: number;
    modifiedBy: number;
    dateCreated: Date;
    active: number;
};

- C#

using System;
using System.Collections.Generic;

namespace Products.Domain.Model.Product;

public partial class Product
{
    public int TenantId { get; set; }

    public int ProductId { get; set; }

    public string? Name { get; set; }

    public string? Description { get; set; }

    public decimal? Price { get; set; }

    public int? ProductTypeId { get; set; }

    public int? ModifiedBy { get; set; }

    public DateTime? DateCreated { get; set; }

    public bool? Active { get; set; }
}

using System;
using System.Collections.Generic;

namespace Products.Domain.Model.Product;

public partial class Product
{
    public int TenantId { get; set; }

    public int ProductId { get; set; }

    public string? Name { get; set; }

    public string? Description { get; set; }

    public decimal? Price { get; set; }

    public int? ProductTypeId { get; set; }

    public int? ModifiedBy { get; set; }

    public DateTime? DateCreated { get; set; }

    public bool? Active { get; set; }
}

Yes, the product variable is not empty when I'm debugging but for some reason when it goes for the CreateProduct route in C# it's empty, all fields are null. Any ideas?

7 Replies

LeonardoOP•2y ago

btw im using entity framework for my api, and its working cuz ive made few attempts direct to swagger so i dont think the problem is in fact direct on the api side but maybe some sorta of gateway from node/browser side to my endpoints prob like cors or smth like that (i also already configured cors tho) for more context heres the repo https://github.com/notgonnaleo/night-alternative/tree/develop

Angius•2y ago

Right now you're sending an equivalent of

{
    product: {
        TenantId: sfdsdf,
        ProductId: 3rg234,
        ...
    }
}

{
    product: {
        TenantId: sfdsdf,
        ProductId: 3rg234,
        ...
    }
}

You want to strip that outer model Since the API doesn't expect it Either post product instead of { product } Or spread the object

LeonardoOP•2y ago

const response = await axios.post(`${ProductsAPI}/CreateProduct`,  product)

const response = await axios.post(`${ProductsAPI}/CreateProduct`,  product)

so just this is already enough? hmm ight ight, thanks man im going to give it a try and let you know if it did work one sec

LeonardoOP•2y ago

got it thanks bro u r a life saver

LeonardoOP•2y ago

it was the model thing u said and i also added one of the props with the wrong type and it was conflicting when sending to the other layer thanks bro

Angius•2y ago

Nice, easy fixes are the best lol

Accord•2y ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

✅ Typescript form sending model empty to C# API layer