.NET 6 Blazor 🔥 EditForm with ALL Components & Validation

hey friends welcome back to the channel i'm patrick god and today we will have a look at blazer webassembly again and again it is rather beginner stuff namely you've already read the title right we will cover the edit form of blazer web assembly and we will have a look at every single built-in component meaning the input text the input text area the numeric field so input number the radio buttons select box the checkbox and file inputs i think that's everything maybe i just show you the building components here on the side so this is what we're going to do and also we will have a quick look at validation so how does the edit form work together with validation with blazer web assembly the built-in components and additionally we will start with a little table so we will see some entities in there then click an edit button and then we see this entity in the edit form and then we can update every property in essence and that's it so actually we can just start but first if you learn something and you like this video i'd really appreciate it if you click the like button and maybe even subscribe to my channel it does make a difference and means a lot to me thank you very very much don't forget to hit the bell icon of course additionally maybe you want to have a look at my newsletter i promise won't spam you at max i write an email once a week and with that newsletter you get this video here earlier in your inbox and you will get early access to the upcoming.net web developer boot camp there we will cover the back end side with web api entity framework front end with laser and also some other stuff like git scrum stuff you might want to know when you want to get a job in the dot net development world so maybe this is interesting for you and last not least just uh just made me a little tea this time thank you very much for all your support guys it's still really hot yes you see do you see the steam little maybe nice i will see this when i edit this video so thank you so much for all your support guys i will love you forever and now i stopped talking enjoy the tutorial all right here we are visual studio 2022 we create a new project and this shall be a blazer web assembly application we call this thing blazer edit form tutorial and now we want to use dot net six of course and i am not uh selecting asp.net core host at this time because we really want to focus only on the client so no web api whatsoever just the client with the edit form and there we are already it's nice when things go a bit faster as usual so let's close this thing here now i assume you're already a bit familiar with a blazer web assembly if not please have a look at my other videos or check out my courses maybe a little commercial here thank you very much for staying with me but now real quick we've got our program cs not important for us right now got the appraiser imports everything is here everything we need we've got our pages our shared folder and so on so again i hope you're familiar with all that stuff and the first thing we need is actually a model so let's create a new folder call this models and since i want to show you all the built-in components of the the edit form this model is a little bit bigger maybe and it simply gets this name character but i promise these characters will be interesting but real quick let me show you the built-in components there they are so you see that in the microsoft documentation for the blazer forms and validation march 23rd actually nice this is pretty new asp.net core 6. when you scroll down here you see how to build the form and so on and this is the thing i wanted to show you built-in form components so we've got the checkbox input date file and so on and we will use all of them here in this little tutorial and again for that we need a little model that is maybe a bit bigger then in my other tutorials okay so first thing although we are not using entity framework or any kind of database here let me add an id and we will use this id in the form i know this is nothing you would usually do in production but with that we can for instance use the input number component okay then the next thing is indeed a name which is string empty at first please with the lowercase s and then string bio so with the name we've got our default input text field and here now we're using the text area then we've got a date time for the birth date and let's say this is by default simply date time now and then an image which will be a string for this little tutorial i will upload another file upload video create another file upload video where we will see how to store images on the server so if you haven't already please subscribe and maybe activate the bell icon then you will get a notification when this video is online or you subscribe to my newsletter then you will get early access to this video but enough about that now here for the image we will use a base64 string all right so this now is also string empty and base 64 means that we will turn png or jpeg whatever into a string and then the default image html element will use this string for its source so this should work then the next thing is i want to show you the radio button the radio group with radio buttons and also a drop down so the input select component and for that we will use teams and the difficulty yes difficulty because i i don't know let's say this is a video game character and we choose a difficulty and a team for this character so i think then this makes a bit more sense so we've got an integer for the team id and this is crucial here we will create in a minute also a class team and a class difficulty but let's initialize this with one to make the radio buttons and the selects drop down select box combo box you name it to make it work we need the id here cannot use the actual the actual model or the actual entity and by the way was interesting before.net five actually you couldn't even use the select box with a string for instance you had to use an integer so but this is old stuff not true anymore now you can use anything in a sense but it is easier in this specific case at least in my opinion to use an id here for an integer yeah and the last thing here for the checkbox is uh just a boolean value is this character already ready to fight and by default yes it is so this is our character and now the teams and the difficulty for that we add another model first let's say the difficulty and this is quite small now we have an i d and we have a string for the title again empty by default and now the last model here is our team and here as well the id and the other thing now the name of the team string empty by default okay with that now we've got our models this is a string let's fix that really quick okay so the team the difficulty and the character hope i got that correct and now we can move on with the page so let's create a characters page here this is a new eraser component call this characters all right it's a page so we add the page directive like that and now also add an entry here to the nav menu call this characters that i called again page made this error in another tutorial as well talking and writing code is not that easy sometimes so characters is the the href the page route and we call this also characters and there is a people i can let's try this real quick there it is we've got our characters here beautiful so this is the page it works awesome so now the next thing i want to do is we go to the characters page and again a short disclaimer here usually it is better practice to use a service for instance where you would put your data i mean in production you would probably use a database with a web service and entity framework or with the sql server for instance or sqlite and so on again i got a bunch of videos about that stuff but now for this edit from here i will do something that is well not best practice we implement everything here in this character's razer file meaning we have no code behind file although this is i don't know it's better practice to use a code behind file it's i guess just up to you if you want to use it but the code will be a bit bigger and also the html will be bigger because we got a bigger edit form right so long story short let's just do everything here and the first thing we need is we want to prepare some data meaning we will add a character here we will add the teams and also the difficulty and the first thing let's add a static list of teams and to make this work i think we have to add something here yep not available so let's add it to the razors to the import file i mean and now here the models stop and now it works okay so these should be our teams and this is a new list of teams and we initialize it first with a new team where the id is one and the name is avengers and now here are the people of the justice league all right and by the way if you are bored by all this boilerplate code then please check out the chapters or the time codes below then you can jump to the actual edit form and don't have to deal with all this code here because i usually really don't just copy and paste code i think this it's not that fun not that good to learn in tutorials when we use that in tutorials so i try to write the codes from scratch every time and rarely copy paste stuff from any prepared code i have on the other screen or so okay now no well not i'm too fast not the characters let me first add the the difficulties that's what i wanted to do so here now difficulty the [Music] yeah that's the one english okay so and here we need three please feel free to to use or to be creative and use titles that are more fun maybe but i'm using just the boring easy normal and hard okay so we've got normal hard again just for learning purposes so we can use the select the input select component here and now regarding the characters let's just add one character so we can see this one already it's a new list of character again open the curly braces and here we've got a new character and this one gets some data we've got the id 1 [Music] the name peter parker then the bio text that's the dude hanging out in new york city and then we've got uh wait a comma here then we've got the birthdate this is according to i guess homecoming date time [Music] august 10th [Music] then the team id will be one see that avengers right so now we can use this id here and that's by the way why i use the static teams here and now the difficulty id or let's say peter parker aka spiderman if you don't know that is an easy opponent maybe i don't know okay it's ready to fight yes and now the image just talked about copy pasting but this is something i would really copy paste got some data here for the image and then you see how this string looks like let me just get that real quick boom there it is okay so this is now our image and again i if you have a look an older video by me on this channel regarding creating a block with blazer but this was i think even before 0.5 not sure about that there we use also the file upload i will show you here and start this string in the database but again there are other ways to do that of course we can store the file on the server so this is something for another video okay with that now we've got our mock data in essence and now there are two more things i wanna add here the first thing is the actual character that we wanna edit so the edit form needs a model in the code and this will be our character here and we call this list characters and then the the arrow goes away and another thing is i want to add a flag that is telling us if we currently want to add a new character or we are adding an update editing and updating an existing one because the id or the id the idea of this page is now we have a little table where we display a list of our characters and then we see a little button where we can then say that we want to edit this character and then we do not switch the page we see this edit form on this very same page so really well not the best design maybe i don't know um but it's quite simple and we can stay on this same file here so first the table so this is of class where this gets the class table this is provided by bootstrap we add a little header here with a row and the only things i want to display in this table here are the image so this would be the first column then let's also add the id and the name all right so that should be it and then we need another column for the edit button so this should be the header then and now regarding the body let's first use a for each of course because with that let me use the built-in snippets that's the one for every character in our character's collection we then say a new role please and then first the image now for that we use the image element here where the source come on html source is now character image we use the rounded class because well i want to do some fancy css stuff again rounded is provided by bootstrap but one more thing i want to do and i know inline styles should not be used never of course but i don't care so the maximum height is a hundred all right so this image shouldn't be that big then in this table and then the other things are more easy we can just add the character id and then we add the name and now the last thing the button so we've got a button here with the class button button primary and on click we will call a function on click that's our event here so we need the id so that's why we use this statement here and we will call this function edit character with the character i d and then we add an icon here with the class oi for open iconic and they've got this cute pencil icon and this should be it for the table and now let's add this edit character method real quick so down here you see this is already getting quite big right so maybe with the code behind file it would work a bit better it would be a bit more organized i'll leave that up to you tell me in the comments what do you think code behind not code behind in this case would be really interesting so for that now private void edits character we get the id okay and visual studio is jumping around and now we say our character to edit is characters find and then where the id equals the given id and if our character to edit is not now we say that i have no idea what visual studio is doing here but it is jumping around character equals character to edit and is new is set to false and yes usually well not usually but we could simply say character as characters find and so on and then set the east new flag to false but i think this works as well and now let's test that real quick just to see if we already get our peter parker in the table is it open yep there it is already and you see it works nice so we've got that and now we click edit we don't see anything because we haven't added the edit form yet but this is what we will do right now so let's add a little space here and now the edit form well let's just uh do we have to check if the characters no no no not really right so let's just add the edit form and i already told you this thing gets a model so this is important the model is now our character remember this guy down here and then we there we are then we have to call a function on submit and there are these functions here on submit on valid submit and on invalid submit so we can decide what to do if when we use validation and what is happening if the form is not valid then what do we want to do what happens if the form is valid and so on i think you get the idea now for this example at the end i want to use a little validation so let's use on valid submits and we call this method then handle submit and maybe let's also add this function or real quick down here we just say private handle submits and in this specific case what you want to do is if the character is actually new then we just say characters adds and then character okay if the character is not new and we are using the editing or the updating then we actually don't have to do anything here if again we would use this web service with the web api and entity framework maybe then we would make a web service call here but this is not necessary because of the data binding so we added exactly the same character that is displayed in the table and you will see what i mean by that in a couple of minutes but now let's write our edit form so the first thing is the id and for that we add diff and then a label where we say for the id call this id and the next thing is now our input number and again i know you would never do that in real life why the heck would you change the id but to show you the input number component we do that here then bind value character id and the class again by bootstrap form control and by the way it's still not pretty although we've got bootstrap here we would have to add some more margins and paddings so that we got some space between the controls and i could add them here but really i'm not a designer i'm not good at this stuff but what is coming and maybe if you're watching this it is already on my channel i will do exactly the same or almost exactly the same tutorial with mud blazer so we're using then these ui components of mud blazer and then this will look pretty i think much prettier much more pretty i get prettier much prettier than this stuff here that i'm currently building okay so maybe it is already online then check out the info card or the end screen with the with the video there then and all that should look much better then okay anyways so we've got our input number and then let's just copy this stuff now that we typed it already we can say for the name name name input number right not number input texts would be the component now id is your name and here also we will use the name so copy this again and then we are using the bio so bio here also here we find the bio and this time it's a text area all right so already three components covered and then we use the date so for the birth date also birthday here and also here maybe we've got an input date control actually so input date it is all right then the next thing is well don't have to copy paste actually because the next thing already is the radio buttons and then the select box but what we can add actually is the checkbox maybe and then now let's do one let's do one step after another so we see that already and i think we can now test this again yep we tried to rebuild everything let's see how this about this looks yeah okay i told you it's not pretty but i think this kind of works when i click here now i see the number field and the important thing is well these arrow buttons here right i can just increase and decrease the id and you see it in the table here it's directly it's binded so it's updated as soon as i click this button here pretty pretty nice actually but of course if you want to store this in database this would work a bit differently then we've got our name let's say this is now amazing spider-man updated the bio here so we can add some stuff and also the dates can change that as well great okay so these components already work now it's getting a little bit more complicated with the radio group and the radio buttons first again we added diff and then the label is for the team we also call this team and then we add first the input radio group because this will be a group of radio buttons the id is team and now bind value is pretty similar so bind value the character team i d and also let's add the class form control and now inside of this radio group we say for each team in teams we say input radio and then the parameter value add team id but what you want to display is something else so we add a span actually not like that we close it here so we don't need it here anymore but now we add a span with little styles we get some space padding left five pixels and then we say team name and then after that we add a new line like that okay let's test that real quick it's rebuilding nice all right something is missing yep i forgot the uh new line here so let's try now yep there it is updated and we need much more space here so maybe we can just add a paragraph well not really can we add some height here style height 500 pixels i know okay so we get some space and here you can see then we can actually set the team and when i now click here you see it jumps to avengers nice so the radio buttons work as well next thing now is our select box or the input select component for that again we add another div and the label this time not id for the difficulty we say the text also is difficulty of course then we've got our input selects id is difficulty again we bind the value character difficulty id with the class form control so that would be the input select and now in there we need some options again we use a for each for that and for every difficulty in difficulties we say option value is the difficulty id and we want to display the difficulty title all right okay let's test that now there it is again we actually need some space here but anyways easy normal heart nice isn't it so i can set this too hard maybe when i click edit here i see easy again so and that quick you can build the input select alright so with that out of the way there are only two left the checkbox and the input file now first let's add the checkbox we have it div add the class form group although i'm not sure if this is necessary let's remove this then we've got our input check box now this is the component we are going to use the id is ready to fight because the new thing here is that i added the label after the checkbox ready to fight and the class then is a forum check label and we call this ready to fight and here now again we just point the value character is ready to fight and here the class would be form check input okay save that and there it is okay you get it yep this works and now the last thing maybe most interesting i don't know the input file so we've got the div the label is now for the image and we call this image and we use the input file component with the onchange event here for that we call another method on file change we will implement that in a minute the class now here is also form control and that's it already actually but let's also add the image up here so we directly see the change so diff and then the image actually we can copy this this time so we've got our image here that's it and let's paste it here but maybe make this a bit bigger okay now on file change we'll implement that well let's just add the method but maybe not the body yet so this is now private avoid on file change and then this thing needs an input file change event arguments let's call this e4 events and well let's just implement it real quick so the thing with on file change now and the input file component so this is a little bit more complicated again that with the event we get a file and what i want to do here is we request the image file and resize it a little bit and then from that we create a buffer and with that thing we open a read stream and then with that thing we create the actual image data and then put that image data to our character image property okay so let's first say we've got the format which is image png then var resized image is actually the method we need here is an async method so we have to use also async task here and then we can say awaits e file and then request image file async see that asynchronous function and here this gets our format image png and then the size i want to use here after that our buffer which is new byte array with the resized image size like that capital s and then await a resized image open read stream and then read async with the buffer and the last almost lasting image data is a string now looks like that data and then the format and then base 64. and after that we say convert to base64 string and this gets now our buffer and after that we set the character image to image data all right okay now before we test this let's have a quick look here as you can see we do not add a button yet no submit button so this function is not called we are currently in essence just editing a character and we do not have to save this so we do not really need the submit button for now so we can actually test that with our spider-man but if we want to add another character we would have to add a button for creating and then so with creating i mean initializing the character and then saving it to the or adding it to our list of characters so now let's start this i hope this now works but succeeded okay now there we are this is here in the edit form the well the new character now if i click edit we see the image here that's nice right so let's change the file here maybe and let's say spider-man looks a bit different now we've got this image and it's also already updated here so editing in essence works right we saw that so let's create a new character real quick and for that we add a button first here below the table button plus btn btn primary on click we say create character and then create a new character and of course we need the method but also now here in the edit form [Music] we say first a new line and then button type submit that's important and please keep in mind if you add any kind of button here by default this is also a submit button so if you want to add a button in the edit form that does something different than submitting this form you have to specify the type button just keep that in mind i had to learn the hard way so with that now we say class button button primary again and now let's just say i know let's let's check if this is a new character if so we call this button then create character and if not we say update character and this should be it for that button and then let's already add another button to delete the character so if this new is false then in this case we say button and then as i just said type is also button plus btn btn danger so we've got this button in a red color and then on click delete character and then also say here delete character okay so now we need methods we've got the edit character we've got the handle submit so now we need create character and delete character so private voids create character would look like that we've got we've got character is a new character and then is new is set true and private void delete character jumping around is characters remove character all right let's test this now there we are id now is two bruce wayne is the name this guy is pretty rich and the date now is i know maybe that's not the format you're used to in your country but i hope that's still okay for you this guy is in the justice league pretty hard and he gets this image creates there he is bruce wayne with id2 and now we can click edit here we see peter parker we can change the name for instance spiderman and let me just leave the text field then it is already updated okay so this works and this works as well now we can click create new character with id 3 now for instance tony stark flying around and shooting the birth date is this one according to google avengers correct but not ready to fight this is the image create the character there he is okay you can edit this guy you can change the name of course iron man so he's ready to fight now update the character well don't need update here in this case we see iron man okay so this works really good really good i think and now real quick the validation part so again i did this already in other tutorials and here i just want to show you a little bit of the validation that you use in an edit form for that we have to go to our character model and in here now we can use some attributes for instance we can say that the id is required and for that we need this namespace here system component model data annotations and let's say the same is true for the name and also we can define something else like if we just want to make sure that the lowest possible id is 1 then we use range 1 and well yeah we can say that the max id is 10 or in our case we say the max value of the integer type is our maximum and what we can also do is we can define custom error messages for instance here we say not in quotation marks first arrow error message arrow error message is please give this character a name thanks like that we save this and uh maybe let's also add an error message here because otherwise you would see this crazy big number so error message would be something like the id can't be smaller than one and now we remove let's know wait that's correct now okay so we've got one for the lowest number the max value of the integer type as the maximum and then the arrow error message jesus it's late again and with that now we have to add one more thing or two more things actually in our edit form first we need the data annotations validator this is the thing maybe it gives us information here adds data annotations validation support for or to an edit context so now this thing checks if the form is actually valid and if not and we want to see the messages then what we can do is add the validation summary down here or for every single component we could also add the validation message the specific validation message so then we would for instance add the validation message directly under the specific component but now let's just use the validation summary save this and run it because we got an error before there it is and now if i click create character the id can't be smaller than one please give this character a name thanks and we've got these things here if i remove this we get a default error message the id field must be a number in this case all right so this then shall be 2 again if i say this is bruce wayne is green now and we can actually create the character there is our guy let's edit this one give him an image and there's the image great and how to make this complete let's also add the validation message so we've got the summary and now what we can do here for this example you could add a validation message and then we've got this parameter here and this crazy lumped expression again so this is just for the character name let's just close it here and then also for the number the id like that save it again and let's have a look you just say create you see the error messages messages here and also now down here and in this case then we could maybe remove the summary and just leave the specific messages here can remove this for instance create character nope does not work when i add two hit enter still not working can leave this now hit enter now and it gives me the error message again so this time maybe again bruce wayne why not i like this guy so bruce wayne it is create the character and now it worked okay so this is the edit form now with all the validations again as always i will push this to github and then you can get the code you can get the url of the repository below this video in the video description so there you have it this is the edit form with blazer web assembly the bootstrap design and also the validation stuff next week really important we will have a look at the same stuff with mudblazer so maybe if you haven't already please like and subscribe then of course you get a notification when you hit the bell icon here when the new video is then uploaded so exactly the same stuff done with mudblazer looks way better in my opinion so this is what we're going to do next week additionally maybe again consider subscribing to my newsletter if you do that then you will get an email once a week usually maybe it's even less than once a week but you will get this video here or these videos here on youtube also earlier in your inbox couple of days actually and people like this so maybe this is also something for you apart from that you get access early access to the upcoming.net web developer bootcamp and last not least again the t thank you so much for all your support guys love you forever with that stuff i stay awake at night when my little turtle is asleep hopefully so then i make these videos so thank you so much for watching if you want to watch more videos regarding dotnet blazer and other stuff maybe then check out these videos here on the side maybe there's something for you keep watching thank you very much for your time thank you very much for watching my videos and i see you next time take care

Channel: Patrick God

Views: 11,766

Keywords:

Id: ZPUH50b-blQ

Length: 51min 13sec (3073 seconds)

Published: Tue Apr 12 2022