Join Alexander Zanfir for an in-depth discussion in this video Showing only quiz owned questions, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Narrator] In this video we'll modify our 'Get Question' Requests so that it includes a 'quizId'. That way we get only questions that belong to that quiz. So we'll need to make modifications both the front and back end. So let's begin on our back end. We'll load our 'Questions Controller' and then let's navigate down to our 'Get Request'. Then, let's copy our 'Get Function' between line 22 and 26 and paste it below. And then we'll specify a parameter 'FromRoute' we'll type 'int' and then called 'quizId'.
And now let's go to the decorator of the function on line 28 and specify that it takes a parameter. We'll do that by passing in a string with curly braces and then the parameter name. Let's go ahead and test this out. We'll add a breakpoint on line 30 and then let's run this. Once the browser loads instead of values we'll use 'questions' and then 'slash one'. And our breakpoint is triggered and if we hover over 'quizId' we can see it has a value of one.
So we'll go ahead and remove that breakpoint and then we'll need to select the questions that belong to the quiz with that ID. So we'll add 'dot where' to the end of 'Questions' and we'll specify that we want the 'question dot quizId' to match the 'quizId' we receive in our parameter. Let's save that and let's give that a try. So I'll run the server and then before we go to our questions in the URL, let's add a new question with our app.
So I'll post that we've got back a response. And now let's try it out. So we know it's 'quizId one' since it's the first quiz and we're getting back the question we just added. If we try questions with 'quizId two' we're not getting anything back. So now that we have our back end working, let's go modify our front end. So let's go to our API service and let's go up to our 'Get Questions' function.
Here we'll need to take in a 'quizId'. Now let's convert the URL string to a template literal so I'll get rid of the single quotes and add back ticks. Then let's add the dollar sign and we can pass in our value in curly braces. And we'll also need a slash in front of 'questions'. So let's save that and then we'll have to modify the function that calls 'getQuestions'. So let's go to our 'Questions Component'.
And currently our 'Questions Component' does not have access to the 'quizID' only our 'Question Component' does. So there's a few things we can do. We can pass it from one component to the other but then that causes further dependency. Or we can just get it, once again, with activated route. So let's copy that from our 'Question Component'. So I'll get the import first and paste it in. Then I'll copy the constructor that has the activated routes injected and I'll replace our existing constructor.
And then I'll copy line 16 that gets the 'quizId' parameter. And I'll paste that inside 'ngOnInit'. And I'll create a variable called 'quizId' and then's pass this along to 'Get Questions'. And that should be it, let's try it out. So first we'll need to start our server on the back end. And then in our web app, let's add a new question. And make sure you have a 'slash one' at the end of your URL otherwise this would not work.
Then let's add the question and let's post it. Now, let's refresh. And now we can see the new question is loaded if we try to go to 'slash two' in the URL it won't show the question. So we are now getting questions that belong only to a specific 'quizId'. Notice though, back when we started the server we actually didn't create a 'quiz' and so that 'quizId' really pointed a reference 'nothing'.
What that means is we can add a question to a 'quizId' that does not even exist. So we'll need some sort of check to make sure that there's valid quiz with that ID. Let's 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