.NET 7 💥 - Blazor CRUD with Web API

foreign thank you for watching this video I am Muhammad and today we're going to be discussing a full life cycle of our application so we're going to be discussing a front end as well as the back end and for the front end we're going to be utilizing Blazer so we're going to be creating a Blazer wasn't application where we're going to be implementing a cloud operation as well we're going to be creating a web API which is going to be serving that Blazer application as well on top of all of that we're going to be seeing how we can integrate our API with postgres so in this video we're going to be creating a front-end app which is going to be the Blazer application a backend which is going to be our API as well as we're going to be connecting it to a postgres application if you like this video please like share and subscribe it will really help the channel as well if you'd like to support me please consider supporting me on patreon or buying me a coffee now grab your cup of coffee and let's get started so before we get started let's discuss what the Blazer is and we can think about it as a front-end solution so similarly to what we have as react as angular as a view those softwares are basically those Frameworks rely happening on javascripts on the other hand Blazer is a front-end solution but we can actually utilize c-sharp in order for us to actually write our front-end stuff so for example if you want to connect to an API if you want to do some any kind of logic we can utilize actually the c-sharp instead of actually utilizing JavaScript so Blazer is the basically a solution from Microsoft in order for us to create a front-end application utilizing c-sharp and Laser is very powerful it got introduced with not 5 and basically at Captain getting more and more and more feature similar specifically within the latest release of the note 7. if you need much more information about the Blazer please let me know and I'll create a much more in-depth video about it but please put it in the comments down below and now that we have covered a bit of the basics of what Blazer is now let's get started and we can actually see it from there how we can actually utilize it and how we can actually build our front-end application so let's get started so the first thing that we need to do is we need to make sure that our poster has is installed I have already installed it but I'm gonna take you to the installation process if you're utilizing uh Mac so basically we're going to be utilizing home blue to install it so inside our terminal all we need to do is just type a brew install postgres and basically here I'll be able to actually install it you can see that the selling method is installed and then basically in order for me to run the service I need to put the Brew services start SQL it's going to tell me that it's already started and if I need to restart it I need to restart it but in general that it's all running as it should be but once you do install the positive class make sure that it's actually starting sometimes you need to install it manually and sometimes you need to import your password in order for it to be basically run whenever your computer starts but that's fine so once we have done all of that now we need to create our database and we're going to be utilizing the postgres command line interface the CLI in order for us to do that so inside our terminal here all we need to do is put psql postgres and now you can see here that we want from my normal terminal into the postgres terminal and basically because we went into the postgres terminal here we are able to directly communicate with our database server so I'm gonna say here is uh create database and I'm gonna call this sample Blazer DB one anything that I want so I put create a mistyped create so let me fix that and now here we can see that I got my database created the next step is I just need to Grant it to one of the users that I have so I'm just gonna Grant connect on database it's kind of called sample Blazer DB1 and I need to specify to its user uh I want to give this access to it's going to be two and I have my users called Muhammad that's it so now we can see that I got the grant command which makes it perfect for me and then once I have done that all I need to do is just exit perfect so that's all the setup that I need to do through my SQL so all I did here is basically just make sure that my SQL Server is installed successfully MySQL sorry postcard server is installed successfully and then I basically was able to create a database and once I created the database I granted access to the user in order for me to be to be able to manage it so the next step is I need to install a couple of tools for The Entity framework and then we're going to be creating our application so inside my terminal here what I'm gonna put is dot nut tool install global .net EF and this will basically allow me to install the nut tool The Entity framework tool for.net inside my machine I have already installed it so that's why I'm seeing this error but if I need to update it so all I need to do is just change the install here to update and we can see I have the latest version which is exactly what I want so now that we have done that the next step is for me I need to create my application and that's going to be very simple so in order for me to create my application first I want to navigate to where my uh where I want to create it so I'm going to go to the desktop work learning Blazer I'm gonna create a new folder I'm gonna call it uh let's say Blazer up to V2 for example I'm gonna go to this laser and then here what I'm going to be doing I'm going to create my application I'm just gonna put dot nut and in order for me to create my application I'm gonna be utilizing my.net SDK new keyword and here I'm gonna pass some parameters which can allow me to basically create my client side as well as my server side for my server but for my blazer application as well as a shared Library So within a single command I'm able to create the client side which is going to be my blazer application I'm going to be creating my server side which is going to be the apis that I'm going to be communicating with my blazer application as well as the shared Library which is going to be helping me to share some of the classes between those two projects so it's gonna be quite simple I'm gonna put this top knot new Blazer wasm and just a point here that I would like to emphasize here is we're not utilizing Blazer server we're utilizing Blazer wasn't which is going to be based on the web assembly so it's not so the actual Blazer file is gonna be basically living inside our browser we're not going to be utilizing the version uh this kind of exist on our server so that's something really important for us to understand so there's two different types of the Blazer we have laser server and we have Laser Web assembly and for this video we're going to be utilizing the Blazer webassembly version where basically we're kind of creating like a single page application we can think about it like that like an angular app which can deliver inside our browser so once I have specified what type of application I want to create the next type I want to give it the name and of course it's going to be a Formula One application and then I'm gonna give it as hosted posted mean that I'm gonna be able to create my API as well as my client-side simultaneously so let's create this perfect now we can see it's created successfully and all I'm gonna do is navigate to this application and open it up in the visual studio code yes I do trust this let's see how this looks okay great so the first thing of course I want to do is I'm going to open my terminal and let's install the extension and I want this build assets missing Formula One don't ask again okay let's uninstall this and perfect so now when this is installed All I'm gonna be doing is I'm going to go to my server application so CD server and I'm just going to type.net build actually let's do it in the in the root directory so but not build and we can see it's building here and basically it's built succeeded now if I do not run it's not so I need to go to my server.netron and around here will basically allow me to have both of my client side and my server side running so I'm gonna take the sport and I'm just going to open up in a browser so inside my browser I'm just gonna put it here and we can see that I have a default Blazer application which basically it was created all for something for me for example I did not do anything so this is all boilerplate code that whenever I create a new blazer application it creates for me we can see that contain all of the right information so basically it contains a menu contain a nice title that contains a nice interface so it's a good boilerplate code where we can actually start and build on top and all the velocity at our application and now that I can see that my application is running if I could flash data we can see that's connecting to my API and getting basically some kind of data from there we have a counter which means that there's some kind of logic running here and lastly our home page which is basically a full summary that will come to our application so that's a very good intro so now let's go back to visual studio code and let's stop this application so first thing we need to do right now is we need to add some packages in order for us to allow our API to communicate with our uh in order for us to allow our PI to actually communicate with our postgres database so when it installs The Entity framework package the postgres package and then we're going to be configuring them so it's going to be.net not uh package NP gsql entity framework core Dot postgres ql and PG SQL yeah that should be fine okay great now I need to install the Entity framework one so.net add how does it look there let's make this a bit bigger clear let's make this a bit higher okay again so I don't not add package Microsoft dot entity framework core dot design perfect and lastly I'm gonna put dotnet and package Microsoft dot entity framework code tools uh I'll just show it again once it's installed so I'm just gonna clear it up so you can see the code for it so it's going to be like this so it's going to be.not.ad. Microsoft ad package Microsoft anti-frame recorded tools okay perfect so once we have installed all of this I'm gonna go to my server application and I'm gonna see here that all of my all of my web assemblies or basically all of my packages has been installed successfully my postgres my tools and my designs okay perfect so once we have done that again I'm gonna do the famous.net build to make sure everything is running as it should be perfect and now what I want to do is I want to just update my connection string here so I'm able to connect to my postgres database and I'm just going to put connection strings and I'm gonna call this sample DB connection and I'm just gonna paste my conduction string actually let's put user ID equal Muhammad and my password Here is gonna be one two three four five six seven eight and then I'm gonna specify the server which is gonna be localhost and then I'm gonna smooth the space and then I'm just gonna ask me about the port so to specify the port run the port for post class is four five three two and then I'm gonna specify the database that I created let's go back to our terminal and we can see here that let's go up up it's called sample Placer DB1 so let's take this one here and then finally I'm gonna put my Integrated Security Integrated Security equal true and lastly I'm gonna put the polling equal through that's a simple connection string that I need for my application perfect so once I have done all of that and my conduction string is there again do not build everything is running great so the next step is inside my server here I'm gonna be creating a new folder and right now what I'm gonna be doing is I'm gonna be creating my application DB context and this is going to be responsible for creating my database as well as making sure that all of my configuration for my tables is actually reflected inside my database so for this I'm just going to call it data and here I'm just gonna be creating a new file and this file I'm gonna call it API DB context.cs and first of all I'm going to specify the namespace and it's going to be Formula One Dot server dot data and then I'm gonna put public class API DB contacts and head from the DB context class which is going to be provided for us by the packages that we have installed and here I'm just gonna fix those references perfect and here all I'm gonna be doing is just create a Constructor and this Constructor is going to take the options which is going to be DB context options and here we need to specify what are they for the API DB contacts and then we're going to say it's the options and then we need to inject it into the base controller and that's it so of course we're going to add more stuff to it but this is going to be should be enough for now in order for us to be able to continue working on this so the next step is let us go to our program.cs here and we need to inject our API DB contacts into the startup of our application so the reason we do that is in order for our application to recognize that there's an API DB context available as well it will be able to inject this into our di container so we are able to actually inject our API DB contacts into any controller that we want and that's going to be a crucial part here so we're going to be driving dependency injection in order for us to have our API DB contacts available inside our controllers so back here all we're going to say is builder.services.ad Entity Framework npsql I'm gonna say here dot add DB context and then I'm gonna what's gonna be the API DB context I'm done we need to specify the options I'm gonna put options let's put this on a new line so it will look a bit better yeah options and let's fix those references while we're at it okay and I'm gonna put dot use and P G SQL let's fix this reference as well and now all we need to do is just specify the conduction string and for this let's put that in the different line so here I'm just gonna create a new variable called connection equal it's going to be to Builder dot configuration dot connection string and here I'm just gonna pass the name of my conduction string which is going to be sample DB connection okay perfect and then here I'm just gonna pass stuck on an action string again my favorite command dot not build perfect build succeeded so now that we have created our API DB context we have injected into our program.cs and basically we have our connection string ready the next step for us is we need to start creating our models and this model is going to be for a Formula One driver and basically it's going to be a fairly simple model I'm going to contain the name racing number as well as the theme and that's it so inside my server folder I'm going to be getting a new folder and this folder here I'm going to be calling it models and inside my models fold I'm going to get a new file I'm gonna call it driver.cs actually I'm not going to create it here I'm gonna be created inside my shared folder because I want to be able to access through my client one so inside my shared folder I'm gonna be creating my models and here I'm gonna be able to create my uh new driver so I'm gonna call the driver .cs and then of course gonna be the namespace name space it's gonna be Formula One Dot shared dot models public class driver and here it's going to be pretty straightforward so first of all it's going to be the ID it's going to be off and then it's going to be the string which is going to be the name a sequel string dot empty and then we're gonna put prop again string racing number equal again string dot empty and lastly we're gonna put the team pretty straightforward so now that we have done that also equal string.nt so now that we have created our model and uh uh we basically it's ready for us what we're going to be doing is we need to go to our API DB context and just make sure that our API the contacts knows about it and for that all we're going to be doing is I'm gonna put public DB set driver I'm gonna call it drivers and then bigger than a set so let's fix this here perfect so now my API DB context knows that there's a driver again .net build perfect so what have we done here so first of all what we've done is we have create our model and then we have injected into our API DB context but with all of that our Dev database we still don't know that there is going to be a driver's table inside of it so the way that we're going to be able to do that is we need to create a migration file and then we need to implement that migration file to the database and edit framework makes it really easy for us to do that which basically all we need to do is just code and basically execute two commands which is going to be facilitated by the EF tool that we have installed and then it's gonna do all of the heavy lifting for us so inside my server All I'm gonna put here is.net EF migrations I'm just going to call it initial underscore migration perfect and then all I'm gonna put is.net EF database update perfect you can see it completed successfully and now if I go to my uh DB browser what I'm gonna be doing right now it just I know it could be a bit small to read but let's try it out so postgracia the database is not going to be postgres it's gonna be some pretty B Blazer one so let's put that here oops all of that okay and the password is gonna be one two three four five six seven eight test connection foreign okay perfect and now if I click on finish and I open this up database sample DB schemas public tables and I can see driver I'm not able to zoom in so I'm gonna just kind of take a screenshot so I can zoom in on the screenshot so you can see it and if you take a look at this okay as you can see here that my driver's table has been created and you can see that this is under my sample dblazer 1db and we have an entity my entity migration table history which is exactly what we need so now that our database has been created successfully and our drivers table has been created the next step is we're going to be creating our controller because basically our controller is gonna be responsible for sending all of the information from our database to our Blazer application so it will be able to load so basically what we're going to be able need to send this all of the drivers with this on the specific driver we need to basically allow to add a driver update a driver as well as a data driver so all of that will be facilitated by the controller that we're going to be creating so let's do it right now so I don't need this anymore so let's delete it need this so inside my controllers folder I'm going to be creating a new file and this file all I'm going to be calling it is a let's call it the drivers controller.cs pretty straightforward so first of all as always the namespace and it's gonna be Formula One Dot server dot controllers and then I'm gonna put public class drivers controller and had it from the controller base the reason I have it from the controller base and not from the controller because basically here I don't need to utilize any views I'm utilizing an API and basically a controller base is a much more a light version of the controller class basically it's the parent of the controller class so it's much more better to utilize the controller base and here you see it's not happy with it because we need to add the references so let's add it right now okay great so now that we have added the references the first thing is we need to add some parameters we're gonna say this is an API controller and no one to specify the route for it we're gonna put forward slash API forward slash controller so now that we have done all of that and we are able to uh basically build the applications just build it so we do not build perfect now let us inject our API DB contacts to it so it's going to be private I read only API DB contacts underscore context and we're gonna put the Constructor and it's going to take API DB contacts as context and then all we need to is just inject it and let's fix this here okay great so now we have done this again the same thing as always.net build perfect so the first uh method or basically the first endpoint that I'm going to be creating is going to be the got all drivers and it's going to be a simple cut statement where it's going to get all of the driver that exists inside my database pretty straightforward so it's going to be HTTP get and it's going to be public async task action result as a list off driver and it's gonna get drivers and basically I'm gonna return here actually let's put VAR s equal awaits underscore context dot drivers dot to list async uh well return okay with drivers okay let's see why it's not happy so first let's fix this references task oh I've got one of these okay perfect now let's fix this and let's fix this perfect it's now basically I'm able to get all of my drivers the next one is I'm gonna need to get a specific driver so in case I want to edit it I want to select a single driver and based on that I'm gonna get that only single driver and this is going to be for added purposes or for deleting purposes so let's try this out here I'm gonna put HTTP get again but I need to pass my ID specify the ID for that driver again it's going to be public async task action results of driver and then we're gonna call it get driver details it's going to be an end of an ID and it's kind of evil driver equal await underscore context dot drivers DOT first or default async and we're just gonna make sure that match the ID equal ID and then all I'm gonna be doing right now here is if driver equal equal null I'm gonna return not found else I'm gonna return okay with the driver quite simple again favorite command dot nut build building successfully perfect so now let's finish the all of the controllers ask just to create a post the update and the delete since we are already doing the control it makes sense it's just complete at all so we're gonna put now the post HTTP post public async tusk it's gonna return um let's say just return I action result we're not returning anything we're just gonna return a 200 actually plus return on created let's interaction result for now so we're gonna put create driver and we're gonna take driver as driver and this in this case scenario of course we need to have a dto but in order for us to be able to save some time we're not just gonna utilize the same object but of course in real life scenario we need to have a dto rather than the actual object inside the database just an avoid eye so here what we're going to be doing is going to put underscore context dot drivers dot add I'm going to go to driver and then I'm gonna put a weight underscore contacts dot save changes async because basically first we add it into our memory of the application then we actually communicated with the database and uh all we're going to be doing here is a return just return the driver okay driver so here we can just change this to created at action and here we need to update this so it will be first let's say name of uh what did we call it to to get drivers detail then we need to pass the object which is going to be driver and lastly it's going to be the ID for it we're going to put driver but ID I think that's a better implementation let's do that not build just to make sure that's actually building as it should be perfect next we need to basically now do the update and spend a big pretty straightforward so for that we're gonna put HTTP put and of course we're going to pass the ID we're gonna put public async task uh let's put the update as I actually resolved because we know it are not found and what I'm going to say here is update driver and we're gonna pass the driver driver and we're going to pass an end as an ID for that driver okay so first things first is we need to find this driver so of our driver exists equal await underscore contacts.driver DOT first or default async and we're gonna match it here on the ID equal equal ID and we're going to say if driver exists equal equal to none we're gonna be returning not found as simple as that else what we're gonna doing is we're going to update the driver exist value one by one so first a name equal driver.name then driver uh racing number equal driver.tracing number that's here should be The Driver exists and lastly the team so driver exists dot dot theme equal driver dot team and finally we need to save these changes so await underscore contacts.save changes I think and we're gonna be returning no content which means that it has processed successfully okay great and the last uh action that we need to implement is going to be the HTTP delete so HTTP delete but again we need the ID public async task again we're gonna return an i action result because again it should be no content I'm gonna say delete driver we're gonna pass the end ID let's take the similar logic that we have implemented here let's close this first let's copy this logic so it doesn't exist it means not found and then when if when I remove it we're gonna put underscore context.drivers.remove and we're gonna remove that driver exist and I can wait to see if this changes oh wait context save changes async and return no content perfect that's exactly what we want so let's do a quick build now perfect and let's do a quick summary of a fair Dom so far so basically what we have done so far is pretty straightforward first of all what we did is we have configured our database and then we have added our installed packages between inside our application we add our connection string we have added our API DB context we have injected in this API DB contacts inside our program.cs so it will be available for our di containers we added our models then we have updated our API DB contacts with the models once we have done that we have created our controller inside our controller what we did is we created Five actions which is going to be the get all get by ID update and delete and basically this is going to be everything that we need to do from the API side now what we're going to be doing is we're going to be focusing our attention to the client side which is going to be all Blazer application where we're going to be actually adding all of the Blazer components in order for us to be able to communicate with this API got all of the information that we need and execute actions directly from there so first things first let us open the client and here we can see let us first explain the main structure for our Blazer application so a Blazer application is going to contained similar to an over.net application a program.cs and this program.cs is going to be basically the main file that's going to be executing whenever our application starts so it's going to be basically responsible for bootstrapping the application making sure that all of the services that we need are available inside our the eye container it's going to be responsible for making sure that all of the Blazer components are available so on so forth this is going to be the main program.cs file or basically the main file that's going to be executing when the Blazer application is going to be running it's going to be similar to any of our the normal.net applications so basically all it's going to be doing is just making sure that all application is running as it should be and other than that inside my folder structure so instead of having controllers because this is a client-side application we don't have controllers we have pages and Pages here represents the different functionalities that we currently have so inside Pages here we can see that we have first let's run it and compare it so if I put dot not run and if I go back to my web browser and we can see here we have home counter and fetch data and if I take a look at my pages we have the index which represent our home fetch data and counter so we know that these basically Pages represent the different sections that we currently have so that's gonna be so if I need to add a new page it needs to go inside my pages folder as well similarly if I have a asp.net MVC application I have a shared folder where basically I have different shared resources and for example here I have the main layout where I can see that inside all of this where I can specify the menu so you can see here so here for example if you want to see how how this world works for example let me add a I don't know let's add an H1 here say Muhammad app and let me run this again and if I come back here and I refresh we should be able to see Muhammad up is now available on top so we can see here that this is gonna be the main application and this is the main layout page for us so let me remove this I don't need it and again for the main menu we can see we're utilizing a component so if we go to the main menu component we can see that here is the main three menus if it's going to be home counter and fetch data so what I'm gonna be doing right now I'm gonna create a new one it's just gonna be for the drivers and here eight stuff I'm just going to call it drivers we're gonna create the space right now it does not actually exist and here instead of fetch data I'm just going to call it drivers and yeah that should be it now if I stop this application and run it again if I go here I should be able to see that I have a new drivers perfect uh let's see if we can change this to people I think that's it if not it doesn't really matter just thought it will look nice yeah perfect so now these are the drivers so now what I'm gonna be doing is I need to create my first drivers and basically here we can think about the Razer page here uh it's gonna be a page where actually contain HTML code as well it's going to contain some C sharp code so it's going to be a fusion of these two pages together so we don't create a normal uh HTML page and you don't create ACS page to a c-short page what we do create here is something called a Razer page so for example in our case it's called drivers so we create a file called drivers.razer and this is where all of our Blazer applications they're gonna all of our Blazer file gonna exist so inside my pages I'm going to create a new file I'm gonna call the drivers dot razor and here very simply All I'm gonna have first of all I'm gonna make sure that this page is a allow navigation to it so just do whatever I had inside my menu so we can see here it's called drivers inside my driver my uh my page the declarative I basically specified that this page is called drivers so if anyone wants to navigate to it they will be able to if I don't put this right here I will not be able to navigate to this page and then all I'm going to be doing is I'm going to put the page title so I'm gonna put this as drivers and I'm gonna put the H1 I'm gonna say welcome to my to the drivers section and now let's see this in action so let me run and let's come back here and refresh and now if I click on drivers we can see here first of all that I got the welcome to drivers which means that this worked the navigation and you can see here that my title has been updated to drivers okay perfect so that's the first section so in order for me to make this more dynamic I need to pass some C sharp code and this c-sharp code is going to be either responsible for fetching data from my apis and basically if I need to do any validation on it I can do through my C sharp code so lucky for me Blazer allow me to add directly this shortcut inside my page or I can make it a separate file it's a completely personal preference I recommend to have it a separate file so we can have separation of concern so we can make sure that the Blazer file will only have the UI stuff and we can create a separate file with an extension of a C sharp file where it's actually gonna have all of the logic behind it you can have it all in single page Blazer allows it I'm just giving you like my own personal opinion here so if I want to have all inside all of a single page all I need to do is just put uh code and I can input my code here and it should work but I'm not going to be doing this here because I want to have the separation of concern so what I'm going to be doing here inside my pages I'm just going to create a new one called the drivers dot Cs and first of all of course the namespace is going to be Formula One the client dot pages and then I'm gonna put here public partial drivers and that's it public class sorry partially class drivers and now basically instead of having all of my code inside my Razer I can basically have it inside a different page again it will work all of it inside the same file but just for peace of mind I just wanted to have this separation so now that I have my page ready and I have my code placement ready so right now what I want to do is I want to create a service inside my blazer application so it will be able to communicate with my API in order for it to get all of the information that it needs and if I want to create a service here it would be a good idea for me to create in a way where I can actually inject it into the Blazer page and basically from there be able to make it in a way which is actually reusable across different pages so what I'm going to be doing right now I'm going to be creating a service which is going to call the driver service which can be responsible for communicating with the API and executing all of the five actions that I have against my API they get all guttered by I get by ID update delete and create and once we have all of that I'll be able to use it inside my blazer page so what I'm gonna be doing here inside my clients I'm gonna get a new I'm gonna create a new folder and I'm gonna call IT services new folder services and inside the services I'm gonna have two classes actually one interface and one class so here I'm gonna call it I driver service.cs and here again it's going to be namespace Formula One Dot client Dot services it's going to be public interface idriver service and let me create the implementation for it again the new file driverservice.cs it's gonna be again the namespace it's gonna be driver oops Formula One dot client dot services public class driver service and it's going to inherit from the I driver surface and that's it okay perfect so now that I have my interface as well as my implementation it's time for me to actually implement this so pretty straightforward inside my interface I need to add five actions so the first one is going to be task I enumerable driver and it's gonna be all as well let's make this nullable in case there's any problems so let us fix this reference done it's going to be task driver again another build got driver and it's going to be in tidy then it's gonna be task driver I'm gonna say uh the driver which is gonna pass here driver and then we're gonna put task Boolean update it's going to take a driver and task Boolean delete driver driver okay so now that we have done that now let's stop this and just do a quick.net build it's gonna fail actually let's before we do that let us do the implementation here because I don't want it to fail because here we can see that my interface is not happy that would not do any implementation so just let me fix this here and start implementing this interface so first of all because I'm going to be doing an HTTP call and basically because I need to call my API what I need to do is I need to instruct an HTTP service and lucky for me uh not to provide me with this service that I can actually utilize so that's the first thing and then basically what I need to do is Implement these five different methods that I have here so first of all I'm gonna put private read only http client underscore HTTP client the first that's the first thing now I need to do is basically my Constructor and it's going to be http client oops client we're just gonna call it HTTP client and here what I'm gonna put is HTTP client equal HTTP client perfect so now that I have my the way that I'm going to be able to communicate with my API set which is basically here it's gonna be my HTTP client all I need to do right now is just start implementing this so we're gonna start by adding a driver so let me remove this and I'm gonna make this async the first thing I want to do is I'm going to make it dry on a catch ex I'm gonna do this for all so let me just copy paste them okay let me just put console Dot rightline I'm gonna put two error and let us use string interpolation ex Dot message yep and then I'm gonna return null again there is way better uh error handling but again just for simplicity's sake I'm keeping it like this actually instead of returning round that's just true EX so I'll just let me to copy this uh then do it here for all of these okay perfect so now let's start implementing them one by one so for the get all all I need to do is first of all specify the Json items that I want to get so I'm going to put for item Json equal string actually it's going to be new string content it's going to be Json serializer serializer Dot serialize Syria lies okay and actually this is not here see already putting in the wrong location so we need to be working on the adding of the driver yeah so let's fix this so basically what we're doing here is we're serializing our driver uh we're serializing our driver in order for us to convert it to adjacent files our API will be able to accept it in order for me to do that I need to pass here the driver and then I need to specify the type of file of uh encoding that I want to utilize so I'm just going to say encoding Dot dot UTF let's fix this reference Beauty f8 and then lastly I want to say the media type is going to be application Json because this is what we're going to be passing back okay perfect so now that we have done this the next step is I want to get send the request as simple as that so what response equal await underscore HTTP client dot post async and here what I'm going to be doing is I need to specify the path for it it's going to be API forward slash drivers and I'm gonna pass the object which is going to be item.json and that's it and now here I'm gonna say if response Dot is successful so it means that it passed successfully basically what I'm going to be doing is I'm gonna be uh serializing the response back so I'm gonna put file response body equal await response dot content dot read a string I think and here that's the only Department they're going to be doing this and I'm gonna put return I'll wait now we need to serialize it Json serializer so this realize and it's gonna be the driver and we're gonna pass the response body and here we're gonna see if we're gonna any serialization options and what we can see equal new Jason serialization options and we can specify here that we want to property name case Okay equal true why is this not happy okay let me see here just call this VAR driver equal ity added driver return other driver so the main issue here is this should be read a stream not a string okay perfect so that finishes up our first uh item inside our service we're still not happy oh okay so here in case it's how we need to return knob okay great so now that you have created our first implemented our first action or basically our first method the next stop is we're gonna be doing it for the all so it's going to be a much more simpler implementation so all we need to do here is going to be put for API response equal await underscore HTTP client Dot get stream async and here I'm gonna pass what the endpoint is going to be API forward slash drivers and that's it and now all we need to do is just analyze this response so we can see if API response dot uh actually just use it the other way we're gonna put I enumerable driver equal drivers equal API actually await Json serializer Dot this serialize async and I'm gonna get here a list actually of I innumerable of driver and then here all I need to do is just pass so maybe I can take the same thing as I done here and implement it here and here it should be the API response let's make this also nullable actually let's make it as avoid it's even better and lastly all I need to do is just return the drivers perfect so now that we have implemented the all the next one is going to be the delete the delete also going to be pretty straightforward so instead of the delete maybe instead of sending all of the driver less updated so we can send only the ID so let's update the service here so for the delete we're going to be sending an end ID and then here so now let's implement the delete functionality it's going to be pretty straightforward I'm gonna put VAR response equal await underscore HTTP client dot delete async and here we need to specify the path which is also let's use string concatenation you can put API forward slash drivers and then we're gonna pass the ID and here is going to be ID perfect and then we're gonna see say here VAR response Dot is successful that's it that's all we need and we need to insert the voice where you bring into bank return perfect now let's do the get driver so this is gonna be also quite straightforward so first of all for API response equal oh wait underscore HTTP client Dot cut stream async and then here we need to specify what are we sending so while I was editing this video before I uploaded I discovered that the second part of that video did not work correctly for some reason the screen recorder did not capture everything as it should so what it did is basically you can hear my voice but the screen was not recording perfectly so from now on it's going to be the re-recording of that second part of the video so if you see a discrepancy that's why so please enjoy so now let's continue getting our driver so it's gonna be VOD response equal await underscore HTTP client dot cutstream async we're gonna pass here our URL is going to be forward slash API drivers forward slash the driver the driver ID and then now we need to actually serialize our response so we're gonna put water driver equal await Json serializer but this realize I think it's gonna be driver and then wait to make sure that we're passing the right response we're gonna put the new Json serializer option and here we're gonna put the property name case and sensitive equal true perfect so once we have done that oops we forgot the semicolon here so once we have done that we need to basically just return the driver great so that's for the gut driver our last uh method that we need to implement is the updates it's gonna also pretty straightforward so first of all let us just take the same try catch and let's basically update this from the inside okay so first of all we need to serialize our driver if we go back to the post we can just take whatever it is where is it this is it so let's take all of this and let's just put it here so we don't really need any of this or we're going to be returning is response dot is successful so that's going to be it and then here what we're going to be doing also we need to make it as a put rather than a post and we need to pass the ID of the driver as well at the end so here we need to make sure it's going to be driver dot ID I do need to make sure that we're enabling sync interpolation here so if we go back to our terminal now and all I'm going to be doing is not build oops I need to go to the server not build perfect so now that we have completed the implementing our services it's time for us to actually inject it in our program.cs and once we inject in our program.cs it will be actually available for us to utilize inside the application because basically it will be available to be utilized from within the DI container and that's why we need to interact it inside our program about CS so let's add it here it's going to be Builder dot services dot add sculpt and it's going to be idriver service and Driver service perfect and now if we do another.net build perfect we can see the application is building successfully let's see I will succeed it great so the next step for us is we're going to go back to our drivers here and what we want to do is we want to basically have a way where we can actually inject the service that we just created but because we here we are utilizing Razer Blazer as well and we don't have the normal life cycle of a normal asp.net application the way we actually inject a service to our Razer page is by utilizing an attribute called inject and this basically will work as if it was a constructed injection for our dependency instruction so once we add that the attribute inject a Blazer will know that this needs to be injected while the page is actually loading so it will inject it inside the Constructor and would allow us to utilize it so that's something to keep in mind whenever we want to inject any Services inside our Blazer pages is to actually utilize the inject attribute so here we're gonna put inject and then we're gonna make it a private iDrive service ID driver service and I call the driver service get and set perfect and now what we also want to do is because we're basically we're going to be getting a list of drivers that we want to pass into the Razer page we want to have some kind of a list here where we can actually utilize we can think about it as if it's like a view model or like a binding model that we can actually share between the c-sharp code as well as our razor code so for that we're gonna put a public are innumerable driver underscore drivers equal actually we need to put the gutter in the setter and then he will new list of driver perfect so now that we have provided this test of the drivers the next step is when you tap in into the life cycle of our Blazer page so on the life cycle here we want to make sure that we're never actually we are loading our page what do we need to do once we are loading that page we need to load our drivers so basically whenever the page is loading we need to utilize a driver service it will connect our API get the information that we want and once we get it back we need to load it back into the view and all of that needs to happen whenever the page is loading and for us to do that there is a built-in method that we can actually override in order for us to accomplish this so let's see how that's done so first things first it's going to be protected async override override and then here we need to specify what's going to return task and I'm going to specify the name of that method itself so it's going to be on initialized initialized async and here all we'd have to do is just first of all good for gonna call it API drivers equal driver service await it's going to be driverservice dot add the driver actually that all not all okay and what we're going to be doing here if API drivers Dot money it means that it contains and API drivers not equipped on all we're gonna just make underscore drivers equal API drivers perfect let's switch these up so first we make sure we're starting not null before we check the honey perfect so now let's just do a nut build perfect we can see it's building successfully and you can see that we got the build succeeded great so now that we have done that let's go focus on the front end of this so what we're going to be doing here first is we're navigating a table I'm gonna give it a class table and I'm gonna put here my data and then I'm gonna put my TR and then the H and then we're gonna be first the ID so let's just copy this so we're gonna have first the driver name the racing number and then we're gonna have here the team and lastly we're gonna have a manage button in case we want to edit the driver perfect so now we have ID name racing number team and the manage so now after the the head we're gonna put the tea body and here I'm gonna put a TR actually before we implement this let's do a for each here so we're going to put that for each and here we're just gonna go through the drivers because basically here it's we're going to be looping through the driver's list and then inside of the drive for each I'm gonna put my TR and I'm just gonna put here the first TD which is going to be actually let's make it all on a single line at item.id that's going to be the first thing let's make it two three four so then we're gonna have the name then we're gonna have the racing number then we're gonna have the team and lastly we're gonna have the manage we're just gonna leave it empty for now okay perfect let's stop this and let's run it and let's go back to my web browser so man and as you can see here if I already added some information inside my database and we can see here that's actually loading it correctly so we can see I have two drivers which are available for me to utilize directly I can see their IDs their name the racing number their team but I don't have the manage yet okay perfect this means that the first part of our application is actually working I'm able to actually connect to my database get the information that I want to process it inside my service I'm done sending it back to the view and all the fluid is straight on the table which is the exact behavior that we want so now that we have covered this the next step is we're gonna be seeing the method of how we can actually create a new driver and or we can actually edit the driver's information so that's going to be the main focus for the next Port so right now what we're going to be doing is we're going to be creating an actual link where we can actually go to a new page so first of all we're going to be creating that page what's going to be calling drivers details and then we're going to be creating a link which we can actually allow us to go from the driver space to that page so inside Pages here I'm just going to create a new file I'm going to call it drivers details dot tracer and then I'm going to create another page new file and this can also be called driver details dots yes so for this yes here we have to provide also the namespace something that we have done before it's going to be formula dot client dot pages and then I'm going to put public um class part of the class excuse me and then here I have to put the name of it so it's going to be driver details and that should be it and here what we're going to be doing okay why is it that's why it's not happy so it's drivers oh here is called drivers detail let's fix this let's make it a driver detail okay okay that's fine so here what all I'm gonna be doing is I'm gonna take whatever I have here so the page initiatives I'm going to change this here I'm gonna make the driver details and this is basically if I want to create a new driver but if I already have a driver I need to pass the ID to it so I'm going to put forward slash ID perfect and then here all I'm gonna say for now just an H1 uh manage driver that should be it and all I'm going to be adding here I see driver's detail driver details that should be it starts double check it is the right one so let's do rename yeah it's the same thing here as well okay why is this is a bit annoyed uh on initialize anything yeah that should be working fine this is not built it's building just Visual Studio code is acting a bit weird as always so right now all I'm gonna be doing here is I'm just gonna add a new href that was going to allow me to navigate from the list of all drivers to create a new drivers and for me to do that I'm going to be creating an a it's going to be href I'm gonna give it a class BTN BTN Dash success and then I'm gonna say add new driver and here in order for it to work all I need to do is just pass the right parameter where I'm allowed to actually navigate between Razer pages and it's going to be first of all the AD Sign and then here I'm gonna put the parentheses and then the sling interpolation and then here I need to define the page name which is going to be drivers driver details so now let's stop this and let's run this again so that not build and then dot not run and let's go back to my web browser and here all I'm going to do is refresh and we can see I have a new button called add driver and if I click on this and it works I should see an empty page with a title says error let's see what's the error inspect let's see what the error that we got okay that's fine we did not Define the ID yet so let's define that ID so let's go back here inside our laser page and all I'm gonna say right now is parameter because that's gonna be what we're gonna be passing and then I'm gonna Define a public string ID get an asset and that's it now let's stop this on the right again oh I have a typo parameter it should be fine yes that's exactly it and right now if I run this if I go back to my web browser and I'll go back to drivers and I click on add a new driver still okay let me just clean run and now it works so here we can see all the drivers and add the new driver we can see manage driver perfect so now that our linking is working and we can see that we have a new page in order for us to actually create a new driver we're gonna start populating this creating the form that we need and basically making sure that all of our services are going to be wired up correctly we're going to be utilizing here also something called the navigation service in order for us to be to move back from this page into the main page where we can see all of the drivers we're going to be injecting our driver service so we actually can actually connect our API update the driver or add a new driver we're going to be also here implementing different types to handle error handling so in case the form that we are submitting there was any issues with submitting it we're going to execute that else we're gonna be basically just submitting the form correctly and returning back to the list of drivers so let's continue on this so let's go back to visual studio code and here the first thing that we want to do is we want to basically inject our services so we're gonna put private driver I driver service I'm gonna call it driver service is going to be a get an asset and then let's fix this reference and then we're gonna go back I'm gonna put inject this is going to be another service that we're going to be utilizing which is going to be the navigation navigation manager and I'm going to just call it navigation manager very simple I'm also going to create a variable I'm just going to call this message so I'm going to put protected string message and this in case there's any problem I could just utilize this variable to push it back to the view so it's going to be string dot empty for now we don't have anything in it and yeah that should be it let's see okay so now uh what we're going to be also doing is we need to have a list of the uh sorry a variable for the driver because that's what we're going to be pushing so I'm gonna put this potato also here protected driver and I call it driver equal new driver and let's do here together on the setter okay and let's fix this perfect let's do that not build perfect so now that's running the next step for us is we can we need to actually add here our the the method that we're going to be basically loading whenever the page is loading so similarities is going to be initialized in async and this method here what we're going to be doing we're going to be checking if that request which is coming in if it's contain an ID it means that we're going to be updating the driver if it does not contain an ID it means that we're gonna be actually creating a driver and for this logic here we're gonna simply checking an if else's statement inside of that method so protected protected async override task on initialized async and here all we're going to be doing saying if string dot empty null or empty for the ID this mean here we're gonna be I think a new driver else is going to be updating a new driver okay perfect so once that's done let's see how we can continue with this so if you are updating a driver what we need to do is we're going to put four driver ID because we want to get the information from our API we're going to put convert dot 2 and 32 and here we're going to pass the ID and then basically from here we're going to put VAR API driver equal await driver service Dot get driver and we're going to test the driver ID and then we're gonna say here if API the driver not equal to null we're just gonna make sure that our what is it called our driver equal API driver okay so let's just use a quick build here but not build okay great so now that we have done this this is the main initiative step other than that let's go back here to our eraser details and I just want to do some nice management here so I'm going to put that if string dot empty or null for the ID I just wanna put the page title if it is null I'm gonna say add new driver and I want to put an H1 which says add new driver and then I'm gonna put else so for the H1 I'm just going to keep it as manage driver but for the page title I'm just going to also update it to manage driver okay let's see that in action so dot not run perfect now let's go back to my web browser and just refresh add a new driver perfect if I come here add the new driver okay great so that means that everything is running exactly as we want right now so now let's go back to our uh driver detail space which we already are in and let us updated let's get our form and let's create here the different uh buttons that we need the different fields that we need as well as the form which is going to be utilizing the Blazer edit for so let's get started so the first thing here I want to add is basically a div of glass equal row and here this is going to be belonged to bootstrap so that's fine and here what I'm going then I'm going to be creating the edit form and then basically inside the edit form there's going to be different parameters that I need to provide so the first one is going to be the model that I want to buy to it's going to be at driver and then I need to specify the actions so lucky for me when it comes to Blazer we have we can Implement what happens if a form is submitted successfully and what happens if the form submitted fails so we have two methods that we can actually Implement and we need to hook them up inside the edit form sections inside our attribute so that means whenever a method sorry a form submission fails we can go to that method in case it is succeeded we go to different methods so inside here we're all we're going to be putting is on valid submit we're going to create this method does not exist right now I'm going to put handle valid request and I'm gonna put another one on invalid submit I'm gonna put that handle failed request and then now let's create our forms it's going to be pretty straightforward div glass form Dash group and then here I'm gonna put my label class equal Dash md-3 I'm gonna call here the name of the driver and then I'm gonna put basically an input text as simple as that input text and here we're gonna have to bind it into the driver that we have of this pedant we shouldn't have here on equal sign okay so here we need to bind it to the driver it's pretty first of all let's give it a class and it's gonna be called Dash md-8 and it's gonna be for that's control and then let's give it directly The Binding it's going to be add bind value equal that means specified at driver.name and then what we're going to be doing we're just going to copy this for the rest so for racing number we're gonna put here the racing number and then for the team we're gonna put the team and then what I'm gonna be doing here as well I'm just gonna create a new VR and this we are here just for the spacing we're gonna get another div class equal again form a group and here is going to utilize for the buttons so for the buttons here they're going to be basically three buttons to save the go back as well as a delete so the save is going to be utilize either if we're going to be creating a new driver or updating it the go back also going to returnize for all scenarios put the delete is all going to be only available if we're actually updating the driver that's the only case so the other condition so only when that ID is available we're going to be showcasing that button so the first things first we're going to put button type submit so because this submit button is going to be responsible for submitting it and it's going to trigger these two methods based on if it's successful or failure and then we're going to put the class and then I put BTN BTN Dash warning and then we're gonna put the save driver and then I'm gonna put another button on click we're gonna hook it up to a method that we need and in this case it's going to be back at go to drivers it's pretty straightforward class it's going to be BTN oops BTN BTN Dash primary I'm gonna go say back and lastly cement that we had done before I'm gonna put out if string dot empty or null for ID if it is if it's not empty or not actually we need to showcase the delete button so again we need to make it as an a at onclick equal to I'm gonna put delete driver let's say here delete driver and just give it a class equal vtn BTN Dash danger so it will appear Android and let's put a br here so we can have a bit more space and that should be it it's not gonna work out right now so let's start by actually creating the three methods let's start by the easiest methods which is going to be first gonna be the go back to drivers and the invalid request so if you go back to our driver detail.cs let's add these methods after the initialize and sync so first of all it's going to be protected void I'm gonna put handle failed requests and all I'm going to be doing here is just utilize that message that we have created previously and I'm gonna say something want wrong for not submitted and I'm gonna add a semicolon and tell you what inside my driver razor here I'm just going to add a message at the end I'm gonna put another VR I'm just going to display the message on a paragraph and here I'm just going to give it a styling of red so font actually let's just give it color red yeah so that's gonna be for the first one here we can see it already want the other one is going to be go back to drivers so again it's gonna be protected void go back go to drivers and here we're gonna be utilizing the navigation manager dot navigate to and here all we need to specify is the path for it and in this case it's going to be drivers forward slash drivers perfect and now we have the delete drivers that has Implement a delete driver also it's going to be pretty straightforward we're gonna put protected async task delete the driver and first of all we're going to be seeing if the ID is not empty so if string dot empty or null for the ID we're gonna put VAR ID equal convert dot two and two and 32. we're gonna pass here the ID and then we're gonna put file result equal uh uh it's gonna put a weight driver service dot delete and all we need to pass is the driver ID perfect and then we're gonna say if result is successful we're gonna navigate back so navigation manager to navigate to forward stash drivers else we're gonna update the message equal I'm gonna put something went wrong driver not deleted okay so now that's leave us with the lead with the uh with the last method that we want to implement which is going to be here the handle valid requests so let's do this right now so let's do this at the end so protected async void handle valid requests so the first of all is we need to check if the ID is empty or not similar to this because basically here it's gonna we're gonna be able to know if it's gonna be an ad or an update so so the first of all is going to be an ad here we're going to add a driver else it's gonna be updated driver so let's do the art part so we're gonna put pretty straightforward for results equal await await driver service dot a driver perfect I'm gonna say if result not equal to null we're going to use the same logic here but we're gonna update the message so instead of something one wrong driver not added other than that we need to update the driver which is also pretty straightforward I'm gonna put the wire result equal await driverservice Dot update and then we're gonna pass the driver and let's do the same thing but here this is a Boolean so if it is true we're gonna go back and we're going to say here it's not updated perfect so let's do let's stop this understand.net build and as you can see here that's building successfully and if I go back to my web browser and I refresh this you see failed oh we just did the the door on still early morning today so okay let's see what's gonna happen now perfect we got our name racing number and team so let's add George Russell driver number 63 Team Mercedes F1 AMG F1 let's save driver we can see it got a resource got added successfully and we navigated back exactly so now we're still missing the added button which is pretty straightforward so let's go back to our Visual Studio code and let's go to our Razer details and let's add the managed driver so it's going to be driver not driver's details and we can add this here so first of all let's copy this to make it easier for us and here all we're going to be doing is just put this so here we're gonna just put edit instead of add a new driver and for this one here all we're going to be doing is just going to add a the ID so it's going to be item dot ID so let's stop this and see how it works so right now let's go back here let's refresh we got the button just make this as a warning just because yellow means for other thing so let's stop this let's run it again it's running just refresh we got it as edit and now if I click on it I'm basically able to see Lewis's information let me make this as Petronas let me save the driver and then we can see that the team got updated if I click on edit remove Petronas save driver saved let's update charge let's put here also Petronas save perfect and let's go to valtteri and let's see it I want to delete the valkyrie deleted back so Factory what does racing number 77 Alpha Romeo safe driver perfect so basically here we are able to create a full Grudge so basically we have the full operation adding a new a driver editing an existing driver as well as deleting a driver let's check the back button and the back button also work and we can see here that basically what we have accomplished here is a full life cycle of a cloud operation got all we're able to load all of the drivers and were enabled we are able to add a new driver and that we are able to update our driver information delete we are able to delete a driver as well get by ID we're getting a single drive as information and here we can see that within Blazer we are able to actually utilize in this case our web API in order for us to get the information but the nice thing about Blazer is we don't really have to use a.net API in order for us to get the information we can use a node API python so on so forth it's a very flexible where we can actually utilize it because basically Blazer here is a client-side application it does not really matter what API we're connecting to as long as providing us with the information that we want and let's do a quick summary of what we have covered today so first of the first item that we have covered today is we basically set up our application then we have created our project inside our project we have focused first on creating our API and all of the endpoints that's needed in order for us to create our application and once that is done and we are able to create our application successfully then we basically configured all of our Cloud operations inside our API we create our API DB contacts to be mapped it out our database so on and so forth and basically we had a full API set and ready and once we have completed our API we move back to our Razer Blazer application our client-side application we created I get the the get all drivers page first where we can actually see all of the drivers and then basically we hooked up our Driver Services we're actually able to communicate with our API through the driver services and once that is done we were able to actually create the edit and the ad and then delete functionality for the drivers so I hope this video was helpful please like share and subscribe if you like this video it will really help the channel as well if you'd like to support me please consider supporting me on patreon or buying me a coffee but that's uh have a great day and thank you very much for watching

Channel: Mohamad Lawand

Views: 15,880

Keywords: .net 7, .net, api, beginner guide, dotnet, asp.net core tutorial, .net core, asp.net core, dotnet api, dotnet blazor, dotnet blazor for beginners, dotnet blazor tutorial, c# blazor, c# blazor tutorial, blazor c#, blazor tutorial, blazor webassembly, blazor webassembly tutorial, blazor web api, blazor wasm, blazor wasm tutorial, blazor webassembly api, full stack web development course, full stack web development, blazor full stack tutorial, full stack blazor

Id: Ki53HNV613g

Length: 96min 25sec (5785 seconds)

Published: Tue Feb 28 2023