.NET 8 Blazor New Forms Functionality Explained

hello everyone and welcome back to coding with Tom in net 8 Blazer supports the use of forms in serers side rendering mode what this means is that you can do basic form functionality on specific Pages or components without having to enable interactive server interactive web assembly or Auto rendering modes this is part of the new philosophy of net 8 which says only use these interactive modes when they're necessary in Net 7 your Blazer project had to be entirely in interactive server mode with signal r or web assembly but now you can choose whether to use these techniques on different pages or even different components and for many forms it's not necessary to use either of these so we're going to show how now you can use basic form functionality without using signal r or web assembly here's the form I created Creed for this video it uses a lot of the simple components like radio buttons checkboxes dropdowns text Fields even a date input control uh these are all available in the uh Blazer edit form let me show you how it works if I don't put any data in and hit update you can see that there's validation occurring um I show the validation errors in a summary at the top as well as in line with each of the inut so if I start filling these out and resubmit you'll see that the errors go away so if I pick a size if I put in a name last name and now the email I allow some extra special validation if I put in this email address for example it's going to say not available to test.com users so if I change it it'll work if I also put it in invalid format of an email uh it won't work either so if I put a email that's not that then it's going to work so at this point the form is submitted successfully and all the values are acceptable I also have some other validation rules in here for example you can't have peppers in sausage at the same time so I'm going to show you how to do these custom validations in in this form before I go to the code let me just reiterate that neither Blazer server or Blazer web assembly is enabled for this this is all functioning using serers side rendering let's begin up here in the code in the markup first thing I have to do is include the systems component model data annotations because we're going to be using that for validation and I also have a regular expression validator that I use below so those are these two usings the edit form is right here here you have to provide a model or edit context in this case I'm providing an edit context you give the form a name this is important especially if you have more than one form on the page an unvalid submit will actually call this method once all of the validators have run and there are no errors that's here the validating object data annotations validator this does the work of validating all of the values and then this validation summary just displays a list of all of the errors I could take this out if I don't want to see that validation summary at the top but for now I'll leave it in now if we go down the list here I have uh several inputs the first one is the first name and I have an input text component and what this does is it binds the value of the input to a object that has a com a method or a member called first name I'm going to go down and actually show you this model object before we continue so let me scroll down there now and show you the model I created for this is a pizza order class and it has properties for all of the different inputs that we're going to use for our form first one is uh cooked which is is just a string that saves the value for how you'd like the pizza cooked three booleans for the checkboxes for extra cheese peppers and sausage uh a size which is by default null but we'll have the values of small medium and large uh notice the required annotation this means you have to specify a size uh these data annotations are recognized by the data validator so if you put annotations in it will enforce these things so the next one we have is the first name and I have two annotations for that I have a required and I have a string length so if the user types a name that's too long it's going to tell them similarly for last name it's also required and a longer string length is allowed the email is also required and then there's an email annotation which I made a custom annotation that I'm going to show you and then required for delivery time so they have to choose a delivery time it defaults to today's date and time so let me scroll back up to the top and continue the explanation okay so we had the first name so the first name property is bound to the object's first name property uh the input text is Bound for the last name to the last name property um notice also I have under each one a validation message object so this is where the in inline uh errors will show if the person didn't enter proper data for that particular field and they work by just having a four argument that has the object property name and it'll grab the message for that property next one is the email with a validation message now the next one is a select option which is a uh dropdown there's an input select object in Blazer that you bind to the property that you'd like it to be now what I do is you have to list the options that are in the dropdown so the first thing I do is show options for them having not entered anything yet and that would be if the model has a null size so if it's null then I'm going to show an option in my list that is actually currently selected because they haven't selected a size yet so I'm going to put an option with a value of nothing in and have it selected else so if there is a size select uh value in my model object that means they have pick the size but I still need to show that default option I just don't mark it as selected then I go through all of the actual options that I have so I have a list of pizza sizes that have p uh option objects that have a value and a and a display property that I'm going to use so what I have to do is I compare I'm going to go through all the pizza sizes so the pizza sizes are and I'll show you down below right here just options the value is for value small we're going to show small with a capital S for Value medium we're going to show medium with a capital m and the same for large so these are the three options so if I go back up here and I look at these options again I have to put out an option with a selected tag if that is the current Pizza size that is selected so if the size matches the current option we're looking at in the array then put an option tag out with it selected where the value is the value and the display will be what the user sees in the drop down now if it's not currently the one selected then I just put out a regular option tag with no selected uh markup so this is something you have to do to make sure that it properly renders the um select every time the page refreshes you have to do this checking of value matching and putting in options selected you don't have to do that for the simpler components like just text fields or checkboxes that works autom automatically with the data binding but when it comes to options in a select you have to do it this way I hadn't done it this way initially and it wasn't working so I figured out I had to do this and of course the validation message for it now down here we just have checkboxes and they work fa easily you just bind the values to the properties that are booleans and then I can show the validation message so these are all like visually in one location so I could just show all the errors potentially and I don't think there are any but if there were this is where they would show now the next thing I have is a radio button group and this is a little simpler than the dropdown um I have a set of options for what um cooking options we have and if I go down I'll show you those we have light normal and well done different values to what is displayed so I can use this option array up here here and in inside the input radio group actually generate input radio tags with the value and displays set and then at the bottom here validation message and then my last one is this input date component which just binds to the delivery time property so let me go down to the validation customization I did for the email and that's down here I created another attribute so this is a email attribute class which inherits from the validation attribute object which all of your attributes need to in order for them to work with this validation tool with the edit form there is a is valid method you have to implement where you rece receive the context of the validation but then you also receive um the value that the person entered so we can go through and check this value and see what they entered and decide whether it's good or not so first of all if the value is not null then at least they entered one so if I go down to the end of this if you'll see if they didn't want uh enter an email I'll say new validation result email is required and then you have to pass in this array um to show the member in the context for this uh error to actually be bound to the right component property so we have the value being not null here if the value isn't null then I go ahead and do a regular expression pattern match on it this is the pattern I'm using it's a very simple one not completely comprehensive for emails but it's good enough if it's a match then I'll say um then it's good so if it matches this I know it's a good email so else I can say validation result invalid email format if it didn't match now we go in here and do further checking so I do a simple contains comparison to see if it contains this test.com domain and if it does contain it I'll say sorry uh not available to test.com users else so if everything else is good then I do return validation result. success so the way this works is since this attribute is class is called email attribute up here this email attribute on the email property recognizes that fact it's mapped directly so you see how I have it highlighted and it can tell down here that this is the matching validation attribute for that property so that's what's giving us that extra bit of Val validation just for this email address so let me just explain a few more things uh about this page I'll go here to the uninitialized what you have to do is create an in there's a couple objects you have here so we have our model that I showed you down there we have to create an instance of the model and what I do is I create it only if it's um hasn't already been created that's what this notation is and I create an edit context with that form model in the Constructor uh I have this second level of validation that I'm is not required at this point so if I were to take this out everything as of now will still work that I showed you but I'm going to show you what that is in a second and then we create a message store and what that does is store all of the validation messages so all the potential errors that occur so at this point Point everything will work all the validations I put in uh and I'm and the validations it will process are only these validations based on these uh attributes now the last thing to mention is that this submit form method is only going to be called after all of the validations have passed and at that point the form model object will have valid data so this is where you would actually process the input of the form you might create a data datase record you might redirect to another page that shows a re a receip uh and do whatever you would do when the person submits the form so it's not really important for this lesson to go into all that but this is where you would start that process knowing that the data that's come in is good so if I run this you would see the functionality that I already had still function Etc so that line I got rid of doesn't matter down here what this is though let me explain it is a extra level of validation that you can do on top of the attributes so after the attributes have all been processed and that validation is completed you can add more validation methods that'll run in addition to that so what I did is show the use of that and there's a reason I'm going to show you why I did this separately I didn't make an attribute um and this is to compare uh the checking of the sausage and the peppers so I could have done an attribute for this but the doing this you're going to see in the life cycle of the form that it's processed slightly differently and that's going to make a difference uh when we if we just choose to enable Blazer uh server or web assembly on the page which I'll show you what happens so what I do here is um just show some additional checks so if I check the sa and peppers if they're both checked don't allow it um if they are um if they're at microsoft.com I also say that this pizza is not available to them either so this is just another level of validation and I'll uncomment that so that it we know it's going to run so I'll test that and show you like for example the Microsoft situation that's not a good email so that that happened first so I'll just say Tom at yeah not available to people at microsoft.com if I fill everything else in and change this to something else we're now good peppers and sausage that's doesn't work with that additional validation so everything's working as expected okay so far so good however let me show you something and I have some strange code in here I'm going to enable just to make the point uh up here if you see I have this table I generate with just a bunch of numbers this was just to fill in space on the page I wanted to make the page longer and have a lot of extra data on it so let me run that now if I go to the form and you can see I've got all these numbers here so I could scroll down and this the update button is down here and if we put in some data and submit the form Watch What Happens okay it went to the top of the page and it did did refresh the entire page it's kind of hard to tell in the video but it did a full page refresh when that happens and it jumped up to the top of the page so Blazer has improved this they've created what's called enhanced form rendering and you can enable that by just adding the word enhance on the edit form tag and what this will do is intercept the form post and post the form in the background and then re-update just the portion of the page that it's relevant to and this is not doing it using signal r or doing it with web assembly it's doing it just with a simple mechanism that they've included so it'll work a little differently now um if I fill in some of this data scroll to the bottom and hit submit you can see page didn't Flicker at all page didn't scroll up at all but if I scroll to the top you'll see it did in fact change it and update it to prove it I'll do it again scroll to the bottom click no visual flickering but if I scroll back up you can see it did in fact change it so this enhanced form mode is very useful uh it's part of making this application look like a modern application and I'm glad Microsoft added this functionality to this to really supplement and complement really the server side rendering mode that we're still in now the last point I want to make is you do gain something by enabling one of the other render modes and to show you this I'm just going to enable serers side rendering for a second interactive server and I'll show you what you gain in it may not be something you care about but it's something you know you can get by enabling it so if I go here now if I start typing and I for example go here and then I just kind of click off notice before I even submitted the form I got a uh validation so this is like real time validation again that's an interactive feature so that's something that would require more uh you know connection back to the server in this case because it's interactive server or If This Were web assembly you know that would function as well so that's the kind of thing that you need to have um that enabled for I click off and boom last name is too long size medium uh but notice actually the not choosing a size didn't trigger that that so that's something that would get triggered um you could you could adjust that you could write additional code that would work in um Blazer server or web assembly to make that happen I just didn't do it uh the built-in code for if I choose blank it doesn't work you can see uh but the built-in code for the attributes handles a lot of that now however notice this if I put microsoft.com it thinks it's okay okay so the way that these attributes work in in the interactive server is the attribute checked it and it said it was okay the custom validation method that I showed you that second mechanism does not run automatically in Blazer server so that's something you'd have to modify if you wish to do it or I would suggest actually using the attribute method to do that as well so that's something you you gain gain uh using the attributes so if you want this kind of real time click off the inputs and get validation or you need any more fancy validation that's when you're going to need to turn on interactive server or interactive web assembly but for many many forms this isn't necessary and you can reduce the footprint of your application make it much more lightweight and faster and not complicated so I hope that this video explained the edit form and how it works with serverside rendering in Blazer 8 uh please leave a comment if you have any questions and please subscribe to this video and thank you again for watching

Channel: Coding with Tom

Views: 5,846

Keywords: blazor, forms, EditForm, .net 8, Form Validation, Enhanced Form Functionality, Server Side Rendering Mode, SSR, InputSelect, InputText, Radio Buttons, Checkbox, c#

Id: UkSBN1Lsxr0

Length: 22min 49sec (1369 seconds)

Published: Wed Dec 13 2023