asp.net mvc - how can I get and post an action using angular 2 in MVC

Question

I am new to Angular 2 and would like to know how to use it in a mvc project when calling get and post actions:

Let say I have an EmployeeController with 2 actions: 1) GetEmployee: which list employee info 2) UpdateEmployee: which update the employee info

Without using Angular 2, we can easily use views to deal with it. However, if I want to use Angular 2, how can I do this? Could you please provide some samples so I can learn how to use Angular 2 to call actions to get or post data?

Thanks

Answer 1

As promised :

From the Controller side : (controller is named APIConnexionController.cs)

[HttpGet]
public IActionResult Connexion(string aLogin, string aMdp)
{
   // Do your stuff
}

---

You can then setup your method from an Angular2 service or component to do an http call to your controller as follow :

auth.service.ts (in my case)

private controllerURL: string = "/APIConnexion/auth";

login(aLogin: string, aMdp: string) {
    // Setup parameters to send to ASP controller
    let params = new URLSearchParams();
    params.set("aLogin", aLogin);  // => Left side must match Controller method parameter
    params.set("aMdp", aMdp);

    // Setup the http request
    let lHttpRequestBody = params.toString();
    let lControllerAction: string = "/connexion/?";
    let lControllerFullURL: string = this.controllerURL + lControllerAction;

    // Call the ASP.NET controller : APIController
    return this.http.get(lControllerFullURL + lHttpRequestBody)
        .map((res: any) => {
            let data = res.json();

            // Manage cases
            switch (data.status) {
                case "success":
                    this.isLoggedIn = true;
                    this.lcLogin = aLogin;
                    break;
                case "error":
                    this.isLoggedIn = false;
                    throw new Error("Failure : " + data.message);
            }
        }
        ).catch(this.handleError);
}

And then just display the data you have from your Angular2 component to your template HTML, or execute some actions just like my login() method :

// Manage authentication
login(username, password) {
    this.authService.login(username, password)
        .subscribe(() => {
            // Call the service Method
            if (this.authService.isLoggedIn) {
                // Redirect the user to master component
                this.router.navigate(['/master/dashboard']);
            }
        });
}