C#•2y ago

❔ Getting error 500 on form post (using fetch)

I'm trying to do a form post (posting a model), but my controller is not being called. When I check the fetch result on the console, I get a 500 error, but I haven't been able to pinpoint where the problem lies. The model:

    public class PostModel
    {
        public List<string> ImagesPath { get; set; }
        public string Description { get; set; }
    }
}

    public class PostModel
    {
        public List<string> ImagesPath { get; set; }
        public string Description { get; set; }
    }
}

The js object I'm posting/ the fetch post:

    document.querySelector("#enviaForm").addEventListener("click", function(e) {
        const postsToSend = createPostObjectToSend()
        // postsToSend is an array composed of objects that looks like this:
        // {
        // Description: post.querySelector("input[type=text]").value.trim(),
        // ImagesPath: []
        // }

        fetch('/Home/ProcessPosts', {
                method: 'POST',
                body: postsToSend
            })
           .then(response => response)
           .then(data => {console.log(data)})
    })

    document.querySelector("#enviaForm").addEventListener("click", function(e) {
        const postsToSend = createPostObjectToSend()
        // postsToSend is an array composed of objects that looks like this:
        // {
        // Description: post.querySelector("input[type=text]").value.trim(),
        // ImagesPath: []
        // }

        fetch('/Home/ProcessPosts', {
                method: 'POST',
                body: postsToSend
            })
           .then(response => response)
           .then(data => {console.log(data)})
    })

The ImagesPath is an array of strings, where I get the values from inputs of the type 'file'. The controller

        [HttpPost]
        public void ProcessPosts(List<PostModel> post)
        {
            
        }

        [HttpPost]
        public void ProcessPosts(List<PostModel> post)
        {
            
        }

Maybe I'm missing some basic concept or basic knowledge? I've been trying to fix this for hours but I haven't been able to

17 Replies

Angius•2y ago

Is postsToSend an array of objects that match PostModel?

Hass•2y ago

As far as I can see, yes, they are. I'm submitting an array of objects, in which each object is composed like this:

{
  Description: 'string',
  ImagesPath: ['C:\\fakepath\\image1.png',
               'C:\\fakepath\\image2.png']
}

{
  Description: 'string',
  ImagesPath: ['C:\\fakepath\\image1.png',
               'C:\\fakepath\\image2.png']
}

Angius•2y ago

Try posting JSON instead Add a header to your fetch

Hass•2y ago

The best I can think of is that somehow the images path are not being treated like a string What do I expect in the controller's parameter? a string?

Angius•2y ago

No? ASP will parse it just fine In fact, JSON is the preferred format

Hass•2y ago

Oh, ok Didn't know about that I'll give it a shot, one sec No success I keep getting error 500 I tried changing the Model to accept an List of IFormFile instead of string, but it didn't change a thing

Angius•2y ago

I mean, you're not sending files after all What's your code after changing to JSON?

Hass•2y ago

 fetch('/Home/ProcessPosts', {
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
                },
                method: 'POST',
                body: JSON.stringify(postsToSend)
            })
           .then(response => response)
           .then(data => {console.log(data)})

 fetch('/Home/ProcessPosts', {
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
                },
                method: 'POST',
                body: JSON.stringify(postsToSend)
            })
           .then(response => response)
           .then(data => {console.log(data)})

Angius•2y ago

Open the devtools, the network panel, and see how the request looks

Hass•2y ago

[
  {
    "Description": "ssss",
    "ImagesPath": [
      "C:\\fakepath\\315091817_2112849118907450_4321260103323104983_n.jpg"
    ]
  }
]

[
  {
    "Description": "ssss",
    "ImagesPath": [
      "C:\\fakepath\\315091817_2112849118907450_4321260103323104983_n.jpg"
    ]
  }
]

The model is

    public class PostModel
    {
        public List<string> ImagesPath { get; set; }
        public string Description { get; set; }
    }

    public class PostModel
    {
        public List<string> ImagesPath { get; set; }
        public string Description { get; set; }
    }

And I'm expecting a list of the model, so I think it's correct?

Angius•2y ago

Yeah, everything seems fine Uh, try adding [FromBody] attribute to the parameter of your action method...? [FromBody] List<PostModel> posts

Hass•2y ago

I discovered what the problem was when I was going to put the FromBody attribute, lol So I had three controllers with the same name, the only difference being that the type of the parameter is different for each of them I thought it was fine since I wasn't getting any error for ambiguity, but I guess it's not

Angius•2y ago

Ah, that'd do it lol

Hass•2y ago

Btw, adding the [FromBody] attribute still triggers the controller But it receives null value Thank you for helping me out on this lol That tip of the json will be of good use, I had no clue that the asp would do all the work and I had to just pass a json

Angius•2y ago

Hass•2y ago

lmao Now I receive the object, but it always come empty yikes

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

❔ Getting error 500 on form post (using fetch)