Diving into a new Framework. From Ruby on Rails to ASP .Net — C#
Part 3
So, thanks for reaching this far in my series. If you missed the previous ones, here they are:
The last thing we did was store the Array of orders in the state, now we are ready to send a request to our server and create this data in our database.
The application is quite simple, we are logged in with a username, so to make a request, I am sending the username in the query:
This is the submit button, that calls processOrders:
This function calls API.processNewOrders as a call back:
Here we are sending a POST request to “orders/multiple?username=${user}” and we are sending the Array of objects in the body.
Now let’s dive into the OrderController:
Since we are using the database, the CreateList action in the controller is asynchronous, and will return a Task of the type ActionResult and will take a string username from a query and, from the body will take in a list of objects that matches the OrderViewModel (serializer).
First we check if we have any errors in the array of objects. That’s what the if statement is doing.
After, we try to find the client using the helper method GetClientByUsername.
If we don’t find, returns a BadRequest Task, otherwise we add this Orders to the database, to the correspondent client.
The last thing to do now, is (once we have a positive response from the server) to display those orders in the database, with a receipt number (I’m using the ID, since it’s unique).
After the request, we go to “/profile”, if we check this route, we are going to the DashBoard:
Our Dashboard is rendering MyItemsContainer and passing the current user:
When this component mounts, we make a request to get this user data:
The function getDataAndSetOrders calls API.getMyOrders:
If you are confused with async / await, this is the same as follows:
We are making a request to “orders?username=${userInfo}”, that takes us to the Action:
Here, what we are doing is essentially, checking if the user exists, then going into the database, getting all the orders that belongs to this user, and returning them as an Array of Objects.
As we saw in the useEffect function, once we have this Array, we store it in the State of our component.
Now we can loop over this array and display however we want.
In my case, I am just displaying it in a table:
And that is it!
We completed our first C# .NET Core API app integrated with React!
Hopefully, this is useful for someone, and you will come back next week with a new series!!!
