.NET 8 Blazor .🚀🔥 : Building Dynamic CRUD Apps with Ease

Hello friends thank you for watching this video I am Muhammad and today we're going to be basically creating a full endtoend Blazer application in order for it to communicate with our web API in8 we're going to be creating everything that we need for our CR operation in order for us to do create update delete and read all of the information that we need through our Blazer application from our web API if you like this video please like share and subscribe it will really have the channel as well if you'd like to support me please consider supporting me on patreon or buying me a coffee with that said grab a cup of coffee and let's get started so the first thing that we're going to be doing is we're going to be creating our new blazer application we're going to add it to our solution add a couple of references and then we're going to be starting building our application so let's see how we can do that inside my solution I'm going to click add new project and I'm going to choose Blazer perfect and I'm going to call this Formula 1 dot app because basically this is going to be my interface for my application and from the drop down here I'm going to be utilizing the Standalone application so I'm not I'm going to be utilizing the wasm other than that I'm not going to be utilizing anything I don't need authentication I don't need any do support at the moment I'm just going to leave it as is and I'm going to click on create perfect I'm going to add my files and now as you can see here here I have my blazer application available for me so I can directly utilize it so the first thing I want to do is I want to add reference to my entities because I'm going to be utilizing this class library inside my Formula 1 application so in order for me to do that I can do it directly through the terminal and we can do net add Formula 1 actually let's check where we are plus yeah net uh Formula 1 app reference to Formula One entities perfect now I have added the reference so if I click here right click and addit CS Pro we'll be able to see that it has a reference to my entities perfect so once we have done that the next step for us is I'm going to be starting creating a page where I can see all of my drivers so inside pages so before we get started into all of this let us just understand the main structure of our Blazer application so as we can see here we here we have we have normal the dependencies that we currently see within any normal net application properties where actually all of the launch configuration are there ww rout where we can actually store all of all of our CSS images anything that we might need it's going to go into into the WW rout layout it's going to be where all of the main struction uh of our page uh where it's going to be so the header the footer anything around those line the menus is going to be inside our layout and then we have our pages and inside our Pages we're going to have the different sections that we currently have so before we actually start uh uh and adding stuff let usj just uh make it uh run and we can see what's available inside as well we can see here that we have a program.cs and this is the exact program.cs framework that we currently see within any net application recent net application we're going to be having a app. raser and basically this is going to be the entry point uh for our application and then from there uh it's going to be directed to the normal Pages because basically a Blazer application is like a single page application Spa similar to all of the JavaScript framework like angular react Etc where we're going to have a main page and all of the components will basically be Lo loaded into that so let us run this I'm just going to click here and I'm going to make it run perfect now you can see that my application is running and you can see I have my three different pages so if we take a look here inside Pages you can see I have counter home weather and here we can see we have home counter weather which is exactly what I need perfect so the first thing that I want to do is I want to tidy this up I'm going to remove the counter and the weather I'm going to keep home for for this moment and I want to add driver section so let's see how we can do that so let's stop this and in order for me to clean this up first of all I'm going to add the driver page that I want so I'm going to come here add bler component and I'm going to click on page I'm going to call this drivers and this is going to be drivers this is going to be the landing page where all of my drivers going to be and I'm going to see all of my available drivers here so I'm going to leave this like this for now I'm not going to change anything here I'm going to be doing a lot of changes later but for now I'm just going to keep it as is then I'm going to basically delete the weather because I don't really need it so I'm going to come here edit and delete and then under uh counter as well we don't really need it so addit and delete perfect so now I'm going to go to my nav menu and inside my nav menu here you can see I have my navigation menu for all of my pages so I have already removed weather so we can delete this and I will update the counter to to actually reflect the drivers so first of all I'm going to change it here from counter to drivers and as you can see here I have H Ruff and inside this HRA I need to specify exactly to which page it needs to go and this one needs to match the name of my uh pages that I have and basically here we can see inside Pages called drivers so that's exactly what it needs to be so I'm going to put drivers and other than that if we run it right now we should be able to see my new structure so again let's run this and as you can see here I have my home I have my drivers and I have everything available for me and I have my new updated structure so that's going to be the first step and as you can see here that within this first step I was able to restructure a bit my application to actually uh fit with whatever I need in order for it to work so now what I need to do is I want to create my crud operation for my blazer application directly through here so I want to create a list of all of my drivers I want to have the ability to edit delete as well to add the new drivers directly from here and we're going to be basically binding all of this together to my API so basically I will be able to do any calls that I want to my web API and get back the response directly through that so let's see how we can do this so first of all I'm going to stop this one before we move any further I wanted to basically run my web API right now so now that I have run my my API let's see what do I get from my get um endpoint so if I click on this C don't trite out execute we can see here that I get the driver ID full name driver number and date of birth perfect I might need to add a couple of more information but let us see what happens when I click on get driver by ID and let's click on execute we can see we also get the full name driver name and the date of birth the thing that I want to add it to here is I want to get the first name and last name separately rather than having the both together and once I do that I can start working actually on my blazer application so let's update this so I'm going to stop my application and I'm going to go here into my controllers and drivers so first of all I'm going to go where I have my get driver and I can see I have my get driver response let me go to this and basically here what I want to do is I want to add my first name and last name so here I'm going to put first name and my last name perfect and once I have done that let me go check this one here I need to check my mappings to see if actually going to map it correctly so I'm going to put uh domain to response and I think that should be fine so let us try this right now I'm going to run it again and let's go back to my web browser and I'm going to click here on execute and as you can see now I get my first name and last name perfect this is exactly what I want and if I click here on get all drivers I'm getting my first name and last name separately okay great so now that my API is up and ready and it's actually running as it should what I want to do right now is I want to start building my services inside my Formula 1 app which actually going to consume this API endpoint so I'm going to right click here add new directory and I'm going to call this services and inside the services I'm going to be creating another directory I'm going to call this interfaces when I'm going to add my interface so the first interface that I want to add is my called I driver service and this is going to be an interface and here I'm going to Define my interface for my driver service so let's get started so first of all we're going to put task list get driver response I think that was called get driver response and here is going to be make sure maybe it's nullable and we're going to make it get drivers perfect then the other one's going to be task get driver response and get driver by ID and here we're going to pass pass the good as an ID and I'm going to make this also nullable because we might not get a response then we're going to put task get driver response and this is when we do an add driver and here we're going to add the driver and if you remember previously I had a create driver request and this is what we're going to be sending to my API so if go here to the Declaration you can see here in order for me to create a driver I have my first name last name driver number and date of birth and basically this will allow me to see that to create a driver so I have different uh dto I have my create driver request I have my updated driver uh request which is going to be utilizing for update so I already have those created which uh is really good so now let's go back to my service that I was creating here and now we're going to have the other one which is going to be task bull it's going to be updated driver and this is going to be the updated driver request and lastly oops need task and here task again Bull and it's going to be the last one delete driver and here all we're going to send is the driver ID perfect so now that my interface is created and I can see my different Crow operation that I have the next step is I'm going to be creating or implementing this service I'm going to create a class I'm going to call it the driver service and inside this driver service I'm going to be implementing this so I driver service and it's complaining because we did not implement it so let's Implement them now that's all of them okay perfect now we can see that I have my five Services here so let's get started with implementing them so first things first here I need to declare a HTTP client and this HTTP client is going to be mainly responsible for communicating between my laser application and my web API so I'm going to be utilizing it here but I'm going to be injecting it inside my program.cs as well automatically in order for it to actually knows how to communicate the first thing that I need to do here is I need to actually inject my HTP request uh inside my uh surface in order for it to actually be able to communicate with my web and then I need to actually configure it inside my program.cs so let's see how we can do that so here all I'm going to do is I'm going to put private read only HTTP client and then hore HTTP and I'm just going to put a Constructor and I'm going to tell Rider to initialize this inside my Constructor perfect and what I'm going to do here just to facilitate this for me I'm going to put private read only Jason serialization option serializer option and I'm going to put underscore Jason serializer option perfect so with that and let me let me declare this inside here initialize it and this one here what I want to do is I want to specify certain configuration that's going to be utilized across all of the different uh services so perfect and I don't really need this right now let me just copy this I don't need this and I can make this like this okay perfect so here all I'm going to do is property name camel uh property name insensitive I'm going to be equal to true so that way we don't really care about Cas sensitivity perfect so now that I have this the next step is I'm going to start building my services and I'm going to start with my gut drivers first of all I need to make this async and I'm going to delete this and just for error management I'm going to put my TR catch here and then I'm going to build my service through that so the first thing that I need to do here is I need to start actually by uh creating my API call so through this I'm first of all I'm going to put here API response equal await uncore http.get stream async and here I'm going to specify the end point that I want to utilize and this is going to be API API forward slash drivers this is the endpoint that I'm going to be utilizing in order for me to get my drivers and then I'm going to put VAR drivers equal await Json serializer do deserialize ASN and then here I'm going to specify it's going to be a list of get driver response and we're going to pass here the API response and then all I'm going to do here is I'm going to pass the drivers back and one more thing because we have already declared this here which is going to be my uh serialization option so let me use it so inside here I'm just going to pass my serialization options so that way it will automatically have the uh name case and sensitivity available I'm going to leave this as is for now so now this is going to be for my get driver now let's continue building the other services so the next one we're going to be doing is going to be our G driver by ID and this is going to be a bit straightforward to do so first of all make this a sync and then let's remove this and from here we're going to add the follow foll we're going to put far driver equal await _ HTP do get from Json async and then here all we need to do is just pass what type of response we're expecting which is going to be the get driver response and here we're going to basically pass our endpoint so we're going to put for/ API forward slash drivers and forward slash the ID perfect and all we're going to be doing here is return driver let's make this inside try catch perfect let's put this here so now that we have done two out of the five let's continue and let's add the d add driver so let's remove this let's make this a sync and here let's add the TR catch and first of all what I need to do is I need to confirm the body that I have here the object into Json so that's going to be the first thing so I'm going to put for driver Json equal new string content and from here I can put the Json serializer do serialize and I can pass the driver and then I can put the encoding which is going to be utf8 and then all I need to do at the end is I'm going to put it's going to be of type application for slash Json as simple as that so basically here what I'm doing is I'm just converting my object into Json and I'm giving it the utf8 encoding and I'm telling it that's going to be a Json type then I'm going to basically do VAR response equal await uncore HTP do Post async and here I'm going to put API slash drivers and that should be it and then I need to pass the driver Json that I have and that basically will allow me to actually uh attach my um my body of the request to my request here and as you can see it's a post and then all I'm going to do here say if underscore then all I'm going to do here is if not response do is successful return null else what I'm going to do is VAR response body equal await response. content. read a stream async and then I'm going to put here VAR new driver equal await Json serializer Dot der serialize driver a async let's deize async here it's going to be of type get driver response and we're going to have to pass the response body and I'm going to pass also the configuration that I added which is going to be the serialization option so let me add this here perfect and lastly I'm just going to return the new driver so return perfect perfect so I'm I'm ended up with my last two that I need to implement this is going to be also straightforward to do I'm going to put async here let me remove this and here it's going to be VAR I'm going to convert this also to adjacent so what I can do is simply just copy this or rather than then try and do all of this again and then I can update it so copy uh let's put try catch and then I'll add this here so first of all this is not going to be a post this is going to be a put so it's going to be put a sync and then once this is done this is going to be the same here where I need to do is I need to attach the driver ID so going put dollar sign forward slash driver ID actually do I need it let's check the API so it's going to be driver. ID but let me check the API so let me go back to my web browser and if we take a look at the put it's not expecting it okay perfect so I don't need this here let me remove this okay great and then basically if it's not successful I'm going to return false else I'm going to return actually let's just make it return response do a successful status code as simple as that so here we can see it's pretty straightforward all we're doing is we're just making a put uh adjust in the body and then sending it and basically the driver here is going to be the update which is exactly what we want and the last one that we need it's going to be the delete it's going to be all pretty straightforward and put a sync let's remove this try and it's going to be V response response oops response equal await uncore HTP delete async and we're going to put forward slash API oops API SL drivers API here soorry here I'm going to put the id id and let me add the dollar sign here okay perfect and then lastly and response yeah response what we're going to be doing here is put return response do a successful status code perfect so now that we have all of this ready now let us actually inject this service inside my program.cs so I'm going to go to my program.cs and after I do this I'm going to attach it here so I'm going to put Builder do Services dot add scop and here all I'm going to do is just going to it's going to be the I driver service with the driver [Music] service and that's it so basically what I'm doing here is I'm actually attaching my service that I just created into my di container so similar to what we have normally within an any asp.net core what we're doing is we're attaching our service into our di inside our program.cs so whenever application is starting it will be able to identify because what we're going to be doing is we're going to be attaching this service into our page so it's going to be injected there through our the container so it's really important to add this so the next step now is we need to identify inside our uh Blazer application is where does the end point for our IPI is so inside the program our program. CS what I'm going to do is I'm going to configure it right now to specify our to point my application to the API so it will automatically detect that it needs to communicate to that API so let's see how we can do that so here what I'm going to do is I'm going to put Builder do services. add scop and within this we're going to basically configure our HTTP client so I'm just going to put H client for HTTP client and it's going to be new HTTP client and then from here all I'm going to be doing is just adding the configuration that I need for it and it's going to be pretty straightforward all I'm going to do is just going to configure The Base address and the Base address is going to be new URI and this is going to be the exact endpoint that we're going to be utilizing for our application and we can see here that the endpoint start with Local Host 5,000 so this is what I'm going to be using so here I'm going to put it's going to be http um Local Host 5000 I'm going to put the forward slash here so I don't have to do it inside my services but in essence once I have I have this here it's allows me to actually Define what is my endpoint that I want to connect to through for my API so my application will run and the reason I did this way in order for me to actually make this configurable through my app settings so in a real word scenario what I will do is I'll add a configuration section inside my app settings for the API endpoint so whenever the application is booing it will go up to with this API endpoint and it will be able to communicate this will allow me to facilitate testing if any my API is to be updated etc etc I don't have to redeploy my application I all have to do is just specify this configuration inside app settings but for now to make it simple I just left it as it is inside my app settings sorry inside my program.cs so now that we have done that the next step is I'm just going to add some configuration inside my import. Riser so I don't have to actually add a lot of the configuration there all I need to do is just add one which is going to be add using formula 1. app. services do interfaces so that basically will allow me to uh inject my services without actually having to add the using it will be globally available it's not really necessary to do but I just like to do it from here and the next step now I want to actually start building my component so I want to actually start building this so in order for us to build this as you can see here I have the ad code which is basically usually where my C code goes in so I have two options what I can do is I can add my C code directly inin my same razor page or I can have a different U uh class uh outside my laser page where it's actually going to be responsible for handling all of the C code it's up to you to basically choose whatever one you see fit I like to have completely separate so I would like to have my UI on one side and my C code on one side rather than have one big document containing all of the logic together but again it does not really matter it is up for you to decide however you wanted to do but for this example what I'm going to be doing I'm going to be creating another class with the same name so it will handle all of the logic of my blazer UI so let's see how we can do that so here instead of actually having my ADD code here I'm just going to delete this and inside my pages I'm just going to add a new class and I'm going to call this the same name as my Razor page so it's drivers. Cs and now the main thing that I need to do is instead of having it as a class I need to make it as a partial because what traser is going to be doing is whenever it's going to see that I have a driver. trer page it's going to automatically assume that there's going to be an embed class called driver so when I make it as partial it will basically think that this class is belong directly belongs to this and it will automatically inherit all of the different functionality that it needs so that way I don't really have to do a lot of work here um um so that way Blazer will automatically detect that this belongs to the driver laser page and it will automatically execute everything that exists inside so and this way I have a full separation of concerns between my UI and my C code so now what I want to do is first is I want to inject my service that I have which is going to be private I driver service driver service and we're going to put get set and the reason here I have inject because this is a par class I cannot really do the initialization through the Constructor because the all of the initialization is happening through laser but when I add this attribute inject laser will know that this is going to be coming through the the I container and because I automatically configured it inside my program.cs it will be automatically initialized so that's a really cool thing that I have here then what I'm going to do is I'm going to Define so I'm going to put public I in numerable driver and I'm going to put drivers get and set and I'm going to equal to new list of drivers okay so let's fix this I think this should be the get driver acing let's see get driver response let's see whatever the get gets us so here the get yeah let keep that as this perfect so now that I have this well basically what I'm doing here is I'm declaring a variable which is going to allow me to inject stuff inside my Razor and this is here I'm going to be creating a table and inside this table I'm going to be loading these drivers but for now it's going to be empty so if there's no information it's going to be loaded as empty and now what I want to do is I want to do this and we're going to explain what is this so protected async override task on initialize initialize asnc so this one uninitialized innc is basically a method inside the life cycle of the page so basically What's Happening Here is because we cannot access the Constructor in order for us to add whenever we need to do on page initialization Blazer have different methods embedded into it which allows us to tap into the loading component uh of the Blazer component in order for us to add actions whatever we need there and the action that we want to add there is whenever is the component is ready to be initialized we want to actually call our service in order for us to get the information and this is where the uninitialized async comes into place so that mean that the razor component has been fully initialized from the HTML point of view and then we're basically calling the API get the information and then we're going to be loading it into the view so let's see how we can do this so here as as soon as I Define this and as we can see see this is a built-in method I'm overriding it right now through my driver uh partial class so here basically I'm going to put far drivers I'm going to call the service which is going to be equal await uncore driver service do get drivers and then all I'm going to be doing very simple I'm going to say if drivers do count is not equal to zero all I'm going to be doing here here is just going to say drivers equal drivers so I'm taking whatever information that's coming back from the uh from the service here and I'm actually assigning it here as simple as that so whatever information I'm getting from the service I'm assigning it to this list that I have here and that should be it so now let's run this first of all I need to make sure that my application is running let's see why oh that's fine let's run our API so I'm going to run this in in debug mode perfect now my API is running now let's run this this will not work FYI it's going to C create a problem but we'll figure it out together and now if I go to drivers as you can see nothing has happened and if I click on inspect console we can see that I have a lot of problems here and it's not working so I have the main problem which is going to be my cores issues because basically because basically with cores uh I have two different Services I have my API and I have my blazer application completely learning separately and the API usually will not allow anyone to directly connect to it unless that endpoint is automatically authorized and this is where Calles into place in order for me to allow the application to communicate so the Blazer application to communicate with my API I need to enable course so basically I need to tell my API that there's going to be some request coming from a certain endpoint that you need to allow in order for it to work and this is going to be the main case here so I'm going to stop both of them and I'm going to go to my program.cs inside my API so what I'm going to be doing here is Builder do Services add course and then I have my options and let's configure it now and then basically the first thing that I need to do is options do add policy and this policy is going to be BL app for my blazer application so if I have different applications I can create different policies and then what I'm going to be doing here is I'm going to put my Builder and I'm going to specify the different actions that I want to do here and this going to be straightforward so I'm going to put Builder dot with origin and this is where I'm going to specify where my request going to be coming in and if we open up our endpoint uh let's run our uh up again so we can see the exact end point so now it's running and we can see the endpoint that it should be sending the request is Local Host 5272 so I'm going to take this and I'm going to add this here okay perfect and I can I need to remove the last uh forward slash and then all I'm going to say here is I'm going to say allow any header then I'm going to say do allow any method and do allow any credentials and this is just for Simplicity sake there's a lot of stuff that I can add others but I can configure it in way more uh deeply but for the sake of this example this should do and now once that is done the next step is once I have initialize this service inside my Builder do Services what I need to do is I need to activate it so I'm just going to add it here I'm going to put app do us scores and I'm just selling the policy name that I want so this policy name it needs to match whatever policy that I have specified here in order for it to run if I don't specify this it will actually it will not actually work so now let's run them both again so I'm going to run my API so it's going to run here and now this is actually running let's run this okay my application is running and now if I click on drivers I'm not going to still see anything but if I come here click on network let's refresh and if I click on network we can see here that I called my drivers and in the response it's not that one this drivers we can see here that I got my uh information which here you can see that I have leis information available perfect so that mean that I'm able to connect now my application uh my blazer application to my API so the next step is I'm going to build the UI for this so I'm going to click on stop I'm going to go down here I'm going to go to my driver do uh razor and then here I'm going to put very simply table I'm going to give it class table and then I'm going to put a and inside of this I'm going to have a TR and I'm going to have a th and inside this stage I'm going to have my ID actually let's just copy paste them it's easier going to have an ID first name last name and my number and an mtth for the edit and delete button so here I'm going to have ID name first name actually last name and driver and then all I'm going to be doing here is I'm going to leave this empty so this is my Tad now I'm going to have my body so T body and then inside my tbody where what I'm going to do is I'm going to add four each and I'm going to put for drivers four actually in sorry in uh drivers underscore drivers so now now this drivers that we see here is the exact drivers that I have initialized here and because this is initialized here inside a partial class it means that this is also accessible through my view and the reason that I actually assigning whatever information coming back from the API to this because basically this information is going to be required for me to um access this information here so it's really good to have this initialized and then assign whatever value we need into it so once we have done that I'm going to come here and then I'm going to start building this so I'm just going to take the same TR here and then just update it I'm going to put copy perfect so here it's going to be add driver. ID driver ID perfect then it's going to be add the driver do first name add driver. last name add driver. driver number and the last one is going to be for edit and delete we're going to build them later so now that I have this quite simple let us run this again and see the information being populated so let's run in the buug mode and let's run this also in the buug mode and now if I come here let's wait until it runs perfect Let me refresh and it clicks on D ders and we can see I got closes information available for me I have my ID I have my uh first name last name and my driver number okay great so now what I want to do is I want to add a button for me to add a driver and then I'm going to be adding the edit and delete directly from here so let me stop both of them okay great let me close this and what I'm going to be doing here is before the table starts I'm going to add a simple hraff and this hraff is going to allow me me to add the driver and specify the class BTN BTN sus and I'm going to say this called add driver it's not going to do anything I don't have any page called the driver yet and this is what I'm going to be creating next but let us see it in action so now this is running and as you can see now I have a big nice button says a driver okay now we want to build this so let's stop these two and let's start building our driver pages so inside my pages here I'm going to add a new bler component I'm going to make it a page I'm going to call it the driver perfect I'm going to remove the code because I'm going to be implementing the same thing as I did before different class so here I'm going to put driver. Cs and I'm going to make this as a partial and one thing also directly I'm just going to inject my service here so inject and I'm going to put private and uh Drive I drive service underscore driver service get and set perfect so now what I'm going to do is I'm going to build my UI so first of all I want to take a look at this and here we can say it says at page and then I have for/ driver so this mean that this page currently can only take the for/ driver without taking any query string in order for me to allow this to take a query string what I need to do is I need to tell the page that it needs to expect a query string so how can I do that to do this I'm going to put at page I'm going to put driver then I'm going to put forward slash I'm going to specify here that I'm going to require a driver ID and that's it so now this page will actually recognize that there's going to be um someone going to be navigated to it without the driver ID and there's going to be someone uh navigated to it with a driver ID but this driver ID I have not defined yet this is going to be coming later I'm going to be defining it but it's always good for me to have it from now here so once I have done this the next step is I need to actually specify that how this page will handle that driver ID so let me Define this now before we continue so we directly have understanding how it works I'm going to go to D and here what I'm going to do is before we do anything else I'm just going to specify that I'm going to expecting a parameter and I'm going to put public string driver ID and I'm going to make it get and set and put that's it so basically what I'm doing here is I told my Razor component that it need to expect a parameter called a driver ID and for this parameter in order for it to work what it needs to do is it needs to let it be injected and this driver ID will match exactly what I have here and basically this is how it's going to know that's this is going to be the query string which is going to be passed to it so now that I have my driver ID in place the next step is I need to make sure that this page is actually compliant so it means that if someone sent a someone navigated to this page without a navigation ID it means that they're going to be creating a driver if they have navigated with a navig with an ID means they're going to be updating so I'm going to be adding this logic here and for my UI to shift based on that so let's see how we can do this so first of all I'm going to put if at if I'm going to put driver ID actually we can put string do is empty or is not all empty for driver ID this means that I'm going to put this here if it's empty it means I'm going to be create driver else else is going to be updated driver perfect and also why not put page title I'll add to other pages so page title is well going to be able to see in the tab so again there's no harm of adding it just nice additional information so now that I have specified my header uh and my page title let's see what we can what we need to do next so next I'm going to be creating my form I'm going to put here div class row and then here I'm going to put my edit form and this edit form is a component which is directly built into Blazer it's not something that I created or managed it's something directly available out of the box from Blazer and if I hover over it we can see it comes from the asp.net component forms. edit forms so it's built in into theot framework so the edit form in order for it to work it needs need to require a model I don't have a model yet but I'm going to be creating it and I'm going to say the model is going to be equal to add driver model let's just create this driver model right now so I'm going to go back to my driver. Cs and inside my driver. CS I'm going to inject here my model so I'm going to put public get driver response I'm going to call this driver model get set and I'm going to make it equal to new get driver response in case it wasn't initialized actually let's remove this and it will work so now if I go back here this is going to be my model and what I need to specify here is on valid submit what action do I need to do and it's going to be at handle valid submit and I'm going to add another one they are not declared yet but I'm going to be declar them on invalid submit I'm going to say add handle handle invalid submit and lastly I need to specify my form name and I'm going to say uh sample form can call whatever I want so now that I have my initialization for my for my edit form is available now I can actually work on the other items so first of all it's going to be my data annotation data annotation validator I'm going to say that's going to be required and then I'm going to specify here my uh validation summary so in case there's something which is not working it will be actually available here and then I'm going to start building my uh form so I'm going to be div class form-g group I'm going to close this and then here I'm going to specify my label and I'm going to make it call class call- md-3 and this is going to be for first name and then here I'm going to specify my input text and this again built into Blazer that's not something I created and I'm going to put a class uh call- md-8 and then I can make this form control and here this is really important and it's going to be a main item I'm going to put bind Dash value and then here I'm going to say it's going to be long equal yeah and here it's very important I'm going to switch to my driver model and then I'm going to put my first name and this bind value that I have is going to allow me to do two-way binding so it means that whenever I'm getting information uh to be loaded it's going to loaded here and whenever I want to submit information it will take it from this and this is what makes our input Tex to be able to be updating our model based on whenever I click submit so it's really important to have this in place so this is going to be for my first name I'm just going to copy this I'm going to put it for my last name as well so here is going to be last name and here is going to be last name perfect so now it's going to the other one's going to be my driver number so I'm going to make it like this uh and so here instead of text I'm going to put input number perfect and here instead of first name is going to be my driver number great I'm going to copy again and I'm going to put it here let's fix this let's fix this name here again it's going to be driver number not first name and here is going to be date of birth perfect and here is going to be date of birth great so now that I have all of this oh let's change this into input date perfect so now that I have all of this I have my four main elements which is going to be first name last name driver number as well as date of birth so now I have done this now I need to create my submit button so I'm going to put button type submit and it's going to have a class ptn ptn Dash ptn ptn Das warning and I'm going to call this save driver and this going to be basically it another item that I would like to have so this is going to be basically it for me to submit my form it's not going to really have um I think else you need to do I need to basically now uh Val create the handle uh valid submit and handle invalid submit but basically in order for me to submit this uh submit this form that's all I need to do the next step is I need to add my delete functionality so I'm going to take the same logic that I have here so based on that if a uh string is not empty or null I'm going to basically create a button for uh Delete so this going to be here so I'm going to make it like this so if my ID is not null or empty I'm going to add a button to for deletion it's going to be add click on click and this is going to be delete driver class it's going to be ptn ptn Dash danger because it's the delete and I'm going to say here delete driver perfect and the last thing that I want to add is going to be a message so if there there's anything going on wrong the the server is not responding um there's any validation error I'm going to add an extra message here so I'm going to put div class form group I'm just going to have here a p and add message I'm going to create this uh object right now as well so now that I have all of this this is all I need to do basically in order for me to have my component running so now let's update this so I added already my driver service and I added this let's add the message so after this I'm going to put public a string message get and set and I'm going to initialize it to equal string. m string. Mt okay perfect so now that I have this now let us start building my uh service so one thing that I would need here as well uh in order for me to basically once I create a driver to navigate back to the main page or once I update a driver to navigate back to my main page I need something called a navigation service and this navigation service is automatically built in into Blazer and which it allow me to navigate between Pages through my C code so what I wanted to do here is I want to inject my driver service inside my driver. CS parure class and once I inject this through my driver. CS paral class I will be able to utilize it inside my code in order for me to navigate from one point to another pretty straightforward very easy to implement so inside here directly after my inject my driver service I'm just going to put inject and this time is going to be private navigation manager I'm going to call it underscore navigation manager get an asset and that's it so now that I have done this all I'm going to be doing right now is building on the same thing as we done before protected override async task initialize I think as you can see it automatically populated for me and here I'm going to build my logic in order for me to load a driver if the driver ID is exist so to do that I'm going to say if not string. mty or null and I'm going to put for my driver ID if it's not basically what I'm going to do is I put Vore driver ID equal new goid driver ID and then I'm going to put VAR driver equal underscore actually await underscore driver service. cut driver by ID pass the driver ID let's make this as an async protected override async and now if that's going to be the case I'm going to put if driver not equal to null I'm going to going to put what did I call it here driver model so driver model is going to be equal to driver perfect so that's going to be the first thing and then I'm going to specify my two handles so the first one it was the actually three so I need to specify first of all let's do this handle invalid submit so pretty straightforward I'm going to put protected void handle prot the invalid submit I'm all I'm going to do is I'm going to put message something went wrong let's fix this perfect and now I'm going to hand it the second one which is going to be the handle valid submit so let's do this protected async task and will submit and here basically what we want to do is we want to take that form and submit it so depending if it's going to it's going to contain ID or not it's going to be an add or an update so we start with the same thing if uh not actually if string null or mty for driver ID so if it is it means we're going to be doing an add so here I'm just going to say add driver else we're going to be doing an update for the driver let's start with an ADD and if we go back to my endpoint here and if we take a look for posting a new driver what do we need we need the first name last name driver number and date of birth which is it match automatically with the if we take a look here create a new driver request that's what we need to be adhering to so here what we need do is we going to put VAR new driver equal new create driver request and here we're going to put the driver number equal driver model do driver number first name equal driver model. first name date of birth driver model do date of birth and last name equal driver model do class name okay so what I did here is I did Manual mapping between my driver model as well as the new driver I can utilize here different libraries in order for me to do direct uh mapping like I have I can utilize here like automapper in order for me to do this mapping together but for Simplicity sake and I don't want to really create a profile for automapper and all of that for now uh I just do it did it manually if you're interested let me know and I create a video how you can utilize automapper with blazer as well so now that I have this I'm going to put VAR result equal a wait driver service add driver new driver and I'm going to say if result not equal to null I'm going to utilize the navigation manager to navigate to and forward SL drivers so that's what I had before else or I need for an else I'm going to put message something went wrong please try again perfect so now this is going to be for my create a driver now let's see for an update a driver so updating a driver if we go back here to my endpoint we can see in order for me to do output I have a different uh body because it request an ID and if I take a look here inside my request you can see I have a driver uh update a driver request but I'm going to be utilizing this so copy this go back to my driver. Cs and here I'm going to put VAR update driver equal new update driver request and it's going to be exactly as it was from before so I'm going to add this here last name equal model do last name driver number driver model. number first name driver model do first name oops then I'm going to have my date of birth driver model dot date of birth and lastly I'm going to put my driver ID driver model do oops driver ID great and now that I once I have done that similar logic as before I'm gonna put VAR response equal underscore actually await uncore driver service update driver and here is going to take my driver so update driver and then we're going to see if response is true let's take the same thing here perfect so if it is true that mean update we're going to navigate back to drivers else we're going to basically display this much as something went wrong please try again later so now that I have this now let's go back to my drivers to traser I think we can see have we still have one problem here which is going to be the deleting of the driver so let's do this right now and let add this after this one here we're going to put protected task async actually async task delete a driver and I'm going to say if string again it's not equal to empty to driver ID it's going to be my main thing I'm going to put Vore driver ID equal a new go with driver ID and then all I'm going to be doing here is going to put far result equal await underscore driver services do delete a driver and it's going to take my driver ID and this is in Saban let me just copy paste what I have done here and basically if the result is through we're going to navigate else we're going to display an error so pretty straightforward I think one last item that we want to add I think that should be enough but yeah what we need to do right now is we need to update uh the drivers page so we going to have an edit button So currently right now inside my driver thing I don't have anything here for me to manage my driver or for me to navigate so let's do this right now so the way this will work all is simply I'm going to add a h Ruff and here I'm going to put at and then it's going to be a parentheses dollar sign and then I'm going to specify here my flow which is going to be driver forward slash the driver do driver ID that's it and then once I have closed this let's see yep I'm going to put the class class equal oops equal PT n BTN DW warning BTN Das warning and I'm going to say this is going to be my edit so now that I have all of this in place let us run them and see what's going to happen so let's do go through the debug for my formula app and debug for my API so now if I go back to my browser we can see both are running if I go to drivers I'm able to see my drivers here I have my edit button I have my ADD button let click on ADD driver we can see here I have my form to create a driver so let me try to create one driver I'm going to put Muhammad 11 23 let's put 04 04 03 19 uh 81 save as inspect it in case something goes wrong we can see it it save driver and we can see it added the driver directly and I got back my response perfectly let me update so when I click on update first of all I can see something not uh was not right because basically it was is telling me that's not able to find a driver okay so we need to fix this right now let's go back here and let me look at this URI let's take a look at driver. CS let's see this here let's go back to the load screen and let's put this here and let's try it again so go back click on edit I can see my ID is coming through I can see my ID is coming through let's navigate to this so I'm going to go to utilization implementation get driver by ID let's see this if this is the right end point I think it's drivers not driver but let's double check so if I go back here go to Swagger and let's see the G and is G drivers not driver so I forgot that s so I need to stop them both and I'm going to click on S here and now I'm going to run them again so I'm going to run this debug mode run this in debug mode as well perfect now let's go back to Chrome drivers should be loading now edit and it should work going to leave it to run and you can see all of the information is loaded I'm going to update it with one one change my number to 87 98 I'm going to change this to let's leave it as is save driver actually L inspect element console save driver you can see something has happened but maybe it's not reflected so we can see here that it says it's sented correctly was the response with not see response let's debug this and see what could be potentially causing the issue so update driver update driver and we navigated let's add a Breaking Point in the controller for the put so this is the post this is the put let's put a Breaking Point here and let's try this again let's remove this Breaking Point and let's run this Muhammad let's add one one I'm going to put favorite number is 12321 for example and save driver so we can see here my information has arrived and my driver number oh this is the problem my driver number is here and my driver ID is here so let's check if I go through my results as you can see my ID is is being populated correctly let's check if this is matches so here my ID is ATB let's see the driver which has came driver ID okay that's the problem my driver ID needs to match the ID here it's should not be autogenerated so let me update this so if I go here to request to domains and for create driver achievement no this is not it let's add it here again Dot for members destination destination. ID and here we're going to put it as can comma we're going to put options options. map from SRC SRC dot driver ID and that's going to be it now this will allow us to actually have it up and running let's see okay now let's run them both so now if I click on drivers we can see it's running edit let's try this one one 222 save driver we can see it automatically updated it and now it's being updated so last one let's try the delete delete the driver and we can see it works so now basically with this what we have been able to do is we have created a full crud operation we were able to actually create an interface uh an application for our API in order for us to basically create a create a driver update a driver uh delete a driver as well as list all of the available drivers so what we did here is we have utilized Blazer uh within net 8 in order for us to create this user interface and this is going to be updated within the next video in order for us to see how we can actually utilize net Aspire in order for us to bring the API as well as our Blazer front end together in order for us to make sure they work together and this is going to be a very exciting video coming up next but for now uh we were able to create a front end for our API utilizing brazer I hope this video was helpful please like share and subscribe if it was please leave any question that you have in the comments down below if you have anything not clear or any topic that you would like me to cover please also mention it in the comments down below if you have made it this far uh just so I I would know that you made it please put your favorite chocolate in the comments and that means that I would know exactly who made it and I will basically make sure to like their comments thank you very much for watching this video and have a great day

Channel: Mohamad Lawand

Views: 10,725

Keywords: dotnet, dotnet8, .NET 8 Features, .NET 8 Updates, .NET 8 Performance, ASP.NET Core 8, Blazor WebAssembly, RabbitMQ Integration, .NET Development Tips, DotNet8, BlazorTutorial, CRUDApps, blazor tutorials, Web Development, CodingTutorial, LearnToCode, blazor getting started, blazor crud, blazor c#, c# blazor, blazor wasm, blazor api, TechEducation, Programming

Id: aPx5vyk00D8

Length: 66min 26sec (3986 seconds)

Published: Mon Dec 11 2023