Getting NULL value in ASP .net POST controller method from Axios POST request

Question

I want to store data via POST method using react axios into table via ASP .net. The API works on postman but the data Im sending on the frontend side shows null on the backend POST method.

React code:

var headers = { 
        'Authorization': 'Bearer ' + localStorage.getItem('tk'), 
        'Content-Type': 'application/json'
}
axios.post("https://localhost:8000/api/" + 'Author',
    {
        Data: this.state.books, //"Book1 (string)"
        Text: this.state.text, //"Douglas M (string)"
        List: [1,2,3] //array
    }, {headers: headers})
    .then((response) => {
        window.location.href = '/home';
    })
    .catch((error) => {
        console.log(error);
    });

C# code:

[Produces("application/json")]
[HttpPost]
    public HttpResponseMessage Post([FromBody] Author value)
    {
        Author input = new Author ()
        {
            Data = value.Data,
            Text = value.Text,
            Lis  = value.List,
            Date = Datetime.now
        };
        _model.Author.Add(input);
        _model.SaveChanges();
        return new HttpResponseMessage(HttpStatusCode.OK);
    }

Author model design:

public class Author
{
    public string Data { get; set; }
    public string Text { get; set; }
    public string Lis { get; set; } //storing list as string in table
}

Error returned:

System.NullReferenceException: 'Object reference not set to an instance of an object.'

When the API is executed, the value that the POST method retrieves is NULL. What's the reason for this? I tried using JSON.stringify() for the data in frontend but it didnt work.

Data needs to be JSON.stringify() and your model Author and its properties (name and type) from server need to match exactly the object sent from client. — Codingwiz
– Codingwiz, Commented Jan 25, 2023 at 20:15
@Codingwiz yes, I did use JSON.stringify() and ensured that the name and type from server matches the object. Do I need to change the function parameter from Class type to string instead since it's JSON stringify coming in as request? — retro_coder
– retro_coder, Commented Jan 26, 2023 at 7:19
Hi @retro_coder, did you use console.log(this.state.books) to check if the two value you pass actually have the value? And how is the two properties type, simple string? Pls share the model design of Author and also pls share what is the data you post. — Rena
– Rena, Commented Jan 26, 2023 at 7:24
Hi @retro_coder, you post an array to the string type, of course your backend will receive the null model. One way is that you can change the string List to List<int> List. The other way is that you can change [1,2,3] to "[1,2,3]". — Rena
– Rena, Commented Jan 26, 2023 at 9:55

Codingwiz · Accepted Answer · 2023-01-26 16:05:03Z

1

As mentioned by @Rena, the problem lies with your model not being able to parse array sent from client side to a string. You need to change your Lis property to an array so that corresponding properties and their types sent match your model properties and their types.

public class Author
{
    public string Data { get; set; }
    public string Text { get; set; }
    public int[] Lis { get; set; } // <-- change from string to array of numbers (since you're sending an array that contains numbers)
}

Also Lis = value.List will not work with the Database. You should have a model for Client-Server communication and a separate model for your EF Core DbContext. Then do a conversion from one model to the other and vice-versa. Automapper can be usefull too.

Lis  = string.Join(", ", value.List)

edited Jan 26, 2023 at 16:05

answered Jan 26, 2023 at 15:20

Codingwiz

3133 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting NULL value in ASP .net POST controller method from Axios POST request

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related