Build a CRUD app with ASP.NET Core and Angular

Developer Blog Comments
1

Build a CRUD app with ASP.NET Core and Angular

ASP.NET Core and Angular are powerful frameworks for backend and frontend development. Learn how to put them together to build a modern web app, and secure it with Okta.

2

Vedran Mandić

Fantastic article with a very good overview (of both ng and asp.net core linked to okta’s auth) of various concerns which fullstackers face.

3

Saluqi

It would be helpful to mention that when creating the Workout class that the property called Id was going to be the key for the class by convention.

I was modelling a new project after this article, but when I used “WorkoutId” instead of “Id” I could not complete the Add Controller dialog because it did not know which field was the key. The error message indicated that it was possible to mark a field as the key, but it did not indicate how to do this. That would be useful information too, although I suppose out of the scope for this article.

4

Plexar

There is a missing command in the Create the Database section. Right after “Package Manager Console use the command:” I cannot evaluate this example without it.

5

Cobus Kruger

I took a wild guess and went for this:

Update-Database

It worked fine, as long as the user had rights to create tables.

6

Bernd Schuhmacher

In the chapter “Validate Incoming Data” a hint “System.ComponentModel.DataAnnotations” need to bee imported would be nice. If this is not available the “Reuqired”- annotation will be marked as wrong.

7

ANT

Howdo. I am currently getting this error:-
SEC7120: [CORS] The origin ‘http://localhost:4200’ did not find ‘http://localhost:4200’ in the Access-Control-Allow-Origin response header for cross-origin resource at 'https://dev-857823.oktaprev….

I have setup the app on the okta website correctly

Any help would be appreciated

8

Matt Raible

Make sure you have http://localhost:4200 listed in API > Trusted Origins. When you create an app, we make an entry for you by default with the Login redirect URIs we specify. If you change it, however, we don’t update it.

9

ANT

Hi Matt. Thank you got that workikng. I am able to post records into workouts using POSTMAN and i can display workouts record i if open up https://localhost:44373/api/workouts (GET) . However when JogginDiary calls the same API/workouts from within Angualr, i keep getting an unknow url error from the google F12 debugger, initially i can see the workout apt call in F12 NETWORK but it remains in a pending STATE and then times out.
Any ideas?

Cheers

Lee

10

ANT

Hi Matt

I added Access-Control-Allow-Origin to headers:-
this.headers = new HttpHeaders({ ‘Content-Type’: ‘application/json; charset=utf-8’, ‘Access-Control-Allow-Origin’: ‘*’ });

Btu stil did not help

11

Lee Brandt

And you’ve set http://localhost:4200 in API > Access Tokens in the Okta Developer UI?

12

ANT

Is there a download version of this app? Would be nice to compare to what i have built

13

Lee Brandt

https://github.com/oktadeve…

14

Martin H. Andersen

Thanks for a very in depth article.

I landed here because I was looking for a way to handle server side validation of the model.
I don’t see any where in this code that you are handling a badrequest?

15

Tami R

Hi, great post as I was looking for Angular and .NET Core 2.0, -with Angular built separately. In my version of this, I can’t get the PUT or DELETE calls to work (Just GET and POST work). Can you please take a look at my code and see if can see why (?), I really want to get this working. ( my code is modified with different component names, and different service name (TimeService) ). Here is project… https://github.com/tamiroge…

16

Tami R

I saw the link to your git code and saw that the edit and delete anchor tags are different in the git code. After I changed those my PUT and DELETE work now.

17

minus

I got the example to run, but if i create a new record and then try and edit it, the ID doesn’t populate, so the record doesn’t update (it remains unknown if you inspect the variable - if you refresh the page you can then update that record). I’ve had a look against the code in Git and i can’t see anything obvious. Did anyone else encounter this issue?

18

Tim Ebbs

yup they messed up the markup on the page. If you look at the html for the code there its just in the wrong place so its hidden in the code class=“language-Update-Database```” tag for the next block

19

Tim Ebbs

I had this, made a small edit to fix it, not sure if its “right” but it works.
In the home.component.ts, find the
this.workoutService.add(jogging).subscribe(
joggingRecord => this.joggingData.push(jogging)
);

change the contents of those brackets to joggingRecord => {

jogging.id = joggingRecord.id;
this.joggingData.push(jogging);
}

Basically you’re just pulling the id from the record that the backend returns and updating the record with it before it gets pushed into the array :slight_smile:

20

Marcos Ivan Robles Hernandez

The client side app does not show nothing after authentication. I don’t understand what happens. I have tried twice and got the same result. I have tested the API sending request with POSTMAN and it works(POST and PUT does not work) , but the ClientApp does not work. I ran the “ng serve” and check in every step. I only saw the tittle of the home.component.html always…