Join Alexander Zanfir for an in-depth discussion in this video Post quiz to back end, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Narrator] This video will create the front-end and back-end API components to descend over our new quiz. Let's open up our API service. We'll start by copying the postQuestion from line 17 and then let's paste it below the last question function putQuestion on line 23 and we will rename it to postQuiz, and that will take in a quiz instead of a question.
Then we'll change the URL, instead of questions, to quizzes since we'll assume we'll have a quizzes controller, and we'll pass in our quiz with that HTTP post as a second parameter. Next, let's go ahead and open up our back-end and stop the server. Then in our Solution Explorer, let's create a new quiz model. So, I'll simply copy and paste our questions model and let's rename it to quiz.
And then we'll rename the class to quiz as well. Then I'll get rid of all the properties between line 12 and line 15 and change the Text property to Title, then I'll clean that up by removing the unused name spaces. Now that we have our quiz model, we'll need a quizzes controller as well, but this time around, we'll use a visual studio generator called scaffolding.
So let's go to the Solution Explorer, right click on Controllers, go to Add, then select New Scaffolded Item. Next we'll select API Controller with actions using Entity Framework. Let's hit Add. We'll select our new model Quiz, and then we'll select our existing quiz context, then we'll fix the spelling of our quizzes controller. Then let's hit Add.
At this point, scaffolding will generate our new controller and it will create a lot of the code for us, that we had to manually create in our Questions Controller. Let's take a look. We have a GetAll quiz function, a specific GetQuiz function, a PutQuiz function, which looks a lot like the one we created, except it has some extra checks in place and some exception handling built in over our manually created questions controller.
And before we test it out, let's go to our front-end and bind the buttons in the quiz component HTML. So the only button we'll need for now is our Post Quiz button, so let's modify that. We'll use API dot PostQuiz and we'll pass in the quiz. Let's save that and give it a try. We can see we got a response back with an ID.
Let's go over to the browser that our back-end server has opened and instead of values, let's go over to quizzes. We can see we are getting a list of our quizzes with the only existing quiz that we just created, New Quiz. So everything seems to be working so far, so we have quizzes with the ability to create new quizzes as well as questions, but how do we associate quizzes with questions? Let's take a look at that next.
- Creating and configuring the Angular project
- Creating forms with Angular
- Creating get and post routes in an ASP.NET Core controller
- Updating Angular service to post to API
- Persistence with Entity Framework
- Displaying and editing data in Angular with ASP.NET Core
- Navigating to different views in Angular
- Associations between entities with Angular and Entity Framework
- Setting up Identity Framework