Calling the controller from the TS file within a project created using 'ASP.NET Core with Angular project template'

Huynh, Phuong Thao 81 Reputation points
2022-03-17T19:03:42.523+00:00

Hi All,

I have a question and could anyone please help me with? I create an application using 'the ASP.NET Core with Angular project template' provided on Microsoft site. https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/angular I would like to have some documentation on how to connect (calling the controller from the ClientApp to the controller) the ClientApp to the Controller. I could not find any documentation/code samples on how to do it.

184256-image.png

The project template provided on Microsoft site is equivalent to creating both an ASP.NET Core project to act as a web API and an Angular CLI project to act as a UI. This project combination offers the convenience of hosting both projects in a single ASP.NET Core project that can be build and published as a single unit.

Thank you! Thao

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,178 questions
0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 56,531 Reputation points
    2022-03-18T15:15:34.817+00:00

    The .net code is a sample rest webapi. See docs

    https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-6.0&tabs=visual-studio

    The angular code uses ajax to call the webapi.

    https://angular.io/guide/http

    The forecast page is sample ajax call.

    0 comments
  2. Huynh, Phuong Thao 81 Reputation points
    2022-03-22T22:26:28.247+00:00

    Hi Bruce,

    Thank you for giving me some guidance.

    Following the guides you sent, although it's different since the first guide you sent me is a sample of rest API which only has a backend (API controller). My application uses Angular CLI for UI and ASP.NET core for the API.

    Focusing on the Controllers:
    I created the 'Models' folder with two files (following the Microsoft link for rest API):
    185770-image.png

    Although, I believe I don't really need the TempAccPass.cs. I was just following the sample rest API. In GraphService.cs, I implemented my function 'UserTap' which will return a String.

    185864-image.png

    Next, I implemented 'GetUserTap' function in my TapController.cs that will get the result from UserTap function implemented within GraphService.cs (Screenshot above)

    185815-image.png

    In launchSettings.json, I set the launchUrl as 'api/tempaccpass'.

    185824-image.png

    I have my backend implemented. The below is the implementation of the UI (ClientApp). In home.component.ts, I call the API as the screenshot below. It's just not working. Could you please help? I am not sure what URL I should put here since the API is called within the application. Also, I configured launchUrl to be 'api/tempaccpass'. I also tried to pass userPrincipalName param with the HttpClient.

    185865-image.png

    When run command 'npm start', the web page is up but I don't get the 'TAP' value that I am looking for when calling HttpClient.

    185785-image.png

    Note: When trying to run 'Ctrl + F5' (Start without Debugging), hoping to run the controllers only without the UI part (I am not sure if that is the way to run the controllers only), I got the following error:
    "C:\Program Files\dotnet\sdk\6.0.201\Sdks\Microsoft.NET.Sdk\targets\Microsoft.PackageDependencyResolution.targets(267,5): error NETSDK1064: Package Microsoft.AspNetCore.NodeServices, version 3.1.22 was not found. It might have been deleted since NuGet restore. Otherwise, NuGet restore might have only partially completed, which might have been due to maximum path length restrictions"

    I installed .Net Core 3.1 but it did not fix the issue.

    185816-image.png

    Could you please help me with this?

    Thank you and best regards,

    Thao

    0 comments