(Beginner Level) Displaying Data and OnGetAsync method (Database Connectivity - 4) | ASP.NET Core 5

Displaying data and on get async. In the previous tutorial we created a form to save the data to our database. This is the form that we used at that time for saving the records to our database. In this tutorial we shall display the data by extracting the records from the database. The records to be displayed have to be obtained by running a query through the DB context. We have to run a query through the DB context and obtain the records from the database.

00:41 - Recall that all communication with the database it takes place through the DB context. We have discussed this in our previous tutorials already. And from the last tutorial, recall that we obtained a DB context in our index model class. We already have our DB context in our index model class and we can use that DB context to run the select query on the database. Before we proceed further, let us have a look at the index model class. for that, come to your project. This is the project folder.

In this we have our pages folder 01:23 - and inside our pages folder we have our razor page called index. This is the razor page and this is the file cs, csharp file that contains the index model class. Double click this file to open the index model class. This is the index model class that opens for us. index model class. We have already worked with this class in the previous tutorial. Today we will write additional code so that we can obtain the records from the database. But let us make a quick review of what we have already done. If you recall the previous tutorial, we obtained the DB context through the constructor, in the mode, in the manner as I have shown here. And this is the bind property. This is the bind property. public product product. This property, we used to bring the data from the posted form. And public void on post. This is where we handled the post request and saved the data to our database. Now today we have to contain.

We have to add a collection to this 02:46 - same file to the, sorry, to the same class that collection will hold the list of items that has to be displayed on our page. For that we will need an IList property. We will need an ilist property to hold the list of items that has to be displayed on the razor page. So add an Ilist as I have shown here. I have added this property: public Ilist specialized for product. The identifier will be products. We will access the collection with the products identifier. Using system dot collections dot generic; this namespace is required for this Ilist.

03:32 - I list is available in this namespace; so this will be required. so you can see we have added an Ilist for product. This will hold the collection of items that we have to display on our razor page. Now the question, immediate question, is how will Ilist be filled to obtain the records. we have to place a request through the DB context. The request will be placed to the DB context. This DB context will run a select * query on our database and after the query completes the records will be returned to the DB context and it will fill our Ilist. This is the scheme that we’re going to use, but here is a small problem. The problem is that if this query happens to be complex. Or if the database happens to be on a network, if it happens to be on a remote network. On a busy network.

04:39 - in both cases, or in either of these cases, this query is expected to take a long time. This query may take a long time and the data that we will receive will take some time to reach us. So when this happens, there is a hazard. There is a problem. The problem is that our website, our website will slow down and the performance will degrade. So what I say is that in such cases where you expect a delay of query; any network delay; the code should not be run in synchronous mode. This is not recommended. We should not run in synchronous manner because our website performance will slow down.

05:26 - It will degrade because of this delay that is associated with a remote network or with the complexity of the select query. So what should we do? We will do. We will obtain the Ilist by an asynchronous operation. We will not use synchronous, we will use the asynchronous operation for obtaining the records from our database. For running an asynchronous operation, we will use async await. We will use the async await pattern to run this query in an asynchronous manner.

so let us see how we can add the async await 06:13 - pattern to run this query and obtain a records in asynchronous manner. This is the on get async method that we have added. If you see this product we added this time; and after this products, we are adding public async void on get async instead of on get. Our method is on get async and this async keyword. This await keyword and this ToListAsync keyword [method]. These keywords, they are now helping us to run the query in an asynchronous manner. see, products will be filled: await products context dot products dot to list async. This list will be filled in an asynchronous manner. You should examine this code and follow the same practice in your own programs also. this is the correct approach for handling a get request if the request, if the process, if the processing is going to take a long time.

07:18 - In that case you should use the on get async method. Since we have already used the asynchronous mode for on get, it is now also an opportunity for us to replace our older on post method. This is the on post method we used earlier. We will replace this method by on post async. You can see that we have used async await and save changes async to save the record to our database in an asynchronous manner. async task on post async, context dot products dot add product. we are adding the product to our DB set. And await context dot save changes async.

This is what we have modified and this is 08:15 - again the recommended approach for handling the on post request, especially in a case where your database operations they are expected to take a long time. Let me next show the completed index model class. This is the index model class that we have completed so far, and this is in fact the final finally done class for this project. See this is the index model class and here we obtained the DB context. This was the bind property for saving the data from the post request, and this is the on post async that we modified just now.

09:01 - and this is the products collection that contains the records from the data. This this is the on get async that we wrote just now, so this is the completed code for the index model class. Now come to the razor page. Come to the razor page to complete the markup for the display of the data. Complete the razor markup. We have kept it very simple and let me explain how I have done it. This was the form that we used the last time. After this, after this closing tag of the form we have made space to write H1 tag.

09:43 - This will tell us that our data is being displayed here now. This @, this @ is a part of the razor syntax. This tells that dot net code is now starting. so after @ we have written foreach. This is the for each loop. It runs on the products and each time it runs, it shows the name property of your product, and after that an HR is shown as a separator. So this is how we can do it. This is one of the easiest ways of displaying the record, the data, the property. But there are other methods also. And sometimes they prove better also. we will look, look at them in our future tutorials, but we will not do them today.

10:31 - Run the project to see the data that you see the data displayed like this. We saved these records and these are now available for display. You should run this tutorial on your own also to get a better understanding of the display process. Thank you. .