.NET Blazor | Create and Validate Form Data with Mud Blazor and Fluent Validation.

Hello friends and everyone welcome back to net  good Hub channel how do you use mad Blazer in   your Blazer either webassembly or Blazer server  application so first first of all there are simple   ways to do it and the components are also are some  interesting and they are easy to integrate in your   application let's have a look you know we have  the link and that is a www.madblazer.com when   you go there you're going to find a whole lot of  documentation of advice and how to integrate this   um packages or how to integrate this components  into your Blazer web server or assembly   application so let's get going first  of all what you have to do here is   we have to press create a Blazer  webassembly project so let's use   blizzard assembly for example here  so let's create a project for that so make sure we launch your visual studio  now you can see we have a found new blizzard   assembly we choose that and now here  it is demo so let me give it a name you can see the name is too long and that  is because we are going to use some two   components here aside from using the matte  Blazer we want to use also fluent vibrator   divided our form and that is what you want  to do first so let's click on next to get our   project created choose the freeway version  of 7.0 and I will get this project created so after this project has been created what is  the first thing to do is we have to install some   package because we want to check the documentation  you can see we have the steps over here that is   under installation so we have to install this  um the laser that's a matte Blazer over here the   first thing is this is a template and we want to  install this so let's grab this and we go back to   our project right click on the go to dependencies  and now let's add immigrate package over here   and let's install our last spaces under the  bronze tab let's paste our matte Blazer foreign so that is this one and what you do here is we  have to install this package into application   and that is all so after installing this package  we have to now register this or configure this by   adding something in the program.cs file let's  have a look at it so aside from that we have   to import this into our result.import file or  import that Razer so let's apply that accept it   and now you're good to go so let's go back to  solution and now you can see we have an import   open it and let's import this here so after  doing that let's see the next step that we   can also follow we have to add the script  to that is CSS reference so let's go to   our index to go to WWE now see we have  our index.html now let's paste this here   save that and the next step to move here is to  add our JavaScript so you put that beneath our   page and that is the same page as you can see  from here you paste that and we save it now we   are good to go what is the next thing to do  we have to add this reference to visualize   the project so let's go to program.cs file  and now add this so you know these are the   basic settings that you need to do before you  can use this component of mad Blazer okay so   now we are done with everything we are ready  to use now let's explore so you want to first   use an app bar and that's an app bar here you  see very nicely designed you can see we have   a lot over here we're going to just use one  one of this so let's just grab the first one and let's go to so let's go to our project  and now here where we have our solution as   plug you see we have this navbar go to pages and  even when you go to share because you have this   nav bar so this now but we don't want this  now bar so we can decide to clear all this now let's click this rather and then  paste this matte Blazer here the app bar   so after creating this this is what we're  going to do we can decide to change the name   to app bar instead so let's say this is up all right so once you're done with this  let's see something let's go back to   the main layout and now in here we can  decide to collect everything and leave   this body here so let's do something  like we have this we have our main here and inside this Main you see we have  this and let's paste this up bar so   so that is an ABBA we can paste This Here and  Now beneath we can decide to add our body tag so   that is your body this works so when  you run this let's see what we have now all right so you can see that we have  our app bar but the background is set   off last second so let's go back  again now inside our index you can   see we have this bootstrap here  so let's comment this bootstrap now save this and let's check so  this is our page and actually it   is now reloading and we still have  that now let's do it again and see so the reason why we are not getting the the  color here it is when you check the documentation   after adding this we have to add this to you  that's a theme so here it is saying that add   the following component to your main layer that  razor nodes okay so note that the team provider   is essential for this now to do this this is  what you have to do so we're going to copy this   now the team provider and also this my dialog  box or direct provider and this snack and   Etc so to do that you just have to  just go in there and grab all this so   you can just grab this we go back to the  main layout and this is the main layout so this main layout and we have to paste in here  so here save that and now let's go back and check   all right so see we have our app bar here now  with this this button that is when we have a   sidebar and we can decide to implement that but  for now you're not having a sidebar here so you   can just go in there and now take that off so to  do that go to the abba.razer and as you can see   from here we have this indicator that is a matte  icon so here you can decide to um get this off and   I want to save this again check you see it is  it is off now now let's add some menis uh some   menus or some links over here for registration  because you want to click on to navigate your   registration page so let's go back again now in  here let's see do we have navigation menus let's   show you that pen yes so here we have a long  one but I just want to have links so there's a   link as you can see right click on this and now  go back to open base and select this this out   so when this page loads you see we have a lot  of links over here and these are the links that   we can actually use this is a default you can  see we have the body type 2 and Etc so let's   pick just the default one and now let's go to  application so in here let's just paste it inside   this okay so you can see we have a default  one and maybe this is referring to the home   so you save that and as you can see you  want to check you see we have the home   button it is buttoned but we are not seeing the  icon itself let's say um go back again and you   know here we have to specify test let's see if you  can have um test specified if not you go back to   the documentation and I can see from here we have  to pass in the name in here in between okay so   instead of getting or finding the test attribute  we can decide to pass in this um home here and   that is what's going to display it there now with  this let's check the color because when you check   this the color is blue already so you can see  from here that the app bar has blue color and   when you check the link to the link also has blue  colors you can see from here that is default one   so we can specify the color for this and let's see  if we can have a color so let's see let's go to   the page again and now here we can have color so color is equal to then we can have in  Color Dots now let's see do we have white   so we have a success inherit here is going to  be the white one so we save that and that is   what we see now you see we have this this home  now you can also add one more and that's going   to be for registration so in here after you  see we have this uh spacer and now this is   GitHub so instead of using this icons you  can use this registration here so let's   take off this off and now you don't want any icon  so you want to have a test another reference yeah it's gonna be under registration so  registration and let's have the test in here okay so it doesn't a mod icon button you you don't  want the button you want just a link so you can   just do that and I'll set here to registration or  register and I reset the link here to registration okay now let's save this and let's check it up  so you can see how the register here okay this   you have this register now if I click on register  it does navigate ask you this page so let's have a   look or let's create that component quick so we  do that um in here let's create a Pages we have   this counter so we can turn this counter to your  registration so let's stop this and now in here let's add this to register or even registration and that  is a file name and now when you   come here you want to set the route to register so let's find this now if I click on this register button it  doesn't navigate me to your registration   page and now here this registration right so it  has to be register so let's make a change with   that now here it is register so let's go to our  app bar and now here we say register that's it   let's see yes so let's go back and now let's click on it so yeah so  we are in here and that is it so let's   install one component and that's one package  I'm going to use for validation I'm going to   teach you the the default way of validating  almost you have the trade types you can use   um that is the input one you can use the matte  Blazer one and you can also use another package   so let's try to install that package here so I  click on dependencies and a list of that go to   get packages and let's install fluent fly  data so here and we have to install fluent so let's even have access to this package and  that's the influent validation let's install this and that is what we're going to use  for our validation so um apply this okay so I saved now installed now the  next thing to do here is let's create   our registration form so when you go to the  matte Blazer component you see we have form here   form is around this place that the form input  and like you see we have this grid hidden and   Etc so if you open it over here you have this nice  form here and maybe you can decide to use any of   this form that you want now if you want to check  here because we have the form and you have it by   DC message so if you want to copy it you can  just grab all this here you copy all of these   and I go back to the page and I paste it over  there I'm going to have exactly what you have   here but this time I do want to do that you want  to just create our own and I have a validation   system so to do that let's see let's grab this  form so yeah you have to get this mad grid and   I can use all of this to have access to the form  another form enter you can see we have this button   we have all these buttons so let's say let's  grab this then we're gonna make a change so let's grab this now let's go back to our  counter page and that is where we have our   registration so in here let's paste this okay so  you paste this over here and now I can decide to   increase the size a little bit now I could  see that from here we have this let's do so   Ctrl kdls format as well okay now what you have to  do here is as you can see from here we have a test   field we have a mattress field okay and we have  this you see we have this division that we have   here now you see it is referring to a form and we  are not having the form here yet and also we need   these errors to bind these two and as you can see  from here we have this as a validation message so   let's work on this want to also waste you enable  this or to simplify this you can decide to let's   get rid of all this they're going to start  from um scratch so you know we have to first   create our model so let's go in then and create  a registration model so we create a folder here so we add a new folder and now this  folder I'm going to name it as models so this models let's create a registration model and we say there's a registration model so in this registration model we want to have  actually let's say name so you want to have so string and now here is  going to be name let's have email maybe not going to have email address  instead so email we can have the next one as   password the last one has maybe a confirmed  password so a string and that is confirm password so this is what I'm going  to use for the registration okay   now when we come back to this registration  form we're gonna first use math card   so you can use math card now with this math card  you can specify the weight because it's going   to spend across the whole page and unless  specify the weight here so we can do that by specifying the weight as maybe 500 or   yeah 500 PX for pixels and now inside  here we can use math form so math form   and now with this smart form you need some model  so for us to get that model let's come down here   and I initialize the model down here so at code  then we can talk about our registration model   registration model then so let's use this and now we can talk  about let's say model is equal to new   okay so now we've called this registration  model and now in here we can refer this to us can have a property model as they can pass in this  model okay now aside from that let's come in here   and unless I have Mad Card content so mad card you  can have content and now with its content let's   first have a math test field so math test field  and that is this one so let's bind this bind value okay so we have this math test field and now  bind value we can refer to US models dot name   okay so once you have this  you can specify the next one   so why do you have this we have matcat  content and matka Fields or test field   yeah so we have it written twice let's  take one off okay so now we have this we   can specify some few properties here and you  know for this this month field we can have   another property as so we can expand this and  you're gonna have four over here and now this   let's use column method which  points you this model dot name   okay now let's use another method  another property called immediate so we set this to true so that is the  validation process you on it and we   are setting this to to true I believe this  is supposed to be in double quotes like that okay so let me put all of this on one  line so we can actually see it well so now we have this when you save  this and I refresh on the screen   let's see what we have so we can make a  duplicate of this so we can go it faster so click on this button register and  now we have this test box that's the   text box here so let's put it to the middle  and you can do that by specifying this grid   maybe you can do something like so Dave they're gonna have class so MD six they can have something of um offsets three then in here let's paste this so when we save  that let's say you're going to push to the middle   and install that register that is where we are now let's check this again so in here let's specify this class row wow so you know I have forgotten that  here we have to use a matte laser on   classier so instead of this one is in this  column md6 you can do something like m a so let's use ms6 and that's a d Flex and justify a center so that's the file Center I think so and let's let's get to that  yeah so we are in the middle now okay so   now let's let's have let's grab this so we  have the first one that's the math content   and in that we can just make a copy of this we  have the username last couple of days we have   email password and confirm password  so here is going to be email then password and confirm password so you see with just few  code you can see we have all that we need you   save that and I want to check here let's wait  for this to refresh this is everything so I so save this okay so we have it where displayed well but we are   not having label so let's get into  that and the labels can be assigned   here so in between let's you see we have  label and now this is confirm password and here it is password and here it is email address and I have the last one as true name so label save that and when we refresh  it I believe it's going to work so stop this and I write this again so register yeah as you can see we have the forms  over here now the next thing that we can do here   as you can see we can increase the the side the  bottom and also what we check this we want to   add something like password because  if I type in here you see the test   okay so let's let's do that so here  it is name here it is email address and now this is password and on this confirm password confirm password we save that and in  here when we check this password and   confirm password you can specify this  input type so input mode then let's have at least supposed to be input type not  input mode so let's create it and that is   a input type and here we say input type dot  password so we can just grab this from here and now we do that we paste it over here on  the same line now when you come to this email   instead of this password you can just take this  and I will say this is email address now when you   have phone number let's see when you add another  one so let's let's go to the registration model   and now let's add something like phone number  so this is integer and that is um phone number so when you save this let's go back to  registration and let's try to get one so we're done here when we paste this oh so I didn't copy this let me do it again now  if you place this here and now here is going to be   phone because you have to reform  and here you can just type in   so contact number you can just put in over there   and that is it so here with email model dot form  number and now here model dot edit model dots form all right you save this and it is let's  open it and let's see this one hasn't   taken effect so you can do that you can  restart this and it's going to work like   that okay so we are done with creating  a simple form as you can see from here   now the lesson that we can do is very simple  we want to perform validation so let's see so we first have to go for button now  I want to check the documentation you   have button to right here and  these are the type of button   that we can use secondly we have the  secondary so we can just grab this   and now with this but you can see we have a lot  that we can actually use for all these are types   of button that you can use so this is a long one  so let's maintain what we copied so down here we specify or replace it here so we  save that and now here it is register the color here secondary and  that's what we want to use so   register and you see we have this this  here but I know when we have this we have   to specify you have to put it down here so  it won't start as you can see from this so   we can do something like Auto or class ml  Auto let's do it here so for this class and now when you take that  it's asked to move small but I know with the button Mad Card had its own  place to put it and that's called the math card   action so MAT card action and that is this so  instead of this just have to create this and now   paste this inside this action um tag here okay and  let's see it's supposed to come after the content yeah so let's close this so you save that and I can see we have the button  display that's the register button over here now   when I click on this button I want to perform this  registration if this button were support where to   be submit in case we can have a type here let's  say you can see we have a type okay so button type   so we had this button type and now we  can have this button type dot or type   dot let's specify that if we can have  this so type dot can we have submit   okay so let's see and we can put in the submit so  button type dot submit now if I if I do this then   I can just submit this form as you  can see from here I can submit this   form but before submitting you know  when you come here you can specify   this you know we are submitting this so here you  can talk about you can add validation um rules and   data annotation so inside this form let's try and  see if you can add this data annotations or data   last video time Rotation by data and  now it is on top here and we have to   also add validation summary so vibration  summary and you have to also add this   now if I click on this what I have to do here is  go to registration model and on top here you have   to add this required attribute so it is a required  you can just copy and now place it across all the   properties here so you want to set all of  them required you don't want to leave any   so save that now let's see if I click on this  they still have the same issue although it is   submit by it is submitting this the  secondary register okay so click on   register next we have this pop-up down here and it  is an Android Error arcade so let's go to the page   here and I'll try to save this save that and now  reload it again and see if this method is going to   work if not then we're going to use and that one  that has been specified inside the content page now if I click on this register if I click on  you can see we even have a problem here so it   means you have to search for another way to make  that work now when you sign the documentation and   go to the forms you can see we can talk about  validations here and that is what as you can   see from here you can specify this but I'm not  sure this is going to help because anytime that   you want to have this one unless you copy this no  you want to create your own validation message or   addition rule so to do that that is why we install  this fluent validation so let's go in there   and now what you can do from here is we  can just copy some code from this angle   let's see from this let's check it up  over here if it's going to be pop up here   so let's create our own model so that's  what I'm going to do I'm going to copy this   so with this required attribute you can just  remove it from the head of each property then let's make a copy of this and now let's create an audition rule for  this registration model so we create a new   item yes or add a class and  now here it is registration model then validation so in here we are going to specify some few things  here and that is the first thing is the rule   so let's have our method created and that is our Constructor  so inside our Constructor the package that   we installed that is a fluent validation it  enables us to use rule and that is this roof for   so rule four now with this we are going to specify  each property so we can paste this property here   that's what we copied and now control period  let's use the package that we installed so let's check up first if the package  is found under the packages like see we   had this fluent by addition and let's see  so rule 4 and we must have access to this   package if not then we have to introduce  it ourselves so you put that on top here using so frequential application we do that and now you  see we have this rule four now with this rule four   we are going to specify some key values such as  x max 2x Dot and now here we are referring to   name so you can pass in them let's see the reason  why we are still not getting um this whoa so I got   it the reason why is we have today has inherit  from an abstract class and that is an abstract   and now after my data then you're passing  our model here so aside from that because   you're gonna have this rule four and you're  going to specify this name so x max you this   x dot like you see we you must have name from  this model so it is not registration validation   rather it's going to be registration  model okay so you can now have access to   this name so x max 2 x dot it must have name  and with this we can have access to dots you   can see we have a lot not empty not equal  not now so not empty and now with this we   are good to go so you can just have to copy  this and I'll paste it four or five times   I think so so you can use copy this as email copy  this as password open this ask confirm password   and I have the last one that  we need to grab this I think   for phone number right when we take a resourcing  model we added phone number so we can just go go   grab that and now any email and phone number  so there are not empty so it means you have   to provide values for each for hu work now  aside from that we can add a lot over here   now this on has its own message display  but when it comes to this confirm password   we have we can't it's not empty because you want  to make sure it sync with the the main or the   original password so in such case after adding  this not empty we can also add something like   um some messages this has a lot of messages  default message as soon as you do wait   you receive with message you can specify  any message that you want by default   one it's gonna have its own message so  let's maintain and see the default one   now when we come to the password to here we touch  it on message that is going to be displayed but   you can also specify some few parameters  here and the first one is you can use Dot minimum you must solve this minimum length so we  can specify minimum length of maybe five you see   and with that we can specify with message so all  of these you can see you can specify with message   with name and Etc let's maintain this with minimum  yes so I want to put this on a line I want to have   a simple validation and you want to maintain  the default one and you can see we can also   talk about maximum length and let's say 10. okay  now when it comes to we can also specify a lot so that matches and now this matches  we can specify something like um here I have to type all this so you want to  check from A to Z that is from A to Z and that's   going to be for uppercase okay now uppercase we  have to add Plus at the end you make sure don't   forget that and also you can also add without  message or we can just grab this dot match and   also we can just make a copy of this again  and I'll paste this here by this time round   it's not going to be Capital it's going to be one  lower case so it means you have to mix all these   cases you can't just be using only one you have to  make sure and now zero to nine we can do the same   thing so dot math case and now here it is zero to  nine so zero two nine you see and also we can use   special car test too so let's replace that and  now in here with this special characters it's   going to take time because the other I have to  type all right so let's see now I'm going to say   that first of all you're going to have this symbol  AS at and you're gonna have this exclamation mark   also you're gonna have this question mark You're  gonna have um is it dots okay so all these are   special characters that you can use and you can  use the last one you can use star starts you   now let's see yeah so we have to use all this  now when we come to the the last one that is   the confirmation message now the confirmation  pass where the confirm password we want to   say it is not equal and it is also equal  to no it is not empty and it is equal to   that you can specify here you can use  a discard okay because you don't need   and Records you or this marks you this  card Dot and I can pass in this password   this also has its own message but all the  time you can see we can just override that   and I'll specify your own message now let's  maintain this so once we have this message set   this validation rule let's copy this let's go back  to our resisting model so our registration page   and as we did for this  let's do the same thing here so by this in rules then here we can specify let's create something like this then records you new okay so once we specify  this it means we can now have access to our   addition method but you know you know what in  this we have to copy some code from various mad   Blazer and that is this code so when you go  to the view source code of any form you see   this is a form that we are using so let's see  that is a form here so when you go back to this   source code and I'll try to go down you're  gonna see that right AC message over there   so you can just go in there and now grab that  that is for matte Blazer so that is this one   just have to grab this only this one and I come  to the page and uh we have to yeah it must be   here so we are calling this method and I think  this will work now so good now let's run this whoa so it is saying that this other  model could not be found and do you   have any other model wow so that's  going to be the registration model so   you have to make this change here you know  this method is was meant by the mud Blazer   so you have to go in there and grab this method of  validation and now you can use it and you move on all right so let's click on this register  button and we are in here so if actually   if I decide to type in a name something like  this and now if I go back because I have this   yeah so name must be must not be empty and  if I do the same thing to email and I'll go   away now let's see so here this supposed to  be the email section and let's see for this   it shouldn't be empty okay and if we accept  this contact number and I go yeah it should   be empty and now these two shouldn't be empty  okay also this will be empty so if you have   all these red lines here but I know when I  type in email and I do not add this at symbol you must have this ad symbol over here you see  from here it has so it means you can create this   here let's let's see how to work on that so let's  go to the model and try to initialize or add this   required or email attribute here so let's add this  email attribute email address and now here we have   password Etc yeah so you want to keep that and now  this phone number so for only email I want to do   is I want to make that check when you go back here  and now let's try to write in a and a movie we   could see from here a field the email field is not  a valid email address if I try and type everything   you see it tells you that the email must not be  empty so in this case you see Osa is now working   and why this is working now so yeah you can decide  to add a title here let's do it quick so let's see   how you can do that you can add something like um  a chip or Etc so let's see now when you go back   to the page here on top of this registration  page on top here we can add something like so my chip and now let's see if we  can talk about registration page so account registration page let's add that now  save this and I want to check the page do you   have it yeah so you have it right here so it has  to move it to the middle and let's do that so when   you start putting the right here you can just put  it if you put it inside this form this card and   now after putting this into this card let's see  the the display it has to be inside this card but   you want to maybe set the color of this so let's  see if we can have you can we have test color so let's see here if we have color okay then you have color dot so color dots  then you want to have something like primary   okay and maybe you can have this mb6 to the middle   let's see so let's edit this  refresh it click on this button okay so you can see we have this account  registration page so now I can now go in   there and I'll try to fill in your account or  passing something and now move on that is it   for this video I believe you guys enjoyed  it as I enjoyed it with you as well thank   you so much please subscribe to the channel  give me a thumbs up if you think what I did   you you are created or you like what I'm doing  okay and I'm going to explore more because we   have a lot of components in Mad Blazer we  have seen few Sim we have 10 work we have   um Blazer eyes we have a lot of components  and I'll try as much as possible to go through   them one after the other so that you may have at  least some basic knowledge in implementing them   in your application thank you and take care  of yourself and I'll catch you again in the

Channel: Netcode-Hub

Views: 917

Keywords: asp.net core, Registration, send email using mailkit, mime, controller, service, email service, web api, SMTP, pagination, EFCore 7, skip(), scalffold, scaffolding, migration, database migration, creating models, fileupload, file download, blob, javascript, crud, sqlite, ef 7, authentication, blazot, client-side, jwt, token, blazor authentication, role-based, assign-role, assign role on button click, quickgrid, sorting, filtering, convert image, base64string, format, validate form, mudblazor

Id: ydymGmtFeqA

Length: 45min 47sec (2747 seconds)

Published: Tue Aug 22 2023