Join Kazi Nasrat Ali for an in-depth discussion in this video Create a REST API controller, part of Building React and ASP.NET MVC 5 Applications.
- [Instructor] Okay, so far, we have been dealing with front end and front end related code. Now we are going to create REST API controller. This controller will have endpoints for our web service and React app will use these APIs to talk to the back end and to the database. The data communication is generally in JSON format, or it can be small text or string also. So let's go ahead and create a controller.
So let's create a controller, right-click, add, a new scaffolded item. Now select MVC 5 Controller, empty controller, add, and we are going to name this as data controller. Click add. So there is my basic empty controller. Before going further, I'd like to get some sample data to the database. I have some SQL code snippet in the code snippet folder that I can execute in SQL Server Management Studio to get the data.
And there are the SQL statements that will insert data into food items table. So, let's just execute it, and now view the table. There I have some data, eight food items, the name, description, picture, the location of the image for each food, and their price. Now let's go to result studio. Now we need to get those food items, so we need a signature for the food items.
Let's call it get menu list. And this is not going to return any view. I'm going to return null and we'll do the coding later, just let's get the signature going. We'll also need the React app to know the user ID when a user signs in. So we need another signature, maybe you can call it get user ID. So this signature can return a string, so we'll do public string get user ID, return.
We're going to just put the signature for now and we will do the coding later. The third signature that we need is place order. When a user places an order, React app will send those orders in JSON format and talk to the server through this endpoint. We'll call it public action result place order. And let's just return null right now.
Again, we'll do the coding later. Of these three endpoints, this one is get, so you'll just put the http get up here, http get. This one also is http get, but this one, the place order is http post, because the user is going to post the order data through this endpoint.
Next, we're going to code these functions.
- Creating the back end
- Scaffolding a project with MVC 5
- Setting up the service API for data
- Creating the front end with React
- Handling events for React elements
- Responsive UI and mobile friendliness
- Securing the API
- Debugging the front end and back end