(#74) How to get data from database and use in View Component in asp.net core| Asp.Net Core tutorial

hi welcome again to asp.net core tutorial in previous video we have covered the basic concept of view component in asp.net core today in this video we will continue the view component concept and we will try to get the data from database and we will display this data on our ui so basically we are going to make this view component completely operational and that is the practical use of view component let's start i am going to use this view component to get some toe books or related books in our website so basically we are getting the dynamic data in view component and we will display this dynamic data on our website let's open visual studio here again we are back to our bookstore web application you can download this entire code from our github repository you can find the link into the description box of this video and now let's focus on view component here you can notice that we have one folder with name components and under this folder we have created this top books view component okay suppose if i want to get the data for this two books then i need to interact with the database now suppose i need to get the data of two books in this view component so let's see how to do that if you are watching this tutorial right from the beginning then i believe at this point you must know that we have some repositories in this project so let's focus on this book repository this book repository contains few methods and we are interacting with the database in this book repository so by maintaining the architecture of our application we will write the actual logic of getting two books it means the sql query or we can say link query that is going to hit on the database and that will extract the data in this book repository and we will use this book repository on our view component so that is how we will get the data let's do that over here okay so here you can notice that we are having some logic to get all books and get booked by id in the same manner we can add one more method if i copy this entire code and let's paste it over here so suppose here i'm writing get to books async okay and you can apply your logic over here in this query by writing some where conditions and the ultimate purpose is suppose we are selecting only five records so suppose here i am taking only five records and this method is ready whenever you will call this method it is going to return only top five books in the later videos we can also modify this logic of selecting the top books but right now we are just focusing on the concept and let's focus on the concept now suppose i want to use this get two books method into our view component so let's go to the view component and if you are watching this tutorial right from the beginning then you can notice that inside our controller class we are using these repositories let's see how we are doing that inside our controller class you can notice that we have created this constructor inside this constructor we are using these book repository and so the concept is dependency injection although we have not covered the concept of dependency injection in this tutorial as of now but in few upcoming videos we are going to do that to use this book repository into our view component let's copy this code and let's paste it into the view component either you can paste it or you can simply create your logic over here suppose first i need to create a constructor there we go the constructor is ready now i need to use this book repository let's do that that is all the name space so we have created a read-only field over here you can also update the name so suppose you want to write an underscore before this name so you can also update it from here if you want to keep the same name of this field and this parameter then you need to use this keyword it is done now now we need to call this method into our invoke async method so suppose here i'm writing like where books is equals to so i can use await keyword then i and i can use this book repository and then get two books async there we go now i need to return this books data along with the view file so we can simply copy this model and we can paste the name of our object inside this view method and that's it now we are returning a view and we are also returning the data into our view now we need to make some changes into our view file let's open the view views are available inside share folder so inside the shared folder we have created this components folder then we have the name of our view component and then we have this default dot cs html perfect now let's focus on to our index page as well so here is the index space right now you can notice that to display the two books we are using this partial view book thumbnail let's focus on this partial view as well okay so here you can notice that the entire logic is already written because we are using this power solute in our application to display all the books so we can utilize this parcel view into our view component as well yes you can use parcel view and view components together let's see how to do that but before that let's focus on some more logic so here you can notice that if i want to display a two books then i need to create a row then i need to create this table with a class row then i need to add few more divs and the class would be called md4 like this so i need to copy this logic into our view component view file so let's copy this one and or let's cut this logic from here let's save the changes go to this default dot cs html here i can remove it from here let's paste it again over here and now remember we are going to use this book thumbnail partial view so i can remove all of them from here also this is not the recommended version we can use the recommended one and this is the recommended one so i'm going to use this partial tag okay so now here i need to use the model and how can i use the model by using this model and now i need to provide the name of my model how can you do that so i can simply use i enumerable and inside this ian variable i need to pass the name of my model class and that is book model so let's copy it from here and paste it here now inside this tube i need to create a loop let's see how to do that so first i need to start with at the rate then for each okay then where book in collection what is the collection the collection is model it is very simple now i'm going to cut this one from here let's paste it over here perfect and now i'm going to pass the model where is the model it is available in this book object and that is it now you can notice one thing over here that we are writing a logic into view component view file but ultimately we are using the parcel view that we have already created into our application perfect and we are already calling this view component from our home page so here you can notice this is the tag for view component and we are using this top books let's save all the changes build the solution and run this application and now here you can see that we are having the two five books from our database and we are getting this data by using view component now let's debug this view component so i'm going to put a breakpoint on this view component over here then again let's refresh this page you can notice that you are getting and hit over here then press on the f10 button or you can click on this button on your visual studio then click on the f11 now we are inside into our repository again click on f10 so we got the data then here you can notice that inside this books object we have 5 books and we are returning all these five books from this invoke async method to our view file and the name of our view file is default.cshtml over here now again if you put a breakpoint over here and click on the continue button then you will notice that we are having the breakpoint over here as well perfect now we are passing this data into a parcel view and we are displaying that partial view onto our ui now you can see that we are using only one parcel view and we are reusing it everywhere we are displaying the top books let's remove this one from here for a while you can notice that we are using the same partial view to display these two books if you click on the old books then here you will also notice that you are displaying all the books by using the same partial view and that is how you can create a dynamic view component in asp.net code application remember view components are one of the main important concept and one of the main building block of any application whatever you want to display if that is the related data or i would say decide content for a particular page that does not have the main focus you can always use view component to get your data that is all in this video in the next video we will learn how can we pass some parameters from our view component to our invoke async method and based on those parameters we can get the data from our database make sure hit the like button comment share and subscribe to the channel thank you for watching have a great day

Channel: WebGentle

Views: 13,915

Keywords: asp.net core, asp.net core tutorial, asp.net core 3.0, asp.net core 3.0 tutorial, asp.net core mvc 3.1, asp.net core mvc 3.1 tutorial, asp net mvc, asp net mvc tutorial, dotnet core, dotnet core mvc, asp.net mvc core 3, asp.net mvc core tutorial, asp.net mvc core course, dot net core tutorial, dot net core mvc tutorial, asp.net core 3.1, .net core

Id: CLoNnyb_ok8

Length: 10min 16sec (616 seconds)

Published: Sun Aug 02 2020