MudBlazor 🔥 Form & Validation with Blazor WebAssembly in .NET 6

hey friends patrick god here and you have asked for it and here it is as promised more much blazer we go deep into the edit form this time so as promised also last week we created the edit form and had a tiny look at validation with the default built-in components of blazer webassembly and today we will use all the well not all the but almost all the mud blazer components you can use for an edit form in blazer webassembly and also blazer server actually but i think blazer web assembly is more important here and you also like blazer web assembly more than laser server i think anyways so edit form with mud blazer it is also a little bit of validation stuff you will have a look at the also at the mod table also the simple mud table you will install mod blazer and then in essence replace all the components from last week with now the mod laser component so we will use the input text stuff in essence we will use the text area numeric fields date picker select box radio buttons and the file upload and the checkbox so also a switch then i think these are all the components we are going to use so a bunch of stuff actually and if you like all this and you learned something even then maybe consider clicking the like button thank you very much and maybe you also want to subscribe to my channel this would mean the world to me so thank you very much for that also don't forget to click this bell icon here with that you get a notification when the next video is online and also when you subscribe to my newsletter then you will get these videos here a couple of days earlier in your inbox people like that already so maybe this is also something for you additionally you will get early access to the upcoming.net web developer bootcamp there we will cover the backend of the net web api entity framework secret server and also the front end now with blazer we will put some stuff with that and also have a look at git and scrum and a little bit of devops maybe this is something for you then please consider subscribing to my newsletter and the last thing and then i'm done with the intro thank you so much everybody for all your support the coffees the teas the orange juices the water also very important so thank you very much for that makes it a lot easier to well create these videos here so thank you very much for your support i love you forever guys and now enjoy the tutorial all right now before we start visual studio real quick i rarely do this in my tutorials but i want to encourage you to clone this repository here this is from last week's video the blazer edit form tutorial where i cover blazer edit form the blazer edit form and validations and we will build up on this thing because there's lots of boilerplate code that we would have to write again and i did this already and if you wanna follow this tutorial and write the code with me together with me then i recommend cloning this repository here and then you get the complete edit form in essence done with a default blazer components and bootstrap stuff and then we can use this to well change the the components and use mod blazer instead because what we have to do is we have to install mod blazer first so we do that so this is already some boilerplate stuff we have to do and then we can already use it but otherwise if you would start really from scratch in this modbus tutorial it would be way too long i think to learn all this mudblazer stuff here so if you want to write the code with me again please clone this repository if you don't know this yet you can actually copy this and get a github desktop start this thing and then simply by clicking file clone repository and then enter this url here you can download this thing or clone it change the directory for instance to modblazer edit form tutorial and then you should be good to go and when you have this thing and then open visual studio in this folder or simply the solution file you should be here you should see this project here still called blazer edit form tutorial please bear with me now we're going to change this to much blazer and then i will of course by the end of this video add this to github as well and you can actually already get the complete source code when you scroll down to the video description and click on the github link well first real quick a recap what have we done in the last week's video we added models so we want to use all the built-in components or we wanted to use we wanted to use all the built-in components from blazer we did that and now we want to change all these things and use the corresponding modblazer components instead so we've got a model with an id we've got a name a bio for the text area we've got the birthdate and image which is base64 string but still we will use a file upload component to well display this image then we have a team id and a difficulty id this is for relational stuff meaning we will use radio buttons for the team and also a select box for the difficulty and then the last thing is the checkbox for is ready to fight so these are characters that wanna fight and if you haven't seen last week's video then maybe you will be surprised to see what kind of character this will be then also the difficulty here as a model with an id and a title and also the team idea name and the last thing then already is the characters page and in here then we have as you can see already built a table and also an edit form with all the blazer default built-in components and down here we've got our code in essence we could change that to a code guide file or just leave it as that and here you already see one of the characters this is the first one we will see and i would say let's just start this thing to finish this recap and then you know what this little app is all about and then we move on with mud blazer so i guess this introduction is way shorter than uh the other option where you would have built all that from scratch again so this is our characters page you see a little table here with just the image an id and the name we can click on the edit button and then see all these fields are filled we can choose another file here for instance now this is the image of iron man and we already see the change here so we do not have in this particular case uh you don't have to click the update character button because this is every everything is done locally there is no call to web service whatsoever i just wanted to focus on the complete edit form here on the client in essence and of course we can also create a new character let's say we add id2 yes i know you shouldn't have to add the id manually here but [Music] i think this works for now add an image create character and we see batman here in the table okay so this is done with blazer and bootstrap alone and now we change everything here and use modblazer so the first thing we have to do is of course install mod blazer you come here by simply googling format blazer install on what place installation and then you see this little page here easiest way to do it is using the nuget package manager and then we have to configure some stuff so we will use this page here to configure modblazer and then we are already all set and can use modblazer so first back to our projects right click the client project here and manage you get packages and here we are just searching for modblazer there it is already make sure to choose the browse tab here that's the one not markdown not the theme manager nothing like that we just want to use modblazer with already 700 and 761k downloads so pretty famous stuff except everything and then we just switch between this page here and visual studio first thing is the imports razer there we wanna add much blazer and that's it after that we want to add fonts and style references so let's copy this and back to the index.html this time down here we add this then the script reference now at the bottom as it says here located at the end so down here this is our script and well we could remove the side css but let's just leave it here and now the components these are the ones we need well in essence we need the theme provider this one is essential but the other ones we don't need so it's up to you what you want to add here but let's just go to our main layout here and down here now we just add these three for instance and then we are done we have installed mod blazer and the first thing i want to show you now is the simple table so back to our characters page and let's just close all other tabs and up here now we see this table right now we already did some work with the table header the table rows and so on so we can if you just want to use the design of modblazer switch this thing here so instead of the default table we say mod simple table and there are some parameters we can add here for instance if you want to highlight a row on hover we can do that additionally we can have a striped design and also we can use a little dense design so we save some space here let's also add the component down here so much simple table this i would say we save this thing and of course we want to rebuild and apply the changes and we get an error of course let's have a quick look i forgot something dialog service on top up and there is no registered sure i forgot to add this service here of course don't know why i skipped this but i'm sure you knew that this is coming this error is coming so now here in the program cs let's just add this thing and add the corresponding using directive to save this okay i don't know why this error is now coming but it's just okay now it is working and you can already see the different table here the other table this is now mud blazer of course there are still some spacing things we could do but let's do this one step after another we will change this button here for instance we will also change the image so let's make this smaller and so on but you already see how fast this works if you don't forget to add this service here when you're installing mudblazer right maybe i should take a zip of my coffee and then these errors won't happen anymore but as always it is pretty late again half past nine for me this is this is really late all right so we've got this now covered mud later is installed you see the mod simple table and now let's use a complete new table which is the mud table component first i know this is not the edit form yet but again let's do this one step after another and i think that way you see a bit more of mod blazer and i just think that this is a pretty nice ui component when you're building blazer applications and i'm pretty sure i will also use this with my next update of the blazer ecommerce course and also in the upcoming dot net web developer boot camp and if you're interested in this boot camp don't forget to subscribe to my newsletter because then you will get early access to this thing all right enough with the commercials now we use a mud table and this already looks a little bit different but it's not only a little bit different it's way different actually because we do not use these default html tags these dom elements here we use only modblazer stuff now and this works like that first we have to add our items in our case these are the characters real quick down here in the code block and yes i know some of you already suggested to use a code behind file here you know what let's just let's just do that so we extract this thing i hope it still works now see it here now we've got our characters razor cs file with a partial class and now we see the character and here are the characters right so we've got our list of characters and already added peter parker here it's sad that i've lost the formatting now and i have the scrollbar because of the because of the image yep a lot of way to scroll but actually we would not change anything here in the in this code behind file so now this is a bit smaller well let's let's just see how this goes okay we've got the modblazer much table and again with that now we can set the items these are our characters all right what's happening here with the mud simple oh if jesus okay now all right now this should work and again we've also got the parameters hover striped dense and let me also add one more thing so first these two and then regarding the spacing you can always add other classes css classes here and this thing now is provided by a modblazer itself stands for margin bottom two the two is not the pixels the two is just some kind of units i guess but mb stands for margin bottom so the space below the table is different than when we add this class here after that we use the header content component and here we say mut th first thing is the image then the multi-table header for the id then the name and the last thing would be the button then and this is our header content and then we use a row template like that so no for each nothing like that and then we say mod td with a data label called image this is actually only necessary for the responsive design we will have a look at that if i don't forget this and now what i want to do is we could use the um the image here similar to the old table but we can also use a mod avatar like that and then the image looks a bit regarding the size it looks just better and the image then here is and this is now interesting we use context image right so it's not the character like in the for each well we named it character so it is available as character but here now in the mud table we've got our items and to get the the current character the current item in this table we use the context variable here and use the image property so this is our character with the image and then we've got our image the avatar so now what's the right pronunciation avatar avatar avatar i don't know data label is then the id [Music] with context id let me copy this we've got another one and also another one so now we've got the name here also here and now here this will be the edit button [Music] and let's use another component already the mat icon button so not the mud button that is also available of course we will use that as well but now here i want to use the edit function as you can see here edit character we can go there i hope there is edit character this just means that we will have a look in our list for the same id and so on and then we will fill the edit form so on click will be the edit character with the context i d [Music] all right and because we want to use this parameter we have to use the lambda expression here and after that we want to add an icon and there are lots of icons provided by mudblazer this is really really nice much many more items than with open iconic which is the default icon set of blazer so that's then our icon then we've got the color let's just say color primary you can change this color set of course and the last thing a variant variant filled okay all right this should be it i saved it and now let's already add another button here this will be the mud button then for creating the character again on click we will use create character and call this create new character all right now this may look a bit crazy now because we have several tables several buttons here but you can already see the change right this is the much simple table with all our custom let's say custom default what's the traditional html stuff in essence and here now the mud table this is this little thing here and also you see the two buttons this is the the mud button and this is the other button and what these things do is simply resetting the character to edit as you can see here in the code behind file this is the character and here we just say this is a new character and is new the flag is then set to true okay i hope you get the idea now let me let me just show you what is happening when we remove the class so like that is it rip yep it's rebuilding see that now it's it's about very close to the table don't like that so let's just add this back here and i would say we just remove the old table okay hope this is okay for you and also the button here and now in a couple of seconds we see this looks this looks better right i think it looks better we've got this edit button here nice shadow nice hover effects can click here and then the edit form is filled alright and now we finally after almost half an hour i guess 20 minutes we implement the edit form okay so you see this here right so the old way my old way was to use a div with the label then the actual component of blazer and also here the validation message now we can do this in another way now with mudblazer first thing to well have this a bit more organized is i want to use an mod card and also then the mud card content so the spacing is done for us it just looks a bit better regarding the ui design now the first thing again maybe you've watched the the video of last week if not i know it's total bs when you say that you can edit the id of an entity you would never do that in production of course but since i wanted to use the input number component here well this this just worked so let's do that again and the corresponding mud blazer component now is much numeric field that's the one and the great thing is here with all these form components we can say the label is now the id and while i'm doing this i just remember that i wanted to show you the uh responsive design so when i switch that to my phone to my phone yeah to a phone for instance let me use the pixel maybe you see here now how the table looks we see image id name edit and these are these things here data label image id name and so on right so this is what i wanted to show you just real quick so let's move on with the edit form okay so we've got the mod numeric field with a label and additionally now bind value is the character id don't forget here now the edit form has the character model and also then the unvalid submit function we will use this as well and after that now what we can do is we can also show the validation message parameter for that is in essence exactly the same thing here but we just added directly in this component and then we've got the helper text that we can use for instance let me show you the class here the requirements are that the range is between 1 and the maximum value of the integer type so id has to be 1 minimum has to be the minimum number has to be one so let's just add a helper text like mini mum value is one and that should be it maybe put this in a new line and this is now our numeric field i guess let's save this there it is here you see the difference now this is blazer and bootstrap and this is blazer and mud blazer here you already see the error message so the validation already works as well and i think already it looks pretty nice all right okay this is the helper text nice okay one more thing i want to add real quick just as a side note we are using the edit form here right but there are several ways to do this with mud blazer so when we go to the docs for instance to the components and then form an input and then the form there is well similar to the table actually there's a simple way and well maybe not so simple way i don't know i guess it's still simple but what i wanted to say here is there is also a mud form right so when we have a look at the code here there is a mud form you can use with also the mod text fields that we will use in a second and the mod buttons and so on but if you're used to the edit form already then you can also as we do it here in this tutorial use the edit form and then you have a look at the code here then this is what we are going to do actually we see the edit form with the data annotations validator for the validation then the card this is where i got this from and so on all that stuff and then there's also a last option fluent validation and i know you want to see a tutorial with modblazer and fluent validation and maybe i will do this as well so please stay tuned and if you haven't subscribed yet maybe consider doing it and hitting the like button means a lot to me thank you very much for that so this just as a side note we are using well the way with the edit form and just using then the modblazer components in this edit form of blazer okay now with that out of the way and i hope you're not confused yet let's move on to the input text and instead of the input text we now use the mod text fields okay and this now looks similar to the numeric field in essence so we've got the label with the name we've got bind value with the character come on the name and again regarding validation we can actually just copy this add this here or in the new line and with that now we've got our mod text field so let's have a quick look again there it is this is the name and it is required please give this character a name this is our again custom error message we have added here so we added the uh required attributes if you also want to do that don't forget to add this using directive but i think visual studio will tell you that something is wrong here if you just write down required but in essence this is already how you do validation you go to your model add this attribute here and if you want you can also add a custom error message okay so this is now the name and the last simple thing is the text area so down here now we also add a text field it's in essence the same thing [Music] with the label and the value label now is the bio the value is also the bio and let's format this real quick and the only thing we add now to make this a text area is this parameter lines set this to 2 and with that then we have the text area for the bio see that click edit here dude hanging out in new york city can add some lines and now we've got a scroll bar all right now the next thing is the dates and to make this work we have to change our character because let me have a look here again at the documentation date time where is it the date picker there it is says it here note always use the two-way binding bind date so this is already different to bind to a field of type date time with the question mark so a nullable date time so this is what we have to change here this thing is not nullable yet but now it is and now we can use the component mod date picker so much date picker it is with now again the label birth date for instance like that and we say bind date and this is now the character birth dates okay and with that now we already have our want date picker there it is nice all right it looks a bit different this is the one bootstrap and this is now modblazer all right next is then the radio buttons now these are a bit more complicated similar to the input select here here as you can see we've got the input radio group this is the old way or the other way and we've got a four each now we also use it for each in mud blazer but the components look a bit different of course so let's just start with a radio group so mod radio group it is and we also add a class here for the spacing so margin on the y-axis is a bit bigger and this time it is bind selected option and the selected option here then is the character team id and inside of this component we added for each with the team in the teams collection real quick let's have a look in our code behind we've got our teams and again usually he would use a service for that these are the themes avengers and the justice league and as you can see already we've got also a list of difficulties easy normal and heart who would have guessed okay so back here these are the options and for that now we use mod radio the option then is the team id of the current team we can add a color to make this a bit more fancy again color primary maybe and we want to display the team name and this is then the radio group with the with the radio buttons there it is a bit big maybe so what we can do and we have a look here radio mod radio this is the api documentation let me go here and i think dense and also the sizes size size small so for instance we can say size is size small a little different and dance true ah i don't like that but maybe like that okay and what happens if we select justice league and then go to edit avengers is selected great so this works as well here's again the other way and here also the select box already and this is what we're going to do next so for that we've got the mod select component again let's add component we add a label here see we've got no label here by the way right so for the mod radio group label nope no no label parameter i don't know why actually so maybe we would have to add this label manually but here for the selects we've got a label which is the difficulty and here we bind the value all right so we have to pay attention here sometimes it's not by value sometimes it's just something different so in this case it is still bind value and this is the difficulty id and again we add four each with difficulty and difficulties all right and you know might select item with the value difficulty i d and we want to display the difficulty value all right something's wrong not the value the title of course okay now let's start this again and here's the difficulty nice normal heart and so on click edit we see easy all right great so we are all most done now we've got the check box before we move on to the image or with the image let's add the check box real quick there are actually two things we can use here there's a mud check box let me show you this one mark mud check box this thing here you know these and also there's an alternative which is the switch right makes sense as well and in essence both are used for boolean variables so i leave that up to you let me show you both first the checkbox and for that we add the label ready to fight fights and again we find something different here this would be bind checked just one time bind and this is the character wait the character is ready to fight value and of course we can also make this a bit fancy with color primary for instance select that save this and there it is this is now our checkbox and real quick the switch is mud switch and the rest is exactly the same so you already see bind checked this is a little hint that it's in it it works in essence the same as the checkbox in uh exactly the same way i hope okay we have to start it again and there it is right so we can use a checkbox or the switch maybe we can use the switch here so let's remove this one save it and we see the switch nice click edit yep spider-man is ready to fight okay and now finally the file uploads so the first thing again let's display the image as you can see here we've got the the other file upload in essence this is the bootstrap one and i additionally see here implemented here the image so we see a little preview meaning when i change the image i already see what what this actually is and we can do of course the same with mudblazer and there is even for the image there is a component called mod image and this thing gets a source similar to the actual image element character image we can then make some fancy stuff like an elevation and also add classes of course so i want rounded corners for instance and also some space like that let's have a quick look again there it is already something's wrong here all right and maybe at this in another line this is a simple way i know but yeah so now we see that image here and it is elevated a little bit and now let's add the file upload so first we use the input file so in essence the same thing we are using here right but the thing is we hide this thing and then use a button to well open the file upload dialog right so first input file ids file input and on change we call on file change got this method already and how important this thing is hidden really quick the methods and our code behind is down here so what we're going to do is we get the image set the format to image png we resize the image create a new buffer with this thing open a read stream and then we create the image data based on the buffer here and then create a base64 string in a sense so we can display this and then set the character image to this image data i have to look this up every single time of course i don't have this in my mind i cannot remember this please don't think i do no i have to look this up so okay we've got our input file and now the mod button so first we use html tag is label then we say okay the variant variant filled and you can change this of course this is totally up to you how you want to do this the color again color primary then an icon you start icon meaning it is on the left side of the text and here we use icons fields cloud uploads and then this is important for almost four file inputs okay so now we know what to open and after that we say upload image and down here again a line break please so we've got our input file again this is the same thing in essence we're using here but here we have no id and then we use the mod button here to use or to access this input file component so let's save this it's rebuilding got spider-man here and now let's have a look we click edit there he is this is a really big image but now we can click upload image and there we've got our other images for instance this guy here and it is already updated and you see the avatar also looks a bit different okay so this is in essence the edit form the last thing is these two buttons here update character or create character and delete character so let's add these two so now below the card the mud card we add much button and then button type button type submit and this is really really really important because we're using the edit form and as you can see here on top we see on ballot submit we will call handle submit so whenever you want to call this function you have to declare a button with the button type submit so this button then will submit this function and let's also add some classes here first margin right 4 and also top and that's it and then the text depending on if the character is new then we say create character and otherwise we say update character okay so this would be the create or update button and after that now if this is not a new character then we can actually add the mud button to delete this character so on click this is deletes character and again we add when the margin right is not really necessary so margin top in this case is four and we say delete character okay let's have a look create i click edit and there's also the delete button all right now let's remove the other edit form and then test this thing summary is also not necessary here okay just edit this for some space there it is okay so we've got our table we've got the create new character button everything is here and now let's edit this guy call him spider-man for instance it is already updated so this update character button is actually not really necessary but now let's create a new character we say id is 2 name is bruce wayne rich guy can i remember i think it was april 1915 so we go to the years 19 [Music] can i go to 1915 okay this is interesting can we can we just edit this no account and that's funny it's just hundred years okay we maybe we have to we have to change this i think there is an option to change that but google is telling me that 1915 was i think the first appearance of batman can only go to 1922 so april 17th it is and this guy is part of the justice league heart ready to fight we add the batman image create the character there he is let's add another one id3 tony stark flying around and shooting and this was i think 1970 [Music] may 29th i hope avengers is correct set this to normal but not ready to fight open create character there he is so now we see spider-man we see bruce wayne and also tony stark and now we can delete this character and iron man is gone okay so again this is how to implement the complete edit form with mudblazer again i will push this now to github and in the video description now you can get the complete code there you have it mud blazer edit form the well middle way let's say it's not the simple form and we did not cover fluent validation i know you want a video done with that so let me think about that i've got it on my roadmap but i can't tell you when this is online maybe there is no info card here anywhere then you will see that in this video thank you very much for watching i hope you learned something if you want to know more see other stuff then please again write it down in the comment section and apart from that i'd really appreciate if you click the like button subscribe to my channel maybe don't forget the bell icon here and also don't forget to consider subscribing to my newsletter for these updates here for these videos and also the net web developer boot camp and the last thing as always guys thank you so much for all the drinks love that and it means the world to me that you are supporting me so thank you very much for your time if you got some time left then have a look at these videos on the side here maybe there's something interesting for you then just click on this thing and then continue watching all these videos on my channel thank you very much again for watching for your time and i hope i see you next time take care

Channel: Patrick God

Views: 15,489

Keywords:

Id: RcGw9tBVogo

Length: 51min 4sec (3064 seconds)

Published: Tue Apr 19 2022