Mastering .NET 8 Blazor : Integrate Modal Dialog in your .NET 8 Blazor Web Application Easily.

Hello friends and everyone welcome back to net  code Hub channel in this video I'm going to show   you the easiest way to integrate Moda into your  application Moda is very important when you want   to confirm um information from the user you  want to add an information to database or you   want to perform um any different operation you  can use Moda to do it so instead of you creating   or designing your form on the component you can  now use model to handle the form and that makes   it great it improves the user experience as  well in this video I'm going to show you the   simplest way to integrate it I have one package  created and actually I've uploaded it to nga.org   and that's what we're going to use today in  that package we can customize the content we   can customize the buttons as well and now  do anything that you want it is flexible   let's have a look on how to use this model so  I'm going to create blizzard web app. net 8   actually you can use this in the interactive  server interactive assembly or the auto okay   so let's say this is demo this is Blazer web app  demo I I have demo already so I'm going to say okay so maybe I'm done with this I'm going to  put this get up so check the video description   if you want to grab this you can have it  over there so click on next and let's get   this project created as you know 8.0 and the  interactive server that's the r mod I'm going   to use here so the app is created I have already  published one um package that is a f upload and   you can it can help you to upload file with  progress bar okay so I've also made a video   on that you can check this video description and  you're going to find it in there these packages   are there to make our work easier yeah okay so  let's see now let's go to solution right click   on dependencies we going to add this package and  now in here we go to the browse tab you type in   net code so all packages which have been pushed  will will be available here don't forget to add   a hub it's very important okay so let's wait  now see I have three packages now I have the   extension and that is for the download and  I have the M that's what I'm going to use   today I have the file upload to also upload  file with progress by this PL you can see we   want to focus on this I've made video on these  three so I'll put them in this video description   you can check and I'll know how to use them  very simple easy steps then you can integrate   it in your Blazer application now let's go to  what we need today we're going to install this package so while this package has been installed  successfully we go to the solution we go to ww   root folder not a WWE folder go to the components  yes and you can see we have the app. Razer in that   we going to add um a script so we can duplicate  this and instead of the frame this is going to   be content so we're going to say content slash  and with this slash we're going to navigate to   the Raza class Library name so that's a package  name and it is net code net Cod hub. packages do component modal slash then mod. JS so that is where the file  is found okay so we have to NE um reference like   this and once you done boom that is it let's  go to the component so we going to navigate to   the pages we go to homepage and let's make this  as interactive server it's very important so at   render mode and we say this is interactive server  let's also include the name space sot packages   dot component dot model and in here we can now go  ahead and so first of all let's see how to use the   confirmation dialogue okay so let's say you have  in a database Bas you having a table that you want   to display you want to confirm before deleting  how can you do that that's what we're going to   do okay so let's see first you're going to add  this confirmation and now with this confirmation   component it has some properties that we need  to it has action it has bootstrap class it has   um custom style as a CSS style it also has this  instruction that is a string type that you can   pass on to show on the screen screen so I did  not want to have a static um style not a static   instruction like I just want to do this that's  no much that we know but maybe you can decide to   change a little bit I want to delete should I go  on should I move on do you confirm do you accept   all these are the interaction that you can send as  a message to the user so I made this as a dynamic   that you can passing your own style okay good  so let's have a look now we see the instruction   here we're going to have the same instruction oh  let me copy this you're going to create variable   to handle this for Action we're going to create  varable to handle this and now this action going   to be the response if it is through this going to  pop up or this going to shown so this going to be   the action aside from that we have our bootstrap  classes and now here it takes only bootstrap so   we can pass in something here maybe um let's say  border danger okay so that's a bootstrap class and   now in a custom style maybe you can have width as  maybe 300 pixels yeah so that's a custom style now   in here let's specify the code section and now in  the code section we need to create a property to   handle this and a method to handle the action so  we say this is a property this property is going   to be string and in here we're going to say this  is what instru F and you make sure since a string   type you have to create as a variable else it's  going to be an issue so let's grab also this let's   have void rep paste this and that is all you see  so this what that we need to do now this is going   to return as soon as this method is being invoked  it tells you that the user clicked on confirm   let's run this and check it out so with this we're  going to pass in a custom test in here so do you agree okay so do you agree or maybe confirm so um confirm for maybe it  could be easer deletion well uh you can   pass in anything okay now let's run this  I'm going to put a break point here as   soon as this method is H it means the is  has confirmed let's run this and check it out oh I nearly forgot one thing you can see  we are not having any button to show that you   can see have you seen it so while it is  running let's have our reference tab in   here because you need to show this so let's  you can have a ref and now we can just grab this let's p as a confirmation creting a reference  of it maybe let me put it on this line to make it readable I believe you love this  right good so we can just copy this in here then we can just copy also  this to assign it then let's have button so this button you can have a class such  as maybe a BTN BTN danger and we can have maybe at unclick so this on click we going to  have um show confirmation so I can   just pass in here show confirmation you  see so now with this we have to create   a method definition for this we say this is  right show confirmation and in such case we   are saying that confirmation component  dot show so that is it very simple one   okay now this all we have let's save this and  now let's rerun this application and check it out as you can see you see it is ready now we  have show confirmation let me increase it now   let's click on this ENT check it out so as  soon as I click on it tells you confirm for   usul you see this is a custom start that you  pass on and also we have close if I click on   this close nothing happen but let's see now I  confirm so you can see the method has invoked   and now let's check it out from the code so we  put a breako in here let's do it here this is a   break point let's go back again and I hit on  this confirm you can see now it is hit so so   if it is hit then we can um take it the value in  here and I perform database operation so here we   can uh perform um database operation so such  as delete okay so we have this way so that's   simple way to uh integrate this and now use it  in your application you can see this very simple   right yes so you can just show that confirm it  gets confirmed deleted you have to just can just   also close this as well okay that is the first  one that is this um confirmation if you actually   want to have the confirmation set up only yes you  can do this else you can also uh format or create   your own custom style or custom component I made  that possible let's have a look on how to also use   this the next one the next component I'm going  to talk about here is the muda so this is the MAA and now this model also have some  property that need to provide you have   an actions in here and then this is  actions we have bootstrap classes   at the same time so let's say this is  so border success we also have custom style and in here we're going to say maybe  weight we can have weight as maybe um 500   pixel okay so that's the weight that you're  going to have or let's say 400 so aside from   this let's see what we have again we have button  template we have content template we have open   and our open change so these are event that  we going to subscribe to so that as soon as   we click on it we can have um this let me bring  it here and let's arrange it nicely so now this   is what we have maybe I can put it something  like this you see good so since we're going to   have this template in here we're going to  create our own let's open it um like what   we've done here so we can put in our template  okay now in template we have two template that   we can work with we have content template so  this is the content um template so we have   content contents oh this supposed to be content  template you can see maybe the next update I'm   going to create I'm going to do it well to be  cont content template okay so we have content   content for now and let's say aside from that  we can also have button template so we have   button template so this is going to be for the  content and this is going to be for your button okay so we going to have our bind open so we're  going to have a property here and we're going to   attach it to this so that is a bind open we're  going to have a property as as open aside from   that we going to have maybe let's Dis Let's  display something in this content actually   you can actually put a form or put anything  at all that you want okay let's say we want   to display this message so we put as a paragraph  in here inside this content template and that's a   content content okay now aside from that we have a  button template too and our button template we can   also um pass in our buttons you want to have two  buttons in here now this button is going to have   okay and cancel so if I click on okay it means  I want to proceed if I on cancel it means I want   to close it okay so this is what we have then we  have our model closed that's our model closed okay   we have this are because we have not specified  this now let's get going and do that so in order   to handle it the first thing I'm going to do here  is you're going to have a property known as it's   open and it's going to be a bullan expression so  let's put it on top here so it's open we're going   to assign it to this is open now out of this  action we're going to have um the same method   to handle that so maybe we can not actually can  make it to be specific we can do buttons actions   I think uh or handle yeah let's make it handle  instead so let's handle this accent so here   is going to be handled that's the name that I'm  giving to this and now in that handle we want to set or maybe I want to use the name which is more  readable understandable as well so let's make it   this button actions okay so now this Buton actions  we can have a method down here and in this we're   going to check the values of this buttons check  it out you can see this button here is a button   success it has a value of okay this has the value  of cancel so you're going to check the value and   know which button they user clicked you see is  very simple right so this meic you can customize   the uh this buttons here and I'll fix in your  own values and I would change the button names   very simple okay so here let's see I'm going  to P this in here and you know Buton action so   that the M now we talking about in here is an  event where passing or returns a string so we   going to accept the string in here as an action  now in this action we're going to check if this   action is equal to okay do something if it's  equal to cancel do something okay we want to   display the content here so let's create um a  variable here to handle the response and also   we can create this a variable to also handle  the confirm response from the confirmation   so we can test the two aside from that let's  have a button so we can um display and show   this open model so the model and the two model  confirmation and see we have one button in here   so maybe we can add another one let me P this  here and show confirmation we have it here so   we're going to remove this and now we have this  open model so open mod it is you're going to   open this mod that we created the customized  mod that we have created so how are you going   to do that is a matter of setting this is mod  to through remember that here we have this is   moda set so when it set to through it's going  to um pop this model up so let's do it down here so open Moda set this through and that  is all so this is a customized this is a   custom model and we have this confirmation  model so any one that you want to use you   want to use this to accept or if you  want to design form use this model if   you just if you want only confirmation  use confirmation model so I provided   two model or two component that you can use  in your application now once you have this   let's let's have a look so I'm going to save  this let's refresh this up and I'll check it out all right so you can see that you  have the default value so selection uh   oh selection action a selected item  so let's say let's make it selected   action selected action you want to know  which one these are selected so selected action okay so selection action  we have to run this again so let's see all right so now it is open selected action  here this why I want now if I click on show   confirmation youve done this already so now this  get it hit hit that you can retrieve it and now   work with it now open mod to you see the mod is  now open and now this is the custom style that   we provided we set the width we set the Border  in here you can provide it your own custom style   we have two buttons in if I click on okay see  what happened so okay clicked so this what what   I clicked and if I click on this cancel giv a  cancel clicked So based on this when you check   here you can now um process it based on the user  selection or what the user collect you can perform   the duty in here you can also add multiple buttons  here maybe three four five and I what need to do   here is to check using this eils you can check  it over here you can even use switch statement   you also check them um and perform your custom  action that you want to do you can see this is   very simple isn't it yes it is and um this package  is available so try to install this and use this   package anytime anywhere all right so that is it  for this video thank you so much for watching if   you haven't subscribed to this channel then  do that because this channel contains a lot   of informative uh videos for Blazer and other net  Technologies and you're going to love it trust me   I'm going to catch you on the next time till  then take care of yourself and see you again

Channel: Netcode-Hub

Views: 767

Keywords: employee, management, system, database, models, web assembly, .net 8, web, api, .NET 8, API, Develop, jwt, custom auth, Blazor, WebAssembly, user, logout, relationships, implementation, controller, combine, roles, cookie, .net blazor, lazy loading, CSS isolation, css, isolation, loading, optimize, eazor class library, rcl, nugget package, create package, install package, download, nuggert package, upload file in blazor, .net 8 blazor web app, file upload, modal dialog, integrate modal, blazor app

Id: FZMe0Nu7d1c

Length: 19min 57sec (1197 seconds)

Published: Sat Feb 03 2024