.NET 8 Blazor: Perform CRUD Operation with the New Dialog Element. No more Third party library!💻✨🔥

hi friends and everyone you're welcome back to  net code H channel do you know that net8 Blazer   comes in with its own dialogue element at first  if you want to create an application and use the   dialog component unless you use component from  the third parties that is a same Fusion Blazer   eyes Mt Blazer and a whole lot but with the  new feature of net a Blazer you now have a   native inbuilt or own dialogue element that we  can use for now it's supports to event that is   the unclose and oncancel I'll take you through it  okay so don't worry before we jump right into it   please make sure you subscribe to this Channel  and also hit on that Bell to receive update as   soon as I upload new video when this video ends  and you happy with it give this video a thumbs   up you can also support this channel by buy us a  coffee you can do that from a link in the video   video description when we also done with this  project I mean I and you we going I'm going to   put this on the GitHub so you can just go in there  and clone it and also review okay so let's see I   have done this um work already let's go through  here then we get to the Practical aspect I have   this normal table over here as you can see and  it's about product now if I click on product see   the dialogue element so you can see I have this  nice dialogue element I'm not using any third   party rather an inbuild from net 8 Blazer is  not nice yes it is you can customize this into   um a confirmation test box into an input test box  into anything at all and that is what I have this   beautiful add product form now let's decide  to add few product here so I'm going to say   this product one I passing the price then here  I'll save that let's add another one as well so   product two so passing something then let's save  that now you see I can now close it wow now let's   say I want to delay this I want to edit it is it  possible with the dialogue box yes it is let's   see so product two I want to change it to maybe  product 10 or 20 so click on it edit and you can   see we have it popped up now the title has now  changed from add product to update product now   let's make it a product 20 and now let's also add  5870 that is a huge amount isn't it let's click on   Save and see what going to happen yeah we have  product updated and yeah everything is working   perfectly as you can see put that 20 and there's  an amount we have an actions here now what if in   case I want to delete is it possible yes let's  see I click on this now I can see we have this   confirmation model and you know I use the same  components to do this confirmation box and it's   all about this dialog box okay now if I click on  no see what happens nothing happens but as soon   as I click on confirm see so it is off beautiful  that is what I'm going to take you through is I   believe this is nice and you can use this without  necessarily have to download that party component   and use it let's see I'm going to create a new  project and at the end of this I'm going to put   the to the GitHub as well so is going to be the  name of this project don't mind it is called net   a Blazer native dialogue do I say component  or element this is an HTML element right so   let me say element but we're going to create  it in a component form so let's maintain this   component okay because I love components so much  that all my codes I put them in the uh component   form so we can reuse them anytime anywhere okay  so I'm going to close this now let's create a new project so take note I do offer coaching  or training session to interested people   who want to learn Blazer or net Technologies  compris of web services for web API Blazer   server Blazer assembly. netm and also blizzard  hybrid so if you're interested I have an email   at the description hook me up over there now  let's get the project created so now this we   going to use netblazer stand alone web assembly  but this it cuts across all the sections you can   use it anywhere anywhere anyhow is that so no  it is anywhere so let's create a project for that and I'm going to use net web assembly  stand loan app and now the name here as I   said on net Blazer native dialog component and  this is the location that I want to put it click   on next and make sure the framework  is 8.0 very important and that is it great once you have this ready we are not going  to install any package this is just a native   one so let's start ahead now I'm going to close  this and the next thing to do here is we going   to create or create a simple um Javascript file  because you're going to invoke this to rate the   the model or the dialog box okay to raise it  up so let's see now actually this uh feature   here or this element supports the cancel but I'm  not sure it supports the close Okay so let's see   how we're going to customize it to suit what we  want so that we can add product manage it with all   STS so let's first go to the WW folder and now in  here let's create a folder and I'll name it as JS   that's for JavaScript so we have this over here  and that is the file so JavaScript and I create   um a file known as dialog.js maybe you're asking  yourself how you going to create it don't worry   click on the file so as you can create a folder  right click on it and click on add new item and   maybe you can just search in here for JavaScript  for easy and quick access JavaScript see we have   it over here so give a name dialog.js any name at  all okay can put it there click on Create and now   when you are done just a single line is a line of  three lines of code you have it over here this is   just a method that we are creating to call to  display the model so this what we are doing we   are getting this my Dash dialogue here now this  is going to be the ID of the dialogue when you   set the documentation that is what they use and  I don't want to rename it because it is okay for   me if you want to change the ID of the div that  you're going to call you're going to you can just   remain or change this but for now let's give it  here now this my JavaScript function so maybe you   can change this to my dialogue function so this is  my dialogue function that's right and I we have do   show Moda now I tried to make it like do hide  Moda and it didn't work so this means that it   only shows it but there's no way to call the same  method to hide it no we can't hide it maybe in   blazer9 maybe that feature will be available let's  hope so but for now this is what they've given to   us so let's consume it in that way now we have  this let's save it um fully aside from that you   know we want to make this as Global if you want  this to um relate to a specific component we' have   to uh specify or use lazy loading or so I think  so lazy loading or JavaScript isolation La loading   is for um CSS right and now JavaScript isolation  it is for JavaScript files okay so we not going   to isolate this we're going to call this as soon  as the page rendered so it downloads it into the   memory or the application state of the browser  so go to solution and click on WW you have this   index HTML just grab this dialogue and I'll under  anywhere just drop it so we have this link script   and the source here is a g s/ dialog.js so we  have this set now to test whether this is working   you can just passing an alert so just passing  an alert so use to test let's say hello just testing okay so type in this now close it up  and let's try to run this application and see   at any page that it rendered you might have to  see Hello just testing let's TR it up and see I said it now can see we have it over here  so hello just Tes and click on okay now any   page that it loads that we navigate to  we're going to see that Javascript file   in there that message it tells you that it is  working if you want to know where the file is   right click on this when the page loads go  to inspect element or let's see right cck   go to inspect elements and let's check it  out from the application section app over   here and um that is it so in here let's  let me Zoom this up for us to see it well   okay that's fine now here you're going to see  that we have do we have um where is it okay so storage all right so background Services yeah  let's go to preloading and yeah frames that is   it so I'm open this up and now you see we have  scripts so and we have CSS so you see we have   only just weather CSS and that is this one we  don't we are not expecting this let's open the   script now see from the Star sheet we have the app  the Star sheet we have so these are the files that   we have in application it has been downloaded into  the browser and that's what going to render to see   the nice view that we have been seeing if you  want to check the script check click open the   script now see we have all the script over here  but we interested in the last one dialogue so   this is what we are testing you can see we have it  over here so this is everything that we have done   okay don't worry now it means that it has been  downloaded or install in the browsers memory and   we can now use it now let's close this and let's  go back to the page and here now it is working   we can remove this peacefully with no issue let's  save it and we can now close this and close that   now let's open um solution in the folder of pages  let's turn one of the pages here into a dialogue   so let's make that dialogue component you can  give it any name right it is dynamic so any   name at all that you like give it to it and now  in here we're going to clear everything because   you know this is going to be a chart component so  no routing on top here there's no page route just   clear everything and in that the first thing  we're going to do here is we need to specify   the component now if you check the documentation  of this I learned how to use that we can use this   to handle it let me just grab it from this side  and now paste it over here so this is all what   as team give us so we have this button and now  when button is clicked you can see my dialogue   is been called and that is a dialogue over here  if I want me to zoom it some more I hope you can   see this okay now check what you can see we have  this the button we have the dialogue component   here the HTML element and we have the at on close  and at on cancel okay we have this button known as   close and it is in the form method of dialogue so  if it is in this you can close it by if you move   it outside this form method no it's not going to  work so you make sure it is in here so if you want   to modify this by creating in some containers  in it you make sure that the close button is in   here take note all right so with the default one  if we save this and now go to the index that is   our index and now within an index let's close  everything and let's use this dialog component   let's the default one so this going to be the  default one now let's run this application and see there you go so we have it over here as  soon as I click on show mod this is what you   see so this look like it's a skeleton that  you're going to try to add some meat to it   to just give it a lot of styles to make it  beautiful okay so we have this over here and   that is the default if I click on this you  can see it closes and now we have on close   take note we have on close here and I I click  on it again the same on Clos now if you go to   the section here and now the D component you can  see that we have just one method and it is tack   to unclose it means with this oncancel it is not  working because where can we have this oncancel   let's say when you make a copy of this and I  we duplicate this in here and I change this   to cancel let's try that and see so this is  cancel save this let's go back to the app and   I we have show model okay we have close we have  to reload this page to have this insertion all right let's check it out here again and see so  you can see we have this cancel we have this   um close if I click on close we have unclose now  let's try the cancel okay the same thing unclose   it the cancel it is not working right so we have  only one method that we can actually call on for   now here we are going to customize it so we can  see what you saw all right now let's let's get it   going now I'm going to close this up and here  we going to so these are the method that that   is unclos no uncan is the one working or is it  unclos so that is unclos this is the one working   on cancel it is not working okay so you're going  to maintain you're going to be using this unclos   method so we are going to Let's remove this button  because we are going to call this button but   somewhere else we remember that we've created our  JavaScript file that's going to um call or raise   this event that is the um this div and we're going  to show okay so we have this set now let's remove   this here you can okay so that is this let's save  this so let's create our simple model that's what   we're going to use for this and I'm going to  name it as product so let's create a class for   that we go to solution I click on this and let's  add a class to any and I'm going to make it as product and now in here let's have a product  with this properties ID name and amount okay   so we have this set now let's go to maybe this  um let's say the homepage okay now the homepage   you want to have a list so we can look through  so this where we have this main page but before   that let's have this container row column 8 and  Etc so on top here this will be the down okay   because this doesn't need any any design here so  we're going to call this as D and now let's make   a class here as container is it container yeah  container will be okay so container and you're   going to have our div our class again and you  know we are going for row we have another Dave   then this class we're going for that's let's make  it md8 so at least we cover 70% of the screen then   in here we're going to have our card so maybe we  have our class and we have our card okay now in   that let's have our card header and inside the  header maybe we can have our button in there so   the button going to be um show div okay is it  show diff show model but in the S the rest is   going to be add product that's going to be the  name of the button we have the class as the BTN   primary to give it as the blue is it the blue c  blue Etc what kind of blue is it have the blue   color as well okay so now with this we can set  this to left so let's make it that floats right   that's right isn't it so float end okay now once  you have this let's come to the code section and   we must have our private void and this supposed to  be show dialogue so show dialog is wrong wrongly   spelled I'll just grab this and I'll P it here  very simple one okay so when I click on this   button what do I want to do now we have the  JavaScript SC insertion in the browser we can   just invoke it but before we invoke it we must  have to let's go to the input because we going   to be using the JavaScript or let's even add it  here so at injects runtime and here I'm going to   say just JS we create an instance of it and I'm  going to say I wait then I say JS do invoke okay   Asing now with this I'm going to pass in the  name of the method do you remember the name   of the method if you don't don't worry as for  me I do also not remember let's go back to the JS let's go to the JS in here and the name is my  dialog function let's grab that go back again to   the home. raiser and I in here past it save it  okay and now this must be a task so instead of   this void changes to task very simple you're done  let's wait and see do you have any issue again I forgot now can see when you use invoke  async you must pass in the T value have   you seen you not passing any T value here so it  must be invoke void it means you return nothing   you're just call that method there's no return  type now let's run this and see that if I click   on this add product that that text box that  dollar component must popped up so we have   this home here and now when check we myself  okay so where is the diog component have Rec   cleared that home supposed to be down here okay  so let's put it down here and that is a dialogue component okay so we have it and that is this  one so let's save it and now let's try so can   see we have this card header and it shift  to this side if I click on ADD prod that   you can see we have we have it popped up  and cancel Works close works but both of   them they work at the same then they all close  the application and that's all okay so we have   closed your save you can also make it work  here so let's have a look with the next one   now this working um so we can just go to  the app and once you have this header so   this must be card header I think so so C Das  header then we must have cash that so there's   a card so this must be your class and we say  cash dash body and that's going to be the card body so let's Okay so this must  be in a double quote we should not forget okay so we can down close this and that is the  body so in here we want to display the list Sobe   this is what we can do we can also create one  component so we can use in here but for now   we are focusing on this dialog component so I  don't want to confuse you with many component   many children component let's make only a child  component and that is the diog component okay   but if you want to improve this you can just move  this to another component then you put over as a   chart component and Supply the values as a list it  is also there this also works so you know you can   choose anyone then stick to it now let's see so  um with this I don't have time to type all this   okay it's very simple thing I just have to grab  the table let me just grab this table from what   my second screen and okay that is it it's not long  with just a small one I think it did not copy it's   okay so let's see all right now let me just make  it small so check here now I can see that we are   having check this we are having just a table and  stripe is table stripe as a class from bootstrap   we have this table head and now you can see  we have ID name amount and our actions when   it come to the tbody we are checking if product  do any then we going to look to the product in   descending but let's remove this descending you  want to make application very simple and now   with didn't each product in within each product in  product we are looking through to get the product   ID name and the amount now what we are doing here  again here is as you can see we are just creating   two buttons and this in the H stack form meaning  horizontal stack you put the Gap as two so create   space between them and there you go so here make  in the horizontal form so we can have the edit   first and now the delay in in order okay like a  match pass first and second all right so we have   it set in here and that is it now here we call  this function and we pass in the current value   or the current model as a parameter we do same if  you want to delete okay now once you have this we   must have something to represent the list and  also of this method so down here we are going   to create it here so the first thing I'm going  to do is going to create a list of products and   since I'm going to store this database this going  to be an in memory so let's make it as um static   so let make it as private static so as soon as  you navigate from one page one page another one   is still maintain the state so we have this and  let's have another method to handle the edit and   also the delete so the same private this method  is going to edit it let's open the parenthesis   and now we are we can just make a duplicate of  this and here this is going to be delete remember   that the the payload is the same the parameter  is the same check this the same parameter from   this to that have you seen the same parameter  here okay now once we are in here let me make   it smaller okay so we have this and everything  is working so when you run this we are not going   to see anything let's check if it has rendered um  let's close this and now from the home you refresh this so this is the output you can see we have  this add product on top here we have this   column names action if I click on ADD product  I have this popup open over here but we going   to convert this into form okay and and beautify  it the edges you can just do a whole lot of CSS   St to this if I show you how to use it then  you can also go on and now add more stuff to   it so what we're going to do next year it is so  we going to design this form into a product form   that can accept product now let's go back and  now in here when we check our dialog component   you can see we have um this that's a dialogue  in here okay so within the dialogue we can just   grab let's remove all this okay I maintain the  dialogue and then the open and the closing and   I can remove everything all right now even  we've seen that the close the cancel is not   working for now maybe it's not working for me  but maybe when you try it's working let me know   how you did it now with this we have the close  session and in here let's have some little CSS   style so let's put let's make an inline style  in here I'm going to say that let's change the   border to maybe a five pixels so 5 BX and solid  now is this see blue uh this is 0 five 0 B B5 e   okay so 0 B5 e D7 what kind of color is this 0  B5 e D7 okay so there is the color code and also   we can have have minan width so minimum width  let's set it to 300 PX that's for pixels okay   we can save this then in here let's have our edit  form this is our edit form now in net AG edit form   there are some feature that have been added to  it okay we can have this enhanced now when you   use this enhance it's going to enable the form  to get work with refreshing or reloading the   page you know when you submit a form the page has  reload but when you use this enhance attribute or   feature it's not going to reload the whole page  only the section that is the form at that area   so maybe if you are scrolling and you're at the  bottom and you try to submit the form you still   maintain where you are that's a new improvement  from the net8 Blazer and there's also something   known as a form name and paret as Supply from  from form Supply from query and Etc maybe once   you start using this net AG framework we start  to learn it one after the other but for now let's   focus on the enhance that's for it okay we can  see we have the model known as the product and   if it is a valid submit or unvalid submit if  it is submitted in a valid way we are calling   this save method okay now when it come here using  this data anotations and there's valid validation   vation sumary right so we using these two guys  in here to handle all the exceptions but for   now I think the way that you're doing this unless  you handle the validation manually okay for now I   believe you know how to handle that manually but  for now let's focus on how to do this so here we   are not going to use the title for now let's make  it as ADD product first now we have this we are   using this product name before let's get rid of  this red red lines so let's have our product list here so this is product and let's give it a name as product and we say it's equal to new to get rid of  these errors now let's also have the save method   so ASN task let's have it down here so ASN task  save and it's also gone now we have this save   button and it is the same so you can see that what  we doing here is we have this unvalid submit so   when you click on any button it's going to submit  to this form but when you check this the form   button that we have here we are not submitting  the type here is a button so when you click on   this we are calling this method so maybe we can  decide to remove this unvalid submit because the   validation is not working for now okay so let's  have this button and so this means that we have   to validate it ourself manually validation we  have to do that but for now we are not going to   concentrate on that let's see so we have this  edit form enhance model and it's over here we   have validation we can remove all this because  they not in here and validation message you can   also remove it for now what we have here is our  card header that's a add product we have a card   body and within that we have a form for each  and and this the first one here is a product   name we B it to this as product name and see the  product amount so we have only two form two text   boxes for the one is a text box and the other  one is the input number for the amount okay we   have when come down here remember that I said  if the button is in this form tag it means as   soon as I click on that the form is going to get  closed we don't do that so if I remove one and   bring it outside I tried that and it worked it  did not close it so it means from the Save one   you want to bring it outside the reason why I  brought it here is it could be that you want   to save now while saving and maybe there could be  an error you don't want to clear and hide the the   the dialog box you want to maintain it State until  everything is successfully saved but for the close   as soon as you click on close everything should  be off and it should clear everything so that's   why you put Remain the button the close inside  this form and I put this outside the form okay   and that's an edit form closing so that is all  that we are doing here now what we're going to   do here is you're going to use an event handler  this event we're going to use an event call back and maybe you be asking yourself what is an  event callback it is a method or a way to handle   all event outside this component you know this  is a chart component you want to handle event   from this side into the parent component the  communication so we can use event call back to   do that that although we can also use action  but for action action does not contain state   has change so when you implement action and you  want to update to get current update values you   have to state has changed you have to call that  method okay to refresh the page now you want to   use event C to get rid of those stuff because you  this is going to work as well for us all right   so with this um the cancel is not working so we  can remove this cancel and now I hit this Lambda   expression on a one line so let's put this in two  this block code okay we have this set and yeah   let's save it so let's create an event call back  let's register an event call back as a parameter   so we can supply or return anytime that I want  to make a call from the child to the parent so   handle add product event you give it as event call  back and it return type here is a product because   you're going to return product at the end to the  parent also with this product that we have created   we want to make it as a parameter because you're  going to be receiving this you don't want to make   this as a um um this um model in here you want to  make it Global so we're going to accept it so an   instance of this product and that's what we going  to use to fill in the Gap in here okay now let's   see so we have this stuff working now the next  one that we're going to do is once you have let's   the reason why we have this it is saying that  cannot because some of the return type all right   so delegate I know what it's trying to say so we  have this product and when this button that is a   save button when it is clicked we want to invoke  this no that's not where it's supposed to be this   save so when this is clicked we want to invoke  this and I'm passing this object that's the model   okay we check if the name is null then return  so that's another way to check the validation   and I return this to the parent okay now we  have this on cancel and that is this one isn't it so we don't have on cancel so this is unclosed  so definitely it supposed to be on close I think   so let's grab this and I'll paste this here  that is unclose so this button is for unclose   and we know as far as it is inside this method  we can decide to skip this because it's actually   going to close it for us so we don't need this  method even okay I think everything is working   left with this on close so with this I think  let's have the method let's bring this method in   here and that's for for this un Clos let's save  this and let's find this and see what we have now so let's click on ADD product and you  can see we have this nice form if I click   on close you see it is off click on ADD now  if I click on Save see what happen save it   is still there it is no off still there  isn't it by close is off yes beautifully   done that's right now let's see the mechanism  to um add it to to the list and I display them   in here now we have um pushed the method  or the event outside or making it Global   so everybody can subscribe to it let's come to  the parent here that is a home and subscribe   to that event so we can do that by passing in  this as soon as I click on this we're going   to have some few um property that we need  to specify in here okay because when you   check this diog component you must have this  product and also the event call back that we specify so here let's pass in handled and now  you have the handle event so let's make a copy   of the same name and I paste it in here we also  need to supply this we're going to supply this   product as you can see from here so let's Supply  the product as well and I'm going to use the same   product from this angle let's put it in the next  line to make it nice okay so control K period   we have it here come here okay now from this you  you check here we have no product so let's have a product and we say product so equal to new  okay so we have that set and in our method   this is a home so in our method if I click on  this is I have an a method I need to call up   for this for the add and edit so here that's  going to be for add product so let's have a   method known as private void let's paste  this and it is coming in with a model so   product and we say it's the same product  or incoming product so incoming product   okay so with this incoming product that we  have we can now extend it and check we've   already checked if it is null so we can now  go ahead and now and add it so how can we add it so let's now check so we say V product equal  to so we check product do first or default so we   are checking the name maybe if the product that  we added already we've added that already if the   product we are adding we've done it already  then we're going to check it and if if so   here not going to be null we're going to have  this products already added so you must have a   string to handle so string message and that that  will handle this message but in case it is not   let's remove this for now you know since you're  not working with database we have to do manual   way to get the ID so we get the whole list from  the the count of the product and add plus one   so initially if it is zero going to add one if  it is a one going to add two and so forth then   we add it to the list and we set this list to  empty to new right then we display this message   as product added and we return that's all that  we are doing but I know since or after setting   this this product to empty after adding we have  to clear the container when do that you must also   click the container inside this chart component  so in the chart component you are going to create   a method to handle that so in the chart component  let's say we can just create a simple method that   is known as a clear product container let's  put down here clear product container and we   set this product that is coming as a parameter  here equal to null or equal to new okay how can   we have access to this public um method let's go  to the home and now here we can give a reference   to this so let's say at ref then we're going  to say this is dialog component so once you   have this set we can just create it down here  dialogue component then we say it is dialogue component yeah so let's this what you want  to do we can make this as knowable and this   is a dialogue component so we can have this okay  then within this reference when you come here we   can have a method in here so past it dot now  you're going to have a method known as clear   product container so let's clear it so you see  we are invoking a method in the chart component   from the parent component and that's a good  communication that we are establishing here now   let's save this and let's find this application  and now see what we have now as soon as you add   to the list it means you're going to be added  here and now you're going to see the product in here all right so let's try it out so add product  then let's say is product one product one the   amount here is 1 2 3 4 5 six now let's add and  see yeah has added over here close this and you   can see we have it set in here we have the edit  and the delete as well let's add another one and   let's say product two the amount here it is this  amount then let's click on Save in case you decide   to type in here and we click on with pass number  click on close that nothing happens you click on   ADD again you're going to see it okay so maybe  here we can try to edit it to maybe put that three   and that is the amount save that we have it set  good so now we are then if I click on this edit   delete happened I hope you can see that so let's  handle that to you let's first talk about the edit so let's close this up now let's go to  the dollar component you know with the edit   the first thing here is we have to change the  title so you must have a way to change this   title right so let let's make it as title so  title then product so you're going to switch   between add or update right good now in here  we're going to have this um and we're going   to say this is string and we say this is title  and maybe we can set the initial one to add so   that's the initial one as ADD as soon as the  page loads it's going to be added now here you   must have a private void such that you can set  this from the parent so let's make it as public   then we're going to say vo then we say change  title okay now this change title we can specify   something or maybe for now let's see let's add  a string as title then in here we're going to   say this title is equal to this small title  that's what that we doing we know it's going   to be an update but you don't want to set it  here we want to make it a static maybe you can   add something maybe future so let's set it as  a method that we can call and I'm passing the   parameter save that let's go to the homepage and  as soon as we click on this edit product clicked   that is a method in here the first in here it is  let's change so let's say change the form title to update product you can even add name to  it isn't it good now um so here we're going   to call this as dialogue component do change  title then pass in the title and that's going   to be an update as as you do that it's going  to overwrite the default one that is the ad   that we set here it's going to overwrite this  and I'll set the current one to the up soon   as this also get changes it also notify in  here and definitely we're going to have it   set let's find this out and see so click  on this edit oh we haven't shown the the   dialog so that's why we not seeing anything  let's go back okay so in this form we have   to call this method show dialogue so in here  let's grab this and after we change the title   let's make this as notable down here let's say  a wait then show this save that and now let's say so edit this so see now we have it shown and  I can check the title update product beautifully   done I believe you're on the same track as I am  congrats let's move on so as we in here let to do   here is populate the current value over here  and I'll send it to the the product model so   we can do it in a simple way we have to do that  before we show isn't it we're going to show and   I'll wait before the data com in we don't want  to do that okay before the the the the dialog   box shows the data is ready it's ready already  yeah it is ready already Okay so let's see now   this what we're going to do you know we have  this list of product and that is what we are   using right to fill this product parameter so we  can say that whatever thing that we have in this   product coming in here Please assign it to this  product so say this and I believe this must be an   incoming because let's me this incoming okay so a  differentiate and so we see which one you talking   about and which one are we using and Etc so set  this the incoming one a very simple one so that's   all save it and now let's check it out and see  as soon as I click on edit we see I'm going to   have the product here right now I can click on one  one one one one z z z z z z but soon as I click on   Save see what happen nothing happened because we  are not saving it the reason is we say that if the   name is already found in the database or this  the the the list make sure you do not save it   but we are checking if the name is not now that  is save it isn't it but here we are updating so   how do we update we first have to check here if  this incoming product. ID if it is greater than   zero it means it has a data already then we need  to update it by the end of the day let's return   it so we won't skip or we skip the down one so  here this is going to be for update okay how   do I put it let me put on top here as an update  product and at the down here is going to be add product okay good and now we have the return  type here so it means that after it gets to   this this this won't be executed this would  execute if only this is false okay now here   we going to do the same but first of all we  have to check and see if the ID is is found   it is good Pac to see to check that although  it will definitely be found because we click   on the list and the list is coming with an ID  but it is good to check if it is there okay so   to do that I'm going to just grab this simple  code I think it's four four lines of code and   I past it here so see we are checking for the  ID if it is there if it is not then return but   in case it is not then check the name so you  see here we track and I we check the name in   here all right then we display message as well  what product updated then we're going to clear   product container okay because this product has  the data that we updating from this product this   we have to clear it and now when you go to the  Chart component it also has the same product   it is receiving we also want to clear it the  reason why we are clearing here is because we   using this a static list if we don't clear  it must get yourself confused and maybe to   cause some issue in here so you want to skape  any issue at all that is why we need to clear that so let's save it and now let's  see save all go to the Home tab and   I'll save this as well and now  let's see if this is going to work now let's give a try so add product product one let's add product you okay so let's close it and if I click  on edit I can see I have it over here so   prod 10 and now here zero click on Save  and you can see yes has been saved let's   edit it and see so product 22 and zero  save it and that is it all done now it's   are left with a delete so you see we are  performing crowd operation here with this   dialog box isn't it so if I click on delete  what should happen let's have a look with that so let's minimize this and now here you  see we have this the delete so if I click on   delete you see I'm going to receive this as a  payload or parameter from the list or from the   method in here as delayed product clicked now  in here am I going to do or what can we do you   and I what can we do we can just grab this and I  assign it to this product isn't it and now display   okay so before that we want to use uh you want to  make a confirmation I you want to delay this okay   so let's use the same dialog Bo to check um the  confirmation so first of all let's go to the log   component and in here I want us to create these  two properties known as a Boolean expression we   can use to handle that so on top here let's  put them here show main content and I'll show   confirmation content initial value for this is  true and this is false now in order to do that   I'm going to set some State here and down here  what we have after the edit form okay you want   to skip everything and now this is going to be  for a confirmation are you sure you want to do   this then we're going to have um button known as a  confirm delate we're going to pass in a parameter   of true and now no it's you're going to pass in  the parameter of force but here we not going to   pass in force because going to count from this  form so passing that and that is all now let's   see how do you handle this as well we can we can  handle that by using so let me just use a close   parenthesis here and now in here on top before  this okay we want to handle at if then let's   close one of these control KD we can format it and  let's use this confirm so this is a confirm show   confirmation content and this a show main content  so you want to hide this and Theo this hide one   show one okay yeah so if you are confirming you  going to hide this and I'll show this but if you   adding or updating then hide this and I'll show  that so see you're using one dialog for this two   for this three aspect edit add and delete okay  so we have a method known as confirm delate you   have to pass in through as a parameter so in  that we can handle that in here let's confirm   theate product and down here we can do that from  here maybe down here will be okay so confirm show   confirm dialogue and that is what we no this not  this is not what we are talking about we want to   have the next one and that will be confirm this  method then this we're going to talk about this   later on okay so for now let's maintain it and  I put this here Che take note we are having a   parameter and this an event call back here the  return typ is void empty they're just making   an an an empty voice hello is everyone there do  this for me you're not passing anything so we say   handle confirm delay event and I will check it  is coming with a brilant expression here we're   checking the response if it is true then please  do this for me so I wait handle this confirmed   delay down evoke it so call it broadcast it to  any component which are subscrib or which has   this as a parent or as a child okay so and we  have a method known as low default so what is   low default it is setting up the property that  we set to the normal one so foral and through   show main content here it is a loow default it's  what foral and now show confirmation content here   is true that is a low default okay so in here  now let's say this supposed to be we have it   set show confirmation dialogue and we are calling  this so show meain content to false and I'll show   confirmation content to true you know when you  check the normal site here show main content   is going to be true and now this is going to  be false so here we are we are turn it upside   down check it this is true this is false okay now  let's save this and once you have this invoked it   you have to subscribe to wait in there to check  if the out coming definitely it's going to be   true because if it is false you're not even  subscribing at all check here you are saying   you subscribe if it is only true we invoke it  if it is only true okay let's save this let's   go to the homepage here and here we are we can  handle that from this session so here control k d and let's see so handle confirm delete  and we're going to create the same name   with that with the same method so let's  space in here so control KD we have it   set now let's create a method to handle that  and that going to be here will be so delete product and now we're down here let's uh private  void then handle this and since it is going return   empty here is going to return confirmed okay  so in case it is confirmed what you want to   do let's check the home and we are going to  check so what are we doing here we check if   this product is null now this product is going  to contain the current one which is which has   been displayed in the form okay so we check again  if it is n then we're going to return but in case   it is not definitely not going to be null but you  know for good practice we're going to check to re   check check if it is a now then return but in case  it is not then with the list that we have in here   remove the current one very simple one check it  out this is the list that we have and we have the   current one stored in here so you want to remove  this after removing let's CLE this container so   you see we are clearing the container from this  this is the product list and now maybe this that   container also we want to also clear let's check  if maybe we have some content in it then clear   that as well so that's why we are clearing then  here we want to load the default so what is the   default going to do you know the default when they  come here it is setting this show main content to   first and I'll show confirmation content to True  okay so it's going to just clear everything for   us now let's see so if I click on this but we  haven't implemented one when you check the home   we have this delete clicked so where when it is  Click what are going to do we want to set the   incoming property here the model to the list that  we have already that is the the list of this that   we have what is it have you seen it yeah this  one okay we set it to it and that's what we are   doing so product is equal to this incoming product  let's change this to incoming product then we are   going to show confirmation dialogue so we want to  show it so show confirm dialogue then we're going   to show this dialog so what is this show confirm  dialog when you check this dialog component this   is the method it looks like this is the same  as this isn't it so show confirm dialog then   definitely we can call this show confirm dialog  down here even here we can call this here then we   can maybe get rid of this because it is the same  that we are repeating okay so we have it set and   now let's see let's try and see and if there's  any issue then Rectify that so here we have to   call this should confirm dialogue instead of this  then let's save this okay now let's try this and see now let's see if I click on  ADD product let's add product   one so this is amount the reason why  we are not having the old one is you   could see we not having you're not using  database so add let's add product two okay so close this let's edit put that one to 10  let's add zero so this working as well let's go   for delete so delete this I want to delete click  on no nothing happens right so delete are you sure   no nothing happens delete are you sure yes you see  it is off that's right now let's see edit this now   we have are you sure want to do this no you want  to do that again so this must pop up and give us   the content isn't it so let's go back again and  check it out so here once we click that is where   this default must come in so here this default KU  must come in and now here show content is going   to be true and I sure this will be false okay so  this default we copy this save that we go to the   edit so home here and now where we have this edit  after before showing this we make sure that this   is set and that's going to be dialogue component  do show confirming no that is not what that I'm   talking about supposed to be loow default okay  to clear that now let's see so um edit this we   have it set over here maybe let's close it let's  add Maybe let's run it again and see so let's run it all right so let's add um  product and C now we have product one and as you know this is ADD product  so let's add another one we have product two and let's save that we can add one more okay now let's see so let's edit the first one and  now Pro that we have an update and here zero zero   okay so it did not save let's again z0 and now  let's save it so you can see that been saved now   let's um delete this the last one are you sure  want to do this yes delete it now see it is off   click on edit of this we see we have product two  let's add zero let's add zero save it and now we   have it right we can also delete everything yes  yes add and now we can add new one so P1 and save   yes so that is it thank you so much for watching  I believe you enjoyed this video we've seen how   to customize the default dialog HML element  provided by the net the ASP team in in net a   Blazer so I'll put this code at the GitHub and  check the video description I'll put it there   as well thank you so much take care of yourself  and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 8,972

Keywords: DotNet8, Blazor, Authorization, WebDevelopment, AspNetCore, DotNet 8 Blazor, Tutorial, Web Dev Tips, .NET 8 Tutorial, .NET 8, NET 8 Blazor, CRUD operation, Dialog Element, Third party library, Blazor enhancements.NET8Blazor, CRUDoperation, DialogElement, ThirdPartyLibrary, BlazorEnhancements, Microsoft, FullStackWebUI, WebAssembly, ServerSide, Hybrid, BlazorMagic, DotNET8Blazor, BlazorCRUD, BlazorDevelopment, NoThirdPartyLibs, CSharpDev, WebAppInnovation, VSCodeBlazor, SoftwareEngineering, BlazorDialogElement

Id: Iuiy9PfywWM

Length: 60min 37sec (3637 seconds)

Published: Fri Nov 24 2023