How can I request parameters in c# controller from Angular? (no url concatenation)

Question

I have a general question and I can't seem to find any answer in other topics. So I'll show my code here: This is my register.component.ts:

email = this.registerForm.controls['email'].value;
password = this.registerForm.controls['password'].value;
// call RegisterController
    this.http.post('api/register', params).subscribe(params => {
      this.router.navigate(['']); // redirect to login
    },
      error => console.log(error)
    );

This is my C# Controller:

[Route("api/register")]
[HttpPost]
public void Register(string email = "", string password = "")
{
    email = Request.Query["email"].ToString().Trim();
    password = Request.Query["password"].ToString().Trim();

    ...

}

My question is: how can I pass input values for email and password from angular to c#? Everytime in my controller I get "".

The request body is not the same thing as the URL query parameters. — jonrsharpe, Jul 28 '20 at 09:42
How can i do this? in typescript, params has values.. how can I send them to controller? — Sebi Dragu, Jul 28 '20 at 09:45
Your frontend and backend have to match up - either research how to send query parameters with Angular, or how to read the request body in C#. — jonrsharpe, Jul 28 '20 at 09:47
@sayahimad no errors.. goes through controller with default values "" — Sebi Dragu, Jul 28 '20 at 10:00
https://stackoverflow.com/questions/13041808/mvc-controller-get-json-object-from-http-body this will answer your question. In ur code u are already sending a request body. Could u show what "params" does consist of? How u build it? U need to serealize the params object from the body. Please first go through the basics of http/rest standards, like url params, query params and request bodies. — sagat, Jul 28 '20 at 10:08
@sagat email = this.registerForm.controls['email'].value; password = this.registerForm.controls['password'].value; var params = { email, password }; — Sebi Dragu, Jul 28 '20 at 10:10
Yepp, this is valid json then. The link I posted has a detailed answer to your question and how u can serialize a Model Class with streamreader from request body. — sagat, Jul 28 '20 at 10:11

score 0 · Answer 1 · answered Jul 28 '20 at 10:17

0

what you can do is to use HttpParams which seem more clean solution to solve you problem

let httpParams = new HttpParams()
    .append("email", "test@test.com")
    .append("password", "Password1");

in the end you will get this code

email = this.registerForm.controls['email'].value;
password = this.registerForm.controls['password'].value;

let httpParams = new HttpParams()
    .append("email", email)
    .append("password", password);

// call RegisterController
this.http.post('api/register', httpParams).subscribe(params => {
    this.router.navigate(['']); 
    },
     error => console.log(error)
);

answered Jul 28 '20 at 10:17

sayah imad

1,507
3
16
24

ah, no need for that.. I already get the values in typescript. I cannot transfer those values in controller (C#) – Sebi Dragu Jul 28 '20 at 10:20
could you inspect your triggered request from your front to your back ? – sayah imad Jul 28 '20 at 10:39

score 0 · Answer 2 · answered Jul 28 '20 at 10:56

0

You can create a model in asp.net webapi and send the data from angular as json (content-type:application/json) and let web api formatter deserialize it to your model object

answered Jul 28 '20 at 10:56

Vivek Bani

3,703
1
9
18

score 0 · Accepted Answer · edited Jul 28 '20 at 19:44

Just create a model in your backend to pass it to your controller, something like:

public class RegisterModel {
    public string Email { get; set; }
    public string Password { get; set; }
}

and in your controller you pass it

public void Register([FromBody]RegisterModel model)
{
    email = model.Email;
    password = model.Password;

    ...

}

Note that we are adding [FromBody] attribute to tell asp that the content is not coming as part of the url params

How can I request parameters in c# controller from Angular? (no url concatenation)

3 Answers3