Read data using Entity Framework Core in Blazor

in this video we're going to see how to read data from a database using Entity framework core in a Blazer web app in net 8 this video is in continuation to my previous two videos in my playlist where I show how to create a database and how to save data let's add a method to the application project for performing the read operation so in the application project expand the interfaces folder and double click iBook repository let's add a member task of list of book get all a sync now let's implement this method in the infrastructure project so inside the infrastructure project expand the repositories folder and double click the Book Repository class let's implement this interface and inside the method say VAR books equals await context. books do to list async and return books now let's move on to the presentation layer in the simple book catalog Blazer web app project expand the components folder and expand the pages folder and double click add new. Razer now we want to add a link to a page where we show a list of all books so right below the submit button let's add an anchor element with the text back to list set the HF attribute to slash and class attribute to BTN BTN secondary Shadow none and we would like to add some margin so say ms3 so now let's create the list component so right click the pages folder and say add razor component and call the component list now we want this component to be a routable component so add a page directive to the top say at page and specify a route template of slash now before we proceed any further I want to demonstrate a feature of Blazer in net 8 called enhanced navigation so let's run the app and as you can see here at the root URL we have the list component rendered now right click the page and click inspect and click the network Tab and navigate to the add new component so here at the bottom we have the back to list button now watch the loading spinner when I click the back to list button you see that there is no blip and on the right hand side here we have a fch request initiated by blazer. web.js for the list component so instead of downloading all the assets from the server we made a request only for the component we needed and that component was rendered and the page was not reloaded so this improves the user experience for the application so this means that enhanced navigation is by default enabled but if we want to turn off enhanced navigation we can do that too so go back to visual studio and go to the add new component and to the Anchor element let's add an attribute data enhance now equals false now run the app once again right click the page click inspect and click the network Tab and navigate to the add new component once again watch the loading spinner when I click the back to list button we see this time there's a blip and on the right hand side here we see all the assets got downloaded from the server instead of making a request only for the component we needed so this means that a page reload was going on since we turned off enhanced navigation for the link let's turn it back on from the anchor element remove the data enance now attribute now let's work on the list component so open list. Razer and here remove the heading and use the page title component to set the title for the page which will be displayed in the browser tab let's set the text to book list and in the code block create a private nullable field of type list list of book and call it books and we want to get the list of books from the repository so at the top here say at inject iBook repository and call it repository we want to get the list of all books once the component has been initialized so we have a life cycle method for that so in the code block here say protected override and choose oninitialized Asing and inside this method say books equals await repository. get all asnc notice we got the async modifier added to the method now let's add some razor markup for displaying these books so at the top here create a Dev with the class row justify content Center and inside that create a div with a class called six now first first let's check if books is null so a if books is null create a div with a class book item and inside that say loading books please wait otherwise we want to check if the books variable contains any books so say else if books. any let's use a for each Loop to Loop through the books and create a div with a class book item and inside that let's create a div with the class book card and another D with a class book card body and create a H5 heading and set the content to a razor expression so say at book. title and after the heading Say by at book. author and let's let's use a vertical bar at book. publication date since the publication date is nullable let's use a question mark do two string and we want to display the date in the format month day comma year so let's specify the format string and finally if there are no books to be found say the class equals book item and set the content to no books found now if you run the app we can see the single book that we added in the last video of course the UI does not look good we'll fix that in just a bit but for now I'm going to bring visual studio and the browser side by side and I want to create a link in the list component to navigate to the add new component so up here create an anchor tag with the text add new and set the HF attribute to add- new and set the class attribute to BTN BTN primary Shadow none and let's add some margin at the bottom so say mb3 now if you want to see the page getting updated instantly click on the drop- down arrow next to the hot reload button and make sure hot reload on file save is checked otherwise click on it to check it and click the save button and we see the add new button on the right hand side now let's add some books to the catalog by clicking on the add new button now it's time to style the UI so open solution Explorer and right click the pages folder and select add new item in the search bar search for CSS and click stylesheet and name the file list. razor. CSS now in the list component we have a div with the class book item and we would like to style that so inside the CSS file say do book- item open and close curly braces set paring to 1.5 RM and click the save button to see the changes similarly set margin bottom to one REM set box Shadow to 0 0 0 0.5 REM and specify the color rgba 0 0 0 0.3 and finally let's add some border radius set border radius to 0.5 remm now that we have fixed our UI let's talk about a couple of things go to list. Razer and scroll down we have this div with a class book card the dis the details of a single book this is a good candidate for a reusable component so copy this markup here and open solution Explorer and right click the components folder and select add razor component and name the component book cart. Razer now replace the heading with the copied markup so paste it here and inside the code block create a public property of type book we need to make it required let's turn this property into into a parameter so that its value can be supplied from the parent component so decorate the property with the parameter attribute now in this Mark up here we see squiggly lines so replace book with the book property now go back to the list component and instead of this markup here say book card and set the book parameter to book and now let's run the application we see that the app works just fine finally let's talk about another feature of Blazer in net 8 called streaming rendering let's go back to visual studio and in the list component scroll down and here we are getting book information from selur Express local DB database this does not take much time but let's say the data is present on a separate database server and there is some delay involved in getting the data let's simulate that kind of delay for our application by using await task. delay 3,000 so basically we are waiting for 3,000 milliseconds or 3 seconds before getting the data so while it is taking some time to get the data that is simulated by this task. delay call the books variable will be null and if we scroll up we can see we are checking if books is null in which case we displaying loading books please wait message let's run the app we can see we getting the loading spinner here in the browser and once the three seconds have elapsed we're getting all the book data however we're not seeing the loading books message this is happening because only after the book data is retrieved from the database the page will be rendered and sent to the client browser till then the page will still be loading and we won't see anything so this definitely harms the user experience for our application let's turn on streaming rendering go back to the list component and say at attribute stream rendering now let's run the app as you can see we have the initial UI displayed in the meantime data is being fished from the database and once data is available that data will be streamed into the response and displayed in the UI we don't need streaming rendering for our simple application so let's remove this attribute and remove the task. delay call as well so that's it for this video hope you found the video useful thanks for watching B

Channel: CodeGanesh

Views: 765

Keywords: blazor crud operations, read data using entity framework core, read data entity framework core, crud operations blazor, blazor .net 8 crud operations, blazor crud operations .net 8, read data to database ef core, read operation entity framework core, read operation ef core, component, razor component, enhanced navigation, streaming rendering, ef core read data, ef core crud operations, blazor crud, ef core crud, .net 8 blazor, blazor crud ef core, blazor ef core, codeganesh

Id: oGxBa3yI3Hk

Length: 12min 31sec (751 seconds)

Published: Sun Jan 07 2024