When trying to pass 3 parameters from an Angular frontend to a C# MVC backend, I noticed that the server side was receiving null

Question

When trying to pass 3 parameters from an Angular frontend to a C# MVC backend, I noticed that the server side was receiving null

I have encountered an issue where I am attempting to pass 3 parameters (2 types and one string) but they are showing up as null on the server side.

Below is my service:

const httpOptions = {
      headers: new HttpHeaders({
         'Content-Type': 'application/json '
      })
};
let body = {
  auditId: auditId,
  rolId: this.permisoService.currentUserRolValue.rolId,
  valores: JSON.stringify(valores),
}
return this.http.post<any>(this._saveURL, body, httpOptions).pipe(
  map(res => { return res; }),
  catchError(this.handleError)
);
}

And here is what I have on the server side:

[HttpPost, Route("AuditMail/Save"), Produces("application/json")]
    public async Task<IActionResult> Save([FromBody] int auditId, int rolId , String valores)
    {
        return Json(await _repository.Save(auditId, rolId, valores));
    }

I have attempted changing the content-type to text/plain and removing [FromBody] with no success.

Any help would be greatly appreciated. Thank you.

javascript c#angular typescript post

Answer 1

Answer №1

For more insights on a similar query, refer to this answer: which highlights:

If your route content type is application/json, you cannot directly retrieve primitive types from your body using something like [FromBody] string id. This is because MVC expects the model to bind the json body, not primitive types.

A recommendation would be to create a new class within your API project to store these values:

public class AuditMailModel
{
    public int AuditId { get; set; }
    public int RolId { get; set; }
    public string Valores { get; set; }
}

In your controller, implement the following:

public async Task<IActionResult> Save([FromBody] AuditMailModel model)
{
    return Json(await _repository.Save(model.AuditId, model.RolId, model.Valores));
}

Answer 2

For more insights on a similar query, refer to this answer: which highlights:

If your route content type is application/json, you cannot directly retrieve primitive types from your body using something like [FromBody] string id. This is because MVC expects the model to bind the json body, not primitive types.

A recommendation would be to create a new class within your API project to store these values:

public class AuditMailModel
{
    public int AuditId { get; set; }
    public int RolId { get; set; }
    public string Valores { get; set; }
}

In your controller, implement the following:

public async Task<IActionResult> Save([FromBody] AuditMailModel model)
{
    return Json(await _repository.Save(model.AuditId, model.RolId, model.Valores));
}

When trying to pass 3 parameters from an Angular frontend to a C# MVC backend, I noticed that the server side was receiving null

Answer №1

Similar questions

Executing a cURL request using Node.js

The requested external js scripts could not be found and resulted in a net::ERR_ABORTED 404 error

One must remember to define the scalar variable known as "@campusVisitDate"

Getting the string value from query parameters can be achieved by accessing the parameters and

The buffer for the operation `users.insertOne()` exceeded the timeout limit of 10000 milliseconds, resulting in a Mongoose

Angular - Enhancing the page with valuable information

When sending a response using res.send, it is not possible to include all properties of

The submission form is being triggered immediately upon the page loading

IBM Watson Conversation and Angular Integration

What does the concept of "signaling intent" truly signify in relation to TypeScript's read-only properties?

How can I deactivate all form controls within an AngularJS form?

Pass the JavaScript variable and redirect swiftly

Setting up a secure HTTPS server using Node.js and Express.js

Holding an element in TypeScript Angular2 proved to be challenging due to an error encountered during the process

Guide to establishing a connection with a Node.js socket server

What is the best way to show a message on a webpage after a user inputs a value into a textbox using

Having issues with my toggler functionality. I attempted to place the JavaScript CDN both at the top and bottom of the code, but unfortunately, it is still not

Building a Docker image encounters an issue during the npm install process

Divide and Insert a Gap in Phone Number

Do I need to include success as a parameter in my Ajax call even if my function does not return any values?