.NET Blazor | Blazor Book Management System using SQL Server & Syncfusion Components.

Hello friends and everyone yeah welcome back to  netcode Hub channel you know nothing would have   facilitated a lot of projects and lessons for  dotnet Blazer webassembly and also Blazer server   and also we have lessons and projects for.net  Murray and that is for mobile and desktop app   development trying to check the playlist you're  going to find out this playlist over there   this video we are going to talk about mini  projects using Blazer server and Blazer web   assembly so I'm going to put all of the  projects here in a separate playlist and   I'm going to name it as Blazer mini projects  the motif of this video is actually lets you   have those who have business analyzing Blazer  either web assembly or Blazer server but those   who have the at least standard knowledge you  can actually grab something from this okay so   we're gonna have a look today on how to create a  simple mini project and that is a book database   I want to talk about boot database it's it means  a place where we can keep track of the books   so we must have the database and we must have the  book information so when you check the screen you   can see we have book image we have book ID we  have book title we have a book description and   also we can perform other actions as well such  as edit or updated data and also if you want to   delete it as well these are the basic things that  we perform or we did under books database but I   know when you have the basics you can actually  do more you can add more features to this we're   going to use some components such as things recent  third-party components for Blazer and we're going   to use them as you can see from here the place  that you see or the page that you see here it is   called a data grid now with that you can make a  sort out of this you can make a search over here   so if I want to search for this ID if I pass in  the ID number let's say 23 and if it is not found   it has no record to display I can clear that and  I'm going to have the whole list of the data again   if I search for anything like brand let's see  because I have nothing to display here because   I don't have any title or any book name known as  brand okay so let's see if I type in and any other   you can see I have the data over here that has the  end inside the symptom applies to the description   we also have pagination and as you can see  from here because you can see we have the book   name that we typed display Binet we can just  navigate to the book so as you can see from   here when I come down we have pages currently  we have two pages and this is the last page   we can also edit it it has the number  of items that you have in your database   you can also edit this you have this icon to  edit and also to delete we added the dialog   model and that is what we're using to perform  the editing and also the add-in so if I click   on this let's see if you have this page update  the book data in what the database so the book   that I click I have the data over here and  now I can just now make changes to this so I   can choose an image I can change the description  and at the end of the day I can save it as well   now when you go to the next you can also refresh  this as you can see from here you have the button   to refresh you can also drag this as you can  see from here drag column header to group The   Columns you can also group them drag it and  then put it here now it's going to be equipped   so we're going to group by description and that  is it you can also sort it by description you can   just collect that view from it now when it comes  to delete let's try to delete one book here and   see so I'm going to add maybe a dummy data here  so if I click on maybe this one uh any let's say   this so as soon as cycling the ID here is 43 the  name is evicted so if I click on this it asks me   are you sure you want to do this if I click on  ok now 43 is going to be deleted so you can see   it is it is off now okay but we still have it  here maybe we can still refresh the data grid   once you're doing hours to get this removed but  as soon as I click on this refresh 43 must be out   so there's no fighter again and it is getting  data from the database you can see there's no 43   also if I decide to delete this I can also clear  that and do you want to do that it is also off and   you can also refresh this here to get it removed  when we are doing this we're going to implement a   place where buyer snaps with delete it's going  to refresh automatically and I remove that   foreign yeah so I just modified the  the update that is when you add data   and I saw a refresh button so let's see and  we're gonna have a look on all of this so   let's let's try to add one data here and then  we're gonna delete it as well so this is test then I'm going to choose an image and that is the  image that I'm going to choose and it's going to   pop up over here as soon as it has been converted  to be 64 string then I'm going to save that and   I have the toast here I successfully saved okay  now when exactly it is now loading together the   current database bruise that we have and when  it's actually we have the data benetia now if   I click on delete the 65 ID of 65 now delete this  yes do that and now let's wait you could see that   is off so you see process successfully completed  all right so this is what you're gonna have a   look today all right so we're going to start from  scratch I'm going to end at where we've got into   you can actually add more features to this but  for now let's maintain this I sincerely on if you   want me to continue There is many projects then  give me thumbs up okay if I want to do that so it   enables people to also see this video all right  so we start by creating a Blazer uh This Server   yeah Blazer server project so let's launch a video  studio now let's create the Blazer server project   and now this I'm going to name it as maybe demo  Blazer server book database that's going to be   the name for this project and after I'm done  with this I'm going to put it at the GitHub   so you can just go in there and clone it send  the description and I'll put a link over there and that's the location where I'm Gonna  Keep it in the folder called mini projects and the framework is known as 7.0  that is what you're going to use   so you can click on create to get it created so now the project is ready and one question  about Blazer server is it is a server so   you can decide to create a map  controller to it you can decide   to also create service and outside  the service in your Blazer pages   you're going to map the controller so we  can create our controller and also run this   controller in a browser and see the action method  that you have created but we can decide to also   skip that but for this video as I said earlier  on this indicative video for those who have the   basic knowledge so I prefer to do everything for  you guys to see not to just skip those things   because there is important as well now let's  see so let's first run this project and see the   template as a bullet plate as soon as you create  a new blazer server project so let's do that so first of all let's build this project then we we now run this project yeah so you see that from here we have our  data and these are fetch data so this is   the boilerplate as soon as you create a new  blazer server project that's what you see as   soon as you run that now when you go to solution  Explorer and that's we're going to work okay so   you can see from here it's not like the Blazer  assembly whereby going to have a server and a   library and uh clients here it is one we have  the same server we have everything in it so we   have to install some packages and we're going  to do the same thing to this anything that's   what I want to do we're going to do A2 This  Server because it is a server full server and   um you're gonna work with it okay so don't worry  now the next thing to do here is we want to   add controller to it you can see from  a default level you create a project   you don't have controller folder so we can do  that but when you create controller folder we   have to map the controller in the settings file  that's a program.cs file so let's first do that   before we create a folder for our controller  so let's navigate to program.cs file and I'm   in here we're going to perform that so the  next thing to do here when you're here is we're going to add two lines of code and that is  what they are not found here so let me just give   a space here and these are the lines that you're  going to add we want to add controller with views   also you want to specify our HTTP client now here  we are creating it as a local API because you're   going to use an HTTP client Factory so this name  is dynamic you can change it to any name at all   that you want but remember that anytime that you  create an instance of this HTTP Factory you're   gonna get this lens and you're gonna have to  you specify the name that we created here to   create the client and also you can see we have  our base URL so what is our base here when we   run this application you can see we have 7298  so that is what you have to pass in here 7298 okay you must solve this forward slash at the  end so make sure I do these things and that's   what you need also when it comes you could see we  have round 10 we have um map Hub and also we have   this four by page so these are the things that  it also needs for example to render a controller   and the Blazer server app now when you're done  with this you can now save this peacefully and   move on to the next one whoa sorry one I forgot  one thing now you see from here we have to there   is a middleware pipeline so we have to add  that after making a registration let's add   map controller and you have to put that in here  so app dot map controllers and now this is going   to enable us to use that control list I believe  I haven't forgotten any for now that is it let's   move on now the next thing to do here is first  we're going to create a database so we need to   install some packages and that's we're going to  use let's install first of all empty framework   core we have to install different recorder tools  also you have to install multiple call that SQL   Server because that's what you want to use you can  decide to use an sqlite okay if you decide to use   the line it's going to store into the inside the  application or on your server but we would like   to use the SQL database too because it is here so  let's let's get going let's install this packages   so you know what I just prepared before um  recording this video so I have these packages   over there so I just have to go in there as you  can see from my notes and I'll just grab them from   here so these are the packages that you need to  install SQL Server entry framework core we have   a design also tools now designing tools you can  decide to install one if you install the design we   can have access to dot net EF but if you install  only tools I'm going to have ADD migration because   I want to get to migration when they install  the tools you have to do just add migration   then you give it name so that's going to  be the name then after that you're going to   update database and now this is going to work  okay that is for when you install these tools   but if you install the design they're  going to have.net so.net EF migrations   then add migration or add then give it a name  here and after that you're going to say the   same.net EF database then update then specify the  name here okay so it depends on which one that   you want to use if you want to install design  you can use this if you want to install tools   you can use this so anyways if you install two  they saved all they choose to meaning that you   can install you can use any of this in it okay  so let's go in there and I'm going to grab this   I'm going to install it too here I'm going to grab  this and I'll save everything I have here and I'll   close the steps I'll go to the listeners program  now here I'll just right click and now unload   projects and after unloading I'm going to paste  this yes if I go to solidness program I have this   if I click on it I must have the project settings  and now in here I'm going to paste this here so I just press an item group then I'll paste this so Ctrl k d and these  are the package references that I need to add   and let's see so the tag was not closed okay so  this tag not closed you have to close it up here   yeah so I think it's fixed now now let's save  that and I'm going to close that and now in here   reload this right click and I go to reload with  dependencies and now once I'm done what I'm going   to do here is right click on dependencies  and I click on management get packages   thank you then my new job packages we click on  that so for you if you're not having that you   just have to come to the browse and try to install  them okay when it comes to browse you just have to   copy them because you have them installed over  here so you only do the same thing install them   as you can see from here all right now you are  done I'm going to just build the project again   so right click on this and I rebuild the project  and see if everything is working as expected that's right so it is ready now what  you can do here is let's create our   database connection string and we're going  to do that in the asset indo.json so let's   specify a database connection string here  because you want to First create a database so I'm going to paste it here I'm going to  specify can I send string and at the name of   digital based kind of some default connection the  database that I'm going to use here it is book DB   so I'm going to add demo demo book database and  Transit connection is set it through and also   class server certificate where they also set it  through okay so now we are done let's go in there   and create make sure you add this command because  it's very necessary let's go in there and add our   app DB contest and that's what we're going to  use to connect our database and also to create   or to store where a table or a database table  needs eight properties from or column names from   so we have to do that right I think  we have to create models first so   we're going to click on Project  let's add a new folders to models   so there's going to be models and that we're going  to add all our models okay now let's frankly can   create our book model you know this is for a  book database so there's going to be a book now this book is going to have some properties  such as ID name description and image you want   to have these few properties you can add more  but for sake of our time in this video too I   want to add just four properties here and that  we're going to use in the whole application so these are the properties you want to have an ID  I know I definitely defaultly and definitely it's   going to use as a primary key we have book title  description and image now if you see from here   that I made image as a string the reason is you're  going to convert this image into base default   string and I like that I like converting image  based default string because when I do that it is   very easy for you to store in a database and also  retrieve it and I'll use an image tag to render   that to display the content it's very simple and  easy we're gonna have a look at that too now let's   save that after doing this let's close this and  we have to create a app DB contest and that stands   for application database can I send that's a  contest so laser can I send file now let's do   that we're going to do that in a new folder called  data and I'll let you have the data folder here   already so we want to do that here let's create  a class and now this class is going to be appdb   DB contest okay so put that as an MDB contest  and this contest class is going to inherit from   DB contest so this DB contest is a parent class  I say Base Class coming from EF core and that is   the Entity framework call as you can see from the  namespace so make sure you use that and you have   it set okay now the next thing to do here let's  specify let's create a Constructor for this and   I'll specify our connection string so control  period hit here Ctrl pre red now you can see we   have this last one it's the last bit three or two  generate control attack with this and now let's   copy the name of this and let's pass it here and  that is it let's bring in our table so down here   we place our table and the table is from the book  and if we set the name to the database table as   well books the table we set the default because  that's the default one that we are using let's   save that okay so now we're done with this we have  to resend this connection in the app settings not   the app settings but I need a program.cs file so  click here and now let's do it over here so down   here before make sure I do not put it after they  are built because I'm going to build the the ones   over here so it has to build the ones that we are  registering to so make sure you don't put it over   here so we can create a VAR space here so you can  work here and now let's paste this so you can see   from here you're using beta.services.idb contest  is specified the contest class you pass an option   as a parameter and I specify use SQL Server now  this is a package that we installed earlier on   the vehicle record and I want to grab the default  connection and that is what we specify in the app   DB contest and connection um string name then  as div default connection and also we check if   it is now if it is deleted you want to choose  an exception like this with this expression   exception is dynamic so you can put it in the  message that you want to do we want to display   anytime digital base connection string is deleted  okay now when you're done with this alert you're   good to go so you can now go in there now start  without migration and that's a database migration now before we do that let's first build and see  if it's also working as expected you go to rebuild yeah so that is it now go to package manager  console if you're not seeing EOS don't worry   go to tools and now you get package manager you  see we have the console here click on it and   now that is where we are so it's initializing  the price shell host CLS you can clear screen   and that's the next thing that we're going to  do here is as I said earlier on remember that   the one that you installed you have to use so if  it is this one then let's copy this dot net EF   migration but before that you have to pass in LS  that's when using.net EF now let's copy the name   because we have to be inside the application  and we are in already that's the solution net then EF migrations add and I'm  giving the name as initials so I just have to grab this initials because  that's what I'm going to be using to update it   let's read is going to build it and let's  say so it is saying that no project was   found change the current directory or use the  previous options let's do that so we have this   I'm set as startup projects open this and let's  see that it sets all right let's do it again okay now let's do LS and CD let's  see if we can just get into this okay so that is a CD paste that LS yeah we are  in now so now let's go in there and I'll do the   same thing as we did already got an idea  of migrations add initials that is a name   let's wait you're going to build it so but  started you're gonna finish it quick and now   create a migration file that's we're going  to specify the column name that we need in   a database table after that we just have to go  to the second one update.net EF update database   then specify the name as initials over there  so we see better see that and I can see it   is done so a file is going to be generated  here now when you go to this let's specify   that met paste this and now we have to pass  in initials as a name now let's update that yeah so you can see a bit succeeded and it  is running by the EF call to creating all our   tables as you can read from here the table name  that we specify is the books table remember we   did that in the FDB contest on top here that is  this so it is using the the property name over   here to create the columns in a table for us it  has finished okay so it is now done when you go   to SQL Server object Explorer just refresh this  and we're going to have the name over there the   first table or the first DB that I created  was let's see was the books DB now this is   demo boost DB if I open this and I'll go to  tables wait for this to get refreshed and we   have to see our books table as a table over  here and that is it now it is set and done   so you have to create a service to render  this components okay so let's go to   solicitness program now I want to add a new  folder and I named it at services or book services now we have to create an interface  implementation class for this so   let's add a new item and now here we need  an interface for this so we say interface   and we become passengers interface like  that so we want to say I book service okay so iBook service remember that  you're going to choose an interface   rather so iBook servers and now here we make  sure that they do not have the same name as a   folder name the folder is the book services  and at the interface is iBook service let's   create an implementation class for that too  and this class is going to be a book service make sure I don't do that so  we don't have any ambiguous   um went uh ambiguous errors when I run the  application and this class hasn't heard from   the interface as you know already control  period we can generate interface for this   or you can just create ctor for Constructor and  now when it comes to this iBook service when you   have some method over here that is to manage  to delete and to um get the list management   comprise of ADD and also update the table or for  the book info delete and also get the whole list   so in here we have this now we are not creating  any response model you want to have a simple as   simple as ABCD project you don't want to create  too many models here so for now you're going to   maintain this you can see we are specifying our  models inside the task so this is our return   type we want to have a success that has a bull  and if you want to have this string message so   any message at all when the error when it makes  success you want to display that we do the same   thing to this and we have to get books async now  the first I'm going to comprise of ADD and delete   okay so if I want to know is it add an update if I  want to add it I want to add boost data I'm going   to use this interface if I want to update book  data I'm going to use the same interface if I want   to delete it use this if I want to get a whole  list I'm going to do this okay we're not doing it   for a single one because the the Target that we're  going to use here gonna display all the tables all   the fields all the columns in it so we do not need  to click on view single also again it is waste of   time now let's go for the implementation so with  the implementation we can just go in there and   book service yeah control period we can Implement  all the interfaces and that's what we have here   let's start working with the delete async so  we're going to clear this and I'm paste this   so this that we have here we want to check if the  ID that is the delete if the ID that is coming in   is greater than if it is less than or equal to  zero you want to return this error message and   we have to set here as async and also we have to  check Bool that is a book to be deleted you want   to record this rbb contest and now we want to  first get from the database and uh in case it   is now we want to return error message in case it  is not then you want to remove from this and also   save changes and return success message now you  see from here we have this error because we have   not injected the appdb contest so appdb contest we  can do that by injecting it over here you create   an object out of this control period or that's a  Control Plus dot you're going to have this assign   field not for the property rather going to be the  field we have this assigned and that error is gone   now you have to create these two messages so with  this first or default is going to come from the EF   core control period we have to include this EF  call over here and that's the Entity framework   call we have three namespaces and that's all we  have now now this um error message and success   message you have to create them down here so let's  read that let's come here now let's do it here   I am very much as possible to make this very  easy for you to to land okay or to just follow   so you can see I have this jet stream message one  string message one error message and one success   message so each time it makes access display  that anytime there's error display that okay   we can make a specific one here maybe you want  to check username is incorrect you want to check   this this and that you can do that but for now  you want to just have a static message there's   one another so that is static so it's going to be  created once and for the whole application once   and that's all so if the success display this  if it is not successful that's an error message   display that and that's what we are returning  over here now let's work with this method   now this method is very simple so you can just  collect this and now use this Lambda expression so what is a Lambda expression I've made a video  on that using Lambda expression using the uh the   now collision preparator and also the 10 hour  operator I'll put the link under this you can   check that and know how to use them but for  now that is known as the fat Arrow fat Arrow   and here you see we want to populate this the  list and I'll return let's make this an async   boom and that is it let's work on this manage  and thus we have to write our Logic for update   and DeLay So we first have to check if the ID  coming in it is greater than zero it means we   have data already and let's update that  if the ID is less than zero it makes the   new data you have to add that so let's  click this and let's have a logic in here go so that is it and I can see from here  we say that a book is equal to now I like   using is now okay I like using this so if  it is equal to now let's make it as an async   then I want to return an error message if the ID  is is equal to zero you want to check this method   meaning if that is equal to zero it means that  we're now going to address a new data coming in   and if it's a new data then I want to check the  title if it is not found already in the database   so I'm going to have a maternal return bull  here and I'm saying that is book already added   so if it is true and I'm going to do that you're  going to add it but in case it is four so that's   why you use this exclamation mark you say hey 10  the results opposite and that is going to be there   negative side okay so forth so if it is false  add it and I'll save it returns access message   and that's all but in case the ID is greater than  zero then what we're going to do you want to grab   the data by ID and we're going to check if it is  now return error message but in case it is not   then populate it and now add it to the database  save it and our return success message very simple   let's work on with this method and that's the  only one that left for our service gets rendered   so we can put that down here  okay so let's put it down here   and it's book already added we pass in the book  name now we're going to check from database if we   convert the book name to strength lowercase and  it is found if it is found return if it is not   we see from here we haven't returned book is not  now so return book is now means going to return   true it's not found me it's going to be 10 false  and that's what you're doing here so you see you   want to maintain the force so that's why we are  tenant is upside down to get it first so we can   use it so if the book returns through it the book  is already added and set case is going to return   an error message but a book is not then return  this access message populate it and now save it   so that is it that we have here now once you  have this beautiful and simple interface and   implementation class for our service we have  to restart this in the program.cs file so I'm   going to save all this and I can now close this  and I'll go to the program.cs file and try to   register this service over there and that is it so  let's put it beneath this connection string here   and it's just a simple line that we are adding  builder.services.ask code so anytime that we   create an instance of this interface we  want to add this you want the class you   also follow so this goes in and this follows  it because this interface here contains the   only the method names this service contains  the implementation or the definition for   this method so they are like trains hand in  hand that's why we are joining them together   let's save this and we can now close this  peacefully as well and let's see what to do next   after we've added our service for controller  peacefully we can also create a controller   for that and that's we're going to use to  test the application although when it comes   to Blizzard Pages you're not going to use the  controller you're going to call the data from   the controller I'm going to use a service  that we have created but to test it in the   browser let's create controller so let's go  to a solution and now let's create a folder   as controllers are going to be controller so add  this for that and that's going to be a controller   so with this controller let's add a new  and that's going to be a book controller   so add a new controller here and  I'm going to say API mt1 add book controller and that is it we have here we have  to create a Constructor and that is this one   so we generate Constructor for this or let's  use the other way around to passing City or   CT or hit and Enter key we have recreated we  need to inject our books so I book service   and that is it we create an instance of  this Control Plus dot we create an assign   field remember we have this here I want to  clear this space so yeah we're going to use   this services to render or to call for our  repo or other interface that we have created the first method that I want to have access here  it is an HTTP get it was already specified for   us here so we want to get books async and  we want to return okay using this fat Arrow   so I remember 10 I caught the service of  bookservice.getbooks async that is what   we are doing here okay now let's go for  the next one so next year let's save that   you want to call for a post that is when we try  to add book so manage book we're going to check   if book is now then return okay so we can put this  on the same line yes to make it simple so return   bad requests and that's what we are passing in  as false okay so with this force with this you   see from this bad request from passengers for CM  now let's get the data from the service and now   if the success you want to return okay with the  results if it is not success we want to return   bad requests and pass in this model let's have a  look at the last one that's going to be the delete so in the next line let's specify it is  normal get we're going to be delete now   here since we specify in our service that  we need an ID we have to specify the ID   here and definitely no ID is an integer so it  specifies an integer if you wanted a string   specify this as string okay so we see  we have an accent results and a delete   bookcasing you're going to come in with an ID and  that's the same idea that we did here take note   also we got a service from this book the latest  book is send personal ID the response every 10 if   it makes access but if it is not bad request  put in the response and off we go now let's   save this so we are done with that controller so  we can now go in there and test our controller   peacefully and see if it is working now let's  say there is an unless manage application and see so now let's try to see when we navigate to an  API because in an API and the control name is   book it means you have to go for the get method  let's even navigate to the controller and I'll   get it so you see from here there's nothing  here just one no data okay a call has been   made to a controller and it's working perfectly  but there's no data here so we have to now go in   there create our company eraser component and  try to make a call to this controller or the   services and try to add data to the database and  get it here before we get it to uh Blazer pages you know one thing that normally is Success  designing UI so when you design UI it takes   a lot of time and I have done that already  so you know what I'm going to do I'm going   to just copy this and paste the UI here and but  don't worry when it's like the GitHub report is   there so you can just clone it and I can just go  through bye there's a third party package that's   going to help us make this very easy and also  beautifully as you saw in the demo and that is   essentiation component I had one comment that  I should use this instruction and thanks to   the one who gave that comments and we are  implementing this interesting component now   for this subsequent mini projects I'm going  to be using them okay although the the Satan   they're not free we have to get a community  license to activate them but for nonsense   we are not having this is going to be the demo  one we are not using Community license for now   when you go to the website you can just go in the  register and our new media requirement I'm going   to assign their Community license for you free  then you can integrate it in your application   so let's start before I do that let's have  to install some Sim fishing component into   application and that's what we're going to  use here so instead of um putting or using   the default to the native codes you want to use  the third party codes because these components are   we are interesting I have the source code  here and that is a package references so we   have to include Blazer dot spinner that's what  simphus send the teams that pop-ups navigations   are great and also buttons so pause the video  install this copy them insert them one after the   other so you are done but you know what I have the  package reference already I'm going to grab this   then I'll just unload the projects paste  them and I reload again so I'm going to   copy this and make sure I save everything then  close it then I'll unload the projects here   yeah let's paste it into item group  so here I'll just paste that save this I'll close this and I'll try to reload this page I'm going to right click and now reload  project with dependencies after that I   go to dependencies and I'll try to  build this project so regular list   and it's going to restore the  packages that I have linked over here and that is it so I am done with mine so if you  pause the video and I'll do yours when you're done   we can continue the next thing to do here we have  to add these references to our import.razer file   because you don't want to be using them inside  the packages or the Razer components let's put   them at one place and that is a listener Explorer  let's go to import dot Razer and in here paste all   of this here so starting from the navigation and  add all of this to another you can see these are   models and as you see there is a different name so  I have to just go in there and grab this Project's   name and I have to just make a paste or make a  change instead yeah and I think it is up now okay   so I'll save them and close up so I'm closing  them so now we are done with this let's go in   there and create a component I'm going to use to  add book so I'm going to do that inside the pages   um there's a pages over here pages so right click  now add a new result component and the name is   going to be add book so and book dot razor  and now I can specify let's see what I did   and book okay so the name isn't right let me edit that okay so add book and now  in here let me specify the route as page so add book that is this one so let's run this and  try to navigate to this page and see if it works so let's go and gonna be add book because  that is a route and we have to yeah so we   are in here that's it so let's let's start  to modify somethings here and I know what   I'm gonna just as I said earlier on  I'm going to leave this code at the   GitHub so I can just go in there and  clone it okay so you know UI size you   decide to type in one by one we're gonna  waste time here so I'm gonna paste them so one two three boom yeah I have it all right  let's go through this so it's very simple okay   let's go to them you're going to understand this  very well and you have the right specify so I need   not to specify another route again and I'm going  to move this on top you know from here that we   are injecting navigation manager and that's what  we're using for navigations we're injecting the   service that we created at the iBook service and  there is an instant that we created and also we   are injecting a state container so what is State  container you know when it comes to navigating   object from one component to another one you're  going to use State con container State containers   in the memory section and it's going to keep  the data that you want to transport from one   component to another one you're going to keep  it right there generate a hash code and that's   going to use the high school to retrieve the  content from the memory okay so that's why the   state container is all about we haven't created  a class yet we're going to create it soon now we   have a deal with the Target and we're using an SF  dialog box is it dialog box SF dialogue that's a   sync Fusion anytime that you see SF it means sync  Fusion company that's that component okay so we   want to have the dialog box and that's going to be  the pop-up you want to set the visibility to True   anytime that the page loads you want to set it to  True allow print dinosaur or make it as smoother   and now we are specifying um the template as  you can see dialog templates and we want to   look through when we have any error in it when you  click on this um save button and there are errors   you want to save the errors in the list form and  I want to Loop through and I'll start over here   but we see we have visibility here so we want to  display if the error in the data are on the list   is more than zero when the count is more than zero  it means you have a list if so set this visibility   to true then display that list and I understand  the latest we are using is like a dictionary and   the key and um a value okay key value pair  you're using the same thing for this list   price property and Edge object so because you  have the property name and we have eight message   so if it's an email you're gonna say email email  is not allowed or it's not valid this and that   all right so as you can see from here we have  um this is a direct boss because you have the   content there's a header and a headache you're  going to set it dynamically so if it's an update   you want to set it as update if you're adding new  data such as a new data and also we see from here   we're going to add a card header so we're using  card as a bootstrap we are using card over here   and we are using the SF icon to display us  as a closing dialog so the kind of the time   that you see we're using that and this  is what we're going to use to close it   so this means as soon as you click on this  close dialog it has to close the dialog box okay   and we have a model so there's an edit form  you know this is the normal uh routine that   we do when creating a Blazer component we have  our edit form this is our model you can see we   have data annotations and validation summary and  we have the first one as what that's a book the   title because you specify the book over here  and as your book Diary is specified so it is   an object after this book model and we have it  so we can set the various properties here title   description and image you know we are not using  an ID because we don't need any ID for now so   um title description and image and now that  as you can see we have the validation summary   for each so we're going to pop up the  any error when you try to click on the   button or try to go to the next component  or next tag when the first tag isn't served so all of this when the button is clicked  to submit all these another circuits we are   having a dialog box button that's a dialog button  we're having only just one button over here and   the content here is saved when it is clicked call  this method the center applies to when the form is   clicked submitted you want to call this method two  to check for variation errors and all these stuffs   okay so that is it now from here we are making the  toast and that's what you see when um you click on   the button it displays successfully sent or done  everything and these tools you have to create a   result component for that okay so we have this  post over here now let's use that so the name of   this is make post and now we're going to set these  properties as a parameters those content title and   on display even the display should set you through  it is supposed to be hidden or closed set to force   and that is it so there is a Boolean expression  they're going to use and this is a title string   and a string so that's what I have specified here  now this is the content page that is where we are   trying to navigate to a page so you first have  to create a set base and assess High status code   and that is where we are receiving so we want  to have access to this content from the book   list when we click on it that's to come back to  this blazer because you want to update it that   is when you want to make an update so you have  to create it over here let's forget about this   we're going to talk about this later on but  let's see for the tools because you have the   page toast content title and now display so we  save this as a toast content so that's what you   are doing now let's go in there and create this  tools so we can understand what this stands for   we have to go to solution and in here  let's create a new Razer component and   at the name here is make toast so you can  just place it here as make toast Dutch razor and now inside these components if you want to  paste in this so you see we are using an SF toast   and you want to start the reference of this and  you can see we have a title as always time at 500   and we have an icon okay so I want to check this  interesting component for two so you're going to   see the same thing because I just went there and  I copied it boom and I pasted this over here so go   you check the documentations you're going to have  a lot more to that now so when you come to you see   we are setting this our parameters it means these  are going to be provided by separate component   that's a result component and that is the add  book component so we set all this as going to   be received so as soon as they receive they come  in when a parameter set async we want to set the   state as change of this twist you want to also  deliver 500 milliseconds and I want to display   this twist and that is editing that comes in here  for the title twist and display they're going to   face fit in here and make the toast complete and  that's what we are calling them over here so we   set the same same property here to provide the  values in to this parameters okay now the next   thing that we are doing here is you're creating  a list of errors and as you can see from here   we have a list of Errors now this list of Errors  coming from the error property a error model when   I come down here that's an error model it's having  a property and a message so we set the property   and then a message by grabbing through this so we  see from here that it's not reset this error we're   going to call this error here that's a validate  model we're passing the object of this model over   here and now we're going to check this validate  model you pass this object so there's also a   method when I want to come down here there's  a method it is accepting a book this is a book   model error and now we are going to first click  the error because you know there is a list so   we clear it first initially and now we're going  to check if the book image is now if description   is now if Center is Now display all this now it's  like you are setting up an um a dictionary key and   a value okay so key value so when you go in there  we're going to Loop through this the property and   the message that's what we are doing it on top  here we check here this is the property name so   that's the key and the value so here is an email  email and then the message is going to be like   email field cannot be now well Etc yeah okay and  um that is also we are going to check if there's   no error in it if all the properties have been  assigned values too then you want to display error   messages visible because it is you use a CSS class  so I want to check here with your style visibility   visible message you show hidden May supposed to be  hidden and anytime you have any error you want to   when the account is greater than zero you want to  set this to visible else we can set this to Hidden   and that's what we can set from the default one  okay now you have this accessibility for this and   now this representing for this close dialog you  know close dialog we created a class here that's a   method close dialog box and now when I come here  this is a close dialog so we set this to force   defaultly it is set to true that is it but we said  this is false and I will navigate to the home page   that is when you click on this close dialog it  turns you back to the home page when the hand save   is Click then you want to call this service no  from here we are calling a service area we're not   going the API or the controller we are calling the  service traits and now you want to after current   the service we create twist so this equation tool  is a method another is a method here you know I'm   making this into group group group okay so you can  actually you can call the group anytime that you   want to use them and now you see from this this  is a create let's see for this create twist it is   accepting status and a string message now if the  status is true then display the title as success   and I display the content here because you know  that this resource is coming in with a bull and   also a string as we did that in the service so if  the success you want to set the title Assassins   but in case the status is false or um it has a  force you want to set the title to alert and now   we want to set this message to the current message  that we have in there and that is what we are   doing here we set it displays it through remember  that the display is when you want to display this   SF twist display because as soon as the message  comes in you should watch here now when it comes   to the twist we are setting these two's content in  the title so after setting this title then display   the Twist and that's what we are doing here if  you really want to display those what about the   Titan the contents they are empty okay if you want  to display when they have values in it and I will   create a new instance of this book so it means  you're going to clear the old one and I'll create   a new instance so we need not to play or delete  the the one that you've um written into you or you   type into the text box you want to clear by using  this method create instance of this book and that   is it so as for this I can now clear this because  you know it is commented I don't want to confuse   you so that's what we're doing for this I think  I've gone through all this and now the last one   is the file change that is when I want to select a  flower image you know I'm using an input file and   I'm calling this file method there's an Unchained  method that's on file change I also create an   image tag here and I set the source to this image  so this book here Source it means that as soon as   I convert this image into base default string I  want to display it over here so this image is a   string and it's going to set as a source of this  image so I can have a view or a look at this okay   so this method when you come down here that is  the definition for that we want to first check   the type the format is it PNG is it jpg or jpeg so  this this method supports all the threads types it   is not supporting GF GIF and Etc okay only these  three method I can still override this and do more   now we check we resize you create a request the  file image size by this time by 300 from the   width and height we also pass in the format and I  will create a buffer size for a very serious size   and open to restream and I pass in the buffer  as you can see from this Buy Tab we have been   created also we create the size so now here we are  going to convert it from to base 64 stream we pass   in the buffer size over here and we pass in the  format so if it is the image slash PNG it's going   to come over here jpgs has PNG and image slash  jpg or image you know password Here and Now you   specify the type of the the base that the base64  conversion type and I will convert it to basically   for string so anytime that we try to navigate to  the page or try to use the page it knows the type   is the format and it knows the kind of um byte  it is going for but it's the fourth string and   I reset this book image you know there's the  strength so we set it to after the image has   been converted into string resets over here and  that's what we are doing over here very simple now   when the page is set or when um parameter set  remember that we've set the parameter here so   on top here we set one parameter another  set has code that is when a change   is made now change is made from this area on  top you can see we are having a routing it is   going to receive something outside from a separate  component and now that's going to be an integer so   we receive the integer right here and we create  a variable to hold that so when the parameter   changes then we want to set this title as a bit  meaning we're going to add the data so you want   to set this as update and now you want to receive  the state container here I have already explained   what state container is a memory location whereby  you can store object over the complex object and   retrieve it from the next component okay so that  is it and we've created over here by this state   container you have to create it mother class  so let's do that you have to add the state   container into our models so in here right click  and now let's add a class known as state container   right click and I click on add a new class and now  here you're going to say this is State container so State containers are about dictionary that  is a key and a value so we create a read-only   dictionary here we pass in the end it means the  key must be end integer and on this value must   be object could be complex object could be modus  okay and that's why we are passing here if one   specify this as only one data type you can pass  in that string okay or as integer it means it's   going to receive only integers but this time round  you want to pass in complex objects like models so   you want to set it as object and now we create a  new instance of this so this is the name of your   tunnel that is the name that we give it to this  dictionary and we create a new instance of this   now when you come here you can now come in and  control period we can inject the interface here   and that is what we are doing here so we see we  have added the state injected this over here and   now we can now go ahead and now use that okay  so this is a method from this state container   object tunnel because when it's set here from  this state contain accuracy we have this object   and over here now we are done with this we  have to go to this there's an ad we have to   go to them you have to write our book list that  is where you need to get the whole Booth from   the database and display it using the S7 grade so  let's do that we have to create a new folder not   only for that rather a new component and we are  going to set this as book list so let's say this booklist.reza so let's close this and I make a  paste of what we have already you can save this   so in here I'm going to paste this and now let's   go to this it's also also very simple  and easy to understand so don't worry you see that on top here we are creating  a new instance of we are injecting an HTTP   client Factory remember that we specify that in  the program.cs file when you check here we gave   it a name over here as local API and that's what  we're going to use so we do that and we inject   navigation manager and also the state container  as well we inject RDS runtime for the interface   of this JavaScript runtime and we also enjoyed  our service as well now here we are checking   if this database booklets.count is greater than  there then they want to display this because when   that happens it means that the database container  here has data in it now right from this container   when you trace down here you can see we have a  list that is a list here of this container and   a list of this book and I've assigned this to  this load data whenever whenever the page loads   check yeah load data we want to call the API we  create a new in terms of this HTTP client okay   Factory they specify the name that we did in the  program.cs file also we read the list from Json   so we read as a list of book now we check if the  response is greater than zero you want to assign   the results to this book list and that's the  book list here then if not if the response is   zero meaning we have no data in there then  we have to clear the data that we have in   the book list so we do that you can see it very  simple right so that is a load data method that   we call so when the page loads call this method  very simple so when you come here that's what   we are talking over here and display all this  we are using a simply same great component and   now we see this is a data source so this has come  in with a list and that's a very specified here   aside from that we create a reference and  this reference what we're going to use to   refresh it so when you check here delete  book you see we coin this method we call this   method against it as refresh and to refresh  itself and then gets as the current content also there's also a method and that is what I want  to talk about here that's the visibility property   and also this we create a reference here remember  that the reference that we created is out of this   SF grid you pass in the model and let's reference  what we specified on top here we specify the great   columns that I want to use in a data base no in  a grid to display and these are the columns you   see we have an image to display the first one  as image we specify the course here that is the   source rather and now you see here we can grab the  contest as book you can assign the image also from   here name of especially the ID title description  okay now the next one here is an accent so either   for delete or for update but you see from here  you're not seeing any delete or update word here   just that I added icons so these are the icons  e icons e icons edit and Truss trust me delete   edit Miss pencil meaning you're going to edit that  and now when we we assign a method that's an event   into it so it is a collab event anytime you click  on this you want to assign the current contest   here you pass it as a model complex object then  from this you're going to receive it down here   edit book data that's a model it's accepting this  book model so that's what it is doing over here   then we can now transport this book model to the  content page for review or to display now for this   edit we are creating navigate to detail well from  let's navigate to details let's check down here   navigate to details we are passing in this book  and I are passing this object okay now you can see   from here we have injected our state container  that is this one is an object out of this now   when I come here we create a state container  then you can see we have a method known as it is a dictionary so we are adding the key and  then the value the key is the hash code the value   is the book object this book object as you can see  from here it is a book model then we navigate to   this page then we pass in this passcode we are  not passing in the object you are passing only   an integer okay so we can get the integer and I  retrieve from the status or the state container   from the browser's memory so it's like it gets  sent only the ID when it gets there now grab   the content from the browser using the ID so  it's like we're going to make a query from the   browser's memory and I'll get the content that's  reset before okay now I know we have this great   toast we've done this already so we are having the  same thing so you just have to copy this and paste   normally we could have added maybe one class for  this but I don't want to make this complex to much   complicated for you I want to make this very  simple simple because I know that this is for   beginners or moderate programmers yeah those you  want to have one to proceed more in Blazer project   okay now we have all this you see we have this  delete book data and now this also is a method   that is called from here Gradebook data passing  the same book contest and now when you come here   we are going to first check I actually want to  do this we can do that by using um IGS runtime   and you can see we create a boom object here as  a variable and the response are going to come   here is going to be that yes or no so if the  response is no return do nothing but in case   it is yes then we're gonna perform this so first  of all let me clear this so you've got yourself   confused you first have to get call this Services  okay then delete book pass in the current book ID   the result that is coming in set you can  set this as you can see restring message   is equal to this result or we can just decide to  install specify this year you can just cut this   and now with this you can just paste it  here so if you have results that success   we have results Dot message so we can  now clear this because it's the same   we set display to true then we are going to create  the twist okay so that is it we have to face   we display this and then create tools or you  can create twist and a display because when   this comes in ascendants get displayed the tool  is going to be created and it's going to pop up   so can you just say like that and now here  after that you want to load the data because   here we are deleting so after deleted it has a  refresh and get the data back the current ones   and you can you can refresh this you know this  method is going to get the current data from   database okay by this method has a refresh  the form and I get at the current data okay   that is all that we've done  okay and very simple one as well   all right so that is it now here as you can see  we are making a toast we add a toast component   here so we create one component and you can  use it anywhere so if you if you create a new   component when you call this make toast you have  to specify this content and a title and a display   and yeah you got it working very simple okay and  now here we are using um as a spinner so it's not   this page is empty it load display the spinner it  keeps loading until the content has enough data   to make this statement or this I'm conditioning  a false so yes checking that if the conditioning   is greater than zero if the content don't count  that's the data coming from the database when it   counted and it is greater than zero it means  we have enough data display hide the spinner   but in case it is not then display the spinner  whilst it try to get the the content of that list   all right so that's our thing that we've done I  think we made only two pages for now and that's   what we see so now we are done with this let's  see what left for us to do again let's build   this again and see if you have any error in it  we try to rectify before we run this application [Music] all right so we have this now I just remembered  that you have to create our header let's read   that first so let's create Pages we can  put into the set or anywhere so pages and   unless click on ADD result components and  at this component let's set this as header so this is header and now in here we're going to specify what you  want to display let's say the bar on top of our   page we're going to have add data and as a  refresh the table we're going to have that   so here we are using the same Fusion app bar  you know what let me say this I am not I'm not   hired by Sim Fusion I love their components  and that's what I'm using okay so there's   no relation to sim Fusion just that I'm just a  male programmer and trying to use a component to   design and that's what I'm going to teach you  because we are easy okay to to implement them   there's other adapted parties component that  we can also use maybe you can just suggest   which one that you want us to try hands on and  we'll try to have a video on that too with the   project as well but as earlier on if you want  me to continue this mini project for you please   thumb me up okay so give me a thumbs up and I can  just comment about there don't forget that check   the description they're going to be a GitHub  link and just click to clone this application   nice okay let's move on so we are injecting  navigation manager and now we're using an SF   ambassy Fusion Abba we set this color to primary  and um we have these icons over here we have my   name as net code book database and you can see  we have an ABBA spacer so we're going to space it   save this from left to right we have two buttons  on our on your right and here we're gonna have   this method refresh and add book when this method  is called you want to call this method over here   that is when this button is clicked call this  method okay so this is a method we specify this   these are static variables so we don't want to  we want to create them once and for our home and   add book these are the references the links so we  call this message and now anytime when you click   on this refresh it comes with this static and then  grab its refresh and now pass it into this model   and I navigate to that page and that's what we  are doing over here all right so we can now save   this and let's try to rip this project again  and let's run this project that's it and see oh all right so you can see that it does  finish building now let's click all   these and let's try application and see so close   this I'm going to close that as well save  everything and let's run this application and see all right so we see we have an ambiguous exception  maybe we specify the name wrongly let's check   um index and also our book list we have to clear  one component because we have the same components   um please or routed as index let's see so we first  want to check the book list you can see we have   the page as the home page now when we check  this index two we have the same less levels   let's save do it again all right so the acceptance aren't solved yet we  are State container two needs to be registered   so we have to do that you can see there's no  reset service for this type a state container   so let's get that registered in a program.cs  file so we go to solution and I'll run the Cs   file we have to register our state container  in here so in here we can decide we have this   interface already so we can decide to paste this  now you can see from here we are registering a   state container and also we are adding same  facing core Blazer that is because that is   what we need to do to restart the service for  simulation so let's do that before we we won't   write any or before we run to any um error  again let's see if they send let's see again all right so I believe we are almost there we   still have one more yet to  configure and that is our our route so localhost.7211 by here seven  two nine eight so let's check and where   is that issue happening we can check our  index so let's see that's a booklet.razer   we specify a static URL and we we add the  Base address as 7211 let's say from our base   book list now down here we have a URL and  maybe we made it all right so here seven two seven two what is the router ls67298 seven two nine eight because that's  the base URL that we are specifying   here and now we can now use just to  call our API now I believe this is   solved up what the problems are  solved now let's relate and see fantastic so we have the page run at the end run  a long run now you can see from here we are seeing   the default one we want to change this okay you  want to change this template this view now you   can do that to let's go to this route main layout  now you know when you try to add this I installed   or do you have to even install this when you go  to WWE for that CSS because we have a bootstrap   maybe if some of your features are not working  well then maybe you can install a new bootstrap   okay to that you can just right click on this  then go to add client like Side Library and I   you pass in bootstrap so you type in bootstrap  and I download it install it over here that'll   be all now let's go to this main layout can  be found in the shared folder main layout   now with this layout you want to replace it  with a new one so I'm going to clear all this so that's what I want to maintain simple  one okay we have a header component   and that is a component that we created so  we can just call for this this using you   can just grab this we go to our import  and now we paste this broken over there   this header pages so we now go to our main  layout and this header issue might be solved   so you have the page title we have a page Main and  we are passing our body and a header on top okay   let's save this and let's refresh the application  and let's see it's going to change our layout   that's a default layout on the page loads remember  that we've set the book list as a home page   let's now the page loads we must see  that with the beautiful header on top so it is not loading and we are almost there all right so we have this net code boot database  Java refresh and add book but we're not having our   app bar let's check it up uh we have to what  we need to do so we have a header over here   and there's a header the header  can be found in the pages   header that's razor and there's a  header so we are using the SF Amber   right oh I remember so we have to go in there and  now add let's see so it's an Explorer now go to   pages and now with this page is we have to add the  last one I will look at the last one okay trust   me that's the last one go to this host.cshml  we have to add this information CSS and also   the JavaScript libraries links over here so let's  install let's let's put it here this coming from   the teams package that we installed teams okay and  now from here we are using the bootstrap 5 dark   so we are using the dark you can decide to take  off this dark I'm gonna have the light version so   let's say if I take this I'm gonna have a light  dress now let's add this the JavaScript too   so put this down here save that and now we are  good to go so let's refresh this now we're going   for a theme of light we can maintain the dark when  you're done with this but here we're going to have   a light version and the dark one is where you  have the dash duck remember let's run this again so at the long run you have this over  here now this what you see here it is   normal because we have no migration license  and you can just doing that for here okay   but I know I have one license so I have  my personal one so I'm going to paste it   so I can just get this cleared off okay  but if you want to do that click on claim   your free account and then go in there  and unclaim your free account as well so I've added the license and that that's  why I could see that warning is off   check the description I have a video on how  to claim Freelancers okay if you love to use   increasing components in your designs or in  your application check the video go through   it and it tells you we're going to show it step  by step of doing that all right so see we have   this loading icon here because uh data grade  or a grid here it is now remember that you're   using the light version so that's what you see  this now if I click on ADD book let's see so   add book I have to navigate to a place where  I can add a book that's the ad book component all right so let's try to see the data first so  let's go to our database and add maybe a single   data record so a server is probably on I go to  the book tables and right click and go to view   data and now in here we want to add just one  record so the time is going to be a book title   book title and book description then I'm gonna have book image oh so it is supposed to be the next one you can  just cut this and now tap analysis here book image yes yeah so we have this let's save that let's  come to our page and let's try to refresh this   and I'll get the data from the database yeah  that is it now we have it we have the book ID   of two we have book image of um two here and  now if I click on refresh we see I'm getting   a new refresh here you can see that the view  here it is white because we are using a live   view I've shown you where to use a dark or  where to get it back you can now drag this   and I can just group The Columns so that's  if you want okay okay so you can add more   let's add one more so here the title and  let's go for let's choose an image here   and I'm going to choose this inheritance by  Raynard and the description here I have it   over here so I'm going to just grab so the by all  right so let's do this so I'm going to use this   one and let me paste the title here also let me  grab I have the image over here so the description   let's see if I have some tests for description  maybe this will be okay so I'm going to grab this   and now let's paste it here now let's use the  image so I'm going to choose from books and   that is this one so I can choose this image and  now this image as you converted to basically four   string and I'll show the output here at least  you're going to see something you can decide   to increase the height of this to format it the  way that you want it okay that's for UI design I   leave it up to you click on Save and I could say  receive so uh process successfully it completed   if I click on close it has refresh like because  I have the image over here I have these buttons   as well I can just click on refresh to refresh  the database and then give me the current one I   can just delete the first one so if I click on  I just want to do this yes of course it is off   the completed now if I click on this you're  navigating to the page and that's because I have   the same content here I can decide to update it  so let's see updated let's add description updated maybe you can change the image here let's  use another book image I am Mahala so let's   choose this and that's going to be the  image for this lady let's click on Save   and now let's switch so this image here has  a problem all right so we can just close that   let's see so we can also handle description we  can handle exceptions over here too so let's see   if let's say every state and we're going to use  a different image now try to save this and you   see it is not completed so all the code that we  see the image has now saved now all our code we   did not add we did not handle any error so we  can handle errors by using try and catch block   I'll leave that one to you so when you go to our  source code here uh services and the code under   each of the components you can see there is no try  cut error so when there's error it's going to pop   up it's going to block the whole content we don't  do that so I make sure you cover it with what the   try catch block all right so I believe now we've  able to achieve what we want to get you've seen   how to create a database that is a book database  whereby user enters the book and also we study   book info and also add the image as well that is  it for this video thank you so much for watching   but if you want me to continue this mini project  then please check downstairs give me thumbs up if   you have any issue too put out the comment section  over there and we're going to attend to you also   check our playlist we have a lot of lessons for  you over there and you're going to enjoy watching   these lessons and videos thank you so much for  watching maybe if we can decide or you can just   tell us the mess that we should do and we consider  that as well thank you take care of yourself

Channel: Netcode-Hub

Views: 1,318

Keywords: asp.net core, controller, service, web api, EFCore 7, migration, authentication, client-side, jwt, token, assign-role, bearer token, api endpoint, Http Request, Authenticated, Secure API Controller, Authentication, blazor server, blazor web assembly, Blazor Book Management System using SQL Server & Syncfusion Components., blazor, Blazor, .net blazor, book management system, projects, blazor projects, web assembly, blazor server projects, .Net Blazor

Id: wgjGzm7Xs7M

Length: 80min 7sec (4807 seconds)

Published: Wed Aug 30 2023