Join Alexander Zanfir for an in-depth discussion in this video Create a post route, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] We have everything we need on our front-end to post a new question, what we need now is the backend service to allow us to handle the post request. So let's go ahead and open up Visual Studio Community. We will be working with Core 2.0 as mentioned earlier. To use Core 2.0, we'll need to have the latest version of Visual Studio installed, so make sure you update your version of Visual Studio if you have an older one, since the minimal requirement is version 15.3.
The next thing we'll need is .NET Core 2.0 SDK, so let's install that. Head over to microsoft.com/net/download/core, and under SDK, we can see .NET Core 2.0 SDK, and please download the version for your specific operating system. I already have the SDK installed, so on your end, please follow through the installation instructions using the default settings.
Once the SDK is installed, we can go back to our Visual Studio Community. Then we'll go to File, New, Project, and let's head over to our project directory. Now, let's call our project quiz-backend, then under Visual C#, select .NET Core, and then we'll select ASP.NET Core Web Application. We'll hit OK.
Then from the top drop down, we'll select ASP.NET Core 2.0, and from the list of templates, we'll use Web API. Then let's hit OK. The project is now generated, and the dependencies are installed using NuGet. This is a very similar process to how we created a project with the Angular CLI. If you are familiar with previous versions of ASP.NET, you can see that by opening up Startup.cs, and Program.cs, that Core 2.0 is far less verbose and simple.
Let's run our application now. We'll go to the top and hit the play button. We can see it starts a browser, and it takes us to a values endpoint. Let's see how that works by opening up the values controller. So I've closed the browser, which will stop the program from running, and then let's go to our Controllers folder. Here, we can see a ValuesController, and then a Get function on line 14.
This returns a hard quoted string array of value1 and value2, which is exactly what we saw when our program started and it showed those default values. Next let's create our own controller, which will have a route that will provide our question interface for the front-end. We will begin by creating a new controller called QuestionController. Let's right click on our Controllers folder and select Add Controller. If you get a message about minimal or full dependencies, select minimal for that, since we'll be building a simple web API.
Once that message is gone, let's go over the process again, and add the controller. We'll select an API controller with Empty, and we'll call it QuestionsController. As we can see, it set up a simple class for us with a few decorators to get us going, such as specifying the type that our controller will handle, in this case, JSON, and then setting up the route path, which is api/Questions.
Let's create our first route function. Since we are trying to post a question from the front-end, we will make a post function. Let's go ahead and open up the values controller, and we can copy that as a template, so let's scroll down to the post, and copy everything between line 27 and line 30, and let's paste that in our controller. Let's give this a try. We can use an application called Postman, which you can get as a web application, which will run in Chrome, or you can get as a stand alone for Windows or other operating systems.
So the first thing I'll do is run our server, and the reason we're using Postman is because the browser, by default, will only allow us to use a get action. So if I were to go to our questions controller, we don't have a default get action, only a post. In our console, the path is not found, so we'll need to use Postman in order to use a post action. First thing we'll do is go back to our browser, and grab that URL.
Then we'll paste it into Postman, and from a get action, we'll set it to post in the drop down on the left. Let's try hitting Send to see what happens. We're getting Unsupported Media Type, so let's go over to the Body, select raw, and then from the drop down, we'll select JSON, since we specified that with the decorator in our controller. We'll hit Send again, and we're getting a 200 OK, so we know it's working. You might be wondering, why are we using Postman when our Angular front-end app already has the functionality to post a new question? We do this because we know Postman works, unlike our Angular app, which can now post also, but we haven't tested it yet, so instead of testing our front-end and back-end at the same time, we first use Postman and confirm our back-end is working, then switch to our front-end post and confirm the front-end works.
So let's continue testing it. We know we'll need to send some question text over, so let's put that in in JSON format in Postman. So we'll need our question text, and we'll simply pass in test as of value placeholder. Let's hit send. We know it works, but how are we going to test to see if we receive that value on our back-end? Let's go back, and we'll set a breakpoint inside the function, and lets send it once again. Our breakpoint is triggered, and if we hover over value, we're getting null, and not our JSON object that we expected.
That's because the parameter we specified is a string, and we know we're passing the JSON object. So in order to handle taking in a JSON object, we'll need to create something in our back-end that represents that JSON object we're expecting to take in, with all of the same properties, in this case, we just have a text property for now. So let's stop our server, and let's create a Models folder. Inside here, let's add a new class.
Let's call it Question, and in the file generated, we can see that there's a namespace quiz-backend. C# doesn't like this dash syntax, so we'll change that to an underscore, and to make sure that doesn't happen in the future, let's right click on our project, go to Properties, and change the default namespace to quiz_backend. Let's save that.
Next, let's add a single property. We'll use P-R-O-P, and hit tab twice to use the template. Then we'll set the type to string, and the property name to text. Let's save that. Then back in our questions controller, let's change the type from string to Models.Question, and instead of value, we'll call it question.
Now let's try this again. Let's go over to Postman, and hit Send. Let's hover over question, and we can see we're getting the value test, so we know it's working. Next let's post with our Angular app, since we know our back-end is working.
- 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