C# Core Web Application Activity 2c Data Validation and change display name with ASP.NET

[Music] hi welcome to this lesson on c-sharp and asp.net we're building a web application in this video that is going to demonstrate some data validation so it's called appointment maker and you can see this application has a bunch of different types of data when i choose create i create an appointment for one of my patients so you can see here on the screen that i have the dollar sign format here showing correctly and the date format now if i go back to the list i can see all the appointments that i've created and if i make a new one and this time i leave something out such as i just put in a short name and leave the rest of them blank you're going to see some information that says the validation is incorrect so if i leave them all blank and choose create i get more messages so in this lesson we're going to learn how to do this data validation and how to manage a list of appointments so let's go through the steps of building this application so i'm going to visual studio and choosing create a new application i'm going to select asp core web application making sure that i'm using c sharp next and i'm going to call this thing appointment maker now i'm going to select net core and asp 5 which is the current version here we're going to make a model view controller app and no authentication look at the rest of these details and choose create all right the application looks like it's ready to go so let's close this window databases will not be used in this version so i'll close that let's go into the folders controllers models and views is what we're interested in we're going to start with a model because this is where the data validation occurs this is the most important part of our lesson right now so i'm right clicking and i'm going to add a new item let's go and give this thing an appointment model name now let's give this object a bunch of properties so i want to pick some things that have a variety of data types so the first thing is the patient's name we'll give it a string the second let's use date time so this will be the appointment date that we're going to schedule let's choose a decimal and i'm going to be a little cynical and say the patient's net worth is important when you make a doctor's appointment let's give the string to the doctor's full name and then finally let's give an integer for the pain level so you can report how badly you're feeling when you make an appointment so this will be all the properties for now that we'll use to build our model all right so now we need to make something happen so that happens in the controller so i'm going to right click in the controllers and choose add new controller and we'll call this thing appointment controller all right so here's the default index item we're going to leave that for now we're going to use that to show a list of appointments later but right now i want to create a method that will actually create a new appointment so the method i'm going to create is called create so public i action result create and then we're going we're going to return a view so this is the two actions that we can do now in our controller we can show a list which will be index later and then right now we're going to create the view for the create option so let's do the creation part let's right click inside of create and choose add view now we're going to select the second option that says make sure that you choose a razer view with or without a strongly typed model so we're going to do it with a model we just created the model and we'll use it now we'll choose add so the view name is called create which is going to be a data entry form where we create our appointment so we select the item called create that's our template and then the model that we're going to put into that template is the appointment model let's choose this as a partial view and click the add button hey hey look at this we've got ourselves a create form so what do we have inside of here that we can recognize right now so first of all at the top you can see that there is an action to this form we're going to modify this later because this action refers to itself so if we submit the form it will go nowhere so we're going to fix that now the important part of our lesson here is about data validation and you can see that there is a validation summary section here and this is an empty div right now you can see there's nothing there but asp.net will be putting in error messages there if they occur and you can see the different formatting goes along here such as validation danger is the red text in uh in the css formatting that we're working with here in bootstrap and so this will contain text if there is a validation error so you can see that repeats all the way down through the end and there is a validation script that is going to be executed during our submit form so this piece of code here is probably javascript and it will generate an error on the page if you forget to put in one of the values so how do we make those values appear well let's see what happens if we just run this application and put in nothing all right so the application is compiled and we're ready to run it now so open the url bar i'm going to type in the word appointment and that is the uh name of the controller and we also have the action called create so appointment slash create and when we press enter we get this form so what you see on the left side is the html and css for this form and the right side of course is the web browser now i'm just going to leave everything blank and click create so immediately we start to see some red text not for every field but for some of them so why would some of these be considered required and others are okay to be empty so these need to have some value put into them as is they can't be null in other words so the patient name is a string and it's okay for a string to be null it's valid a date obviously has to have some value in it integers and decimals they need to have values as well so the doctor's name and the patient's name do not have any validation and they are allowed to be empty but the others were required so that is by default the validation that you'll get in an entry form it will not allow you to put in no values for certain kinds of data types all right let's switch back into the models and i'm going to the appointment model i'm going to add a few more items to here to make the display a little bit better so in front of the patient's name or just above the patient's name i'm going to use a square bracket and the word display name parentheses and then a string you can put any string in here you want and the one that makes sense to me is patient's full name now you can see that there's some angry underlines so the red line is telling us that there is a problem it says don't understand what this name attribute is so let's do show potential fixes and we'll use the first one that says using system component model and so now we have a validation which is really more of a display name and it will show it on the screen when the form displays all right what i'd like you to do now is to put a display name for the rest of these so it really doesn't matter what you exactly put in here so you can follow my example or pick your own so for the date i'm going to call this thing the appointment request date and then for the doctor's name we'll call it primary doctor's last name we'll do patients approximate net worth and then the patient's perceived level of pain and i'm going to define that from 1 to 10. so you can put in any kind of a string there you want but this will display on the form when we show it so i'm going to test that out to see if any of these strings actually showed up so let's run the app all right my application is compiled and running so i'm going to go ahead and put in the same url before appointment slash create and when we see the list now the display name has a more descriptive label for each of these so for instance it says patient's full name and you can see down here at the bottom this is obvious it says per se patient's perceived level of pain and so it has a whole string there so this here is the first notice noticeable change that you've made here it's not really data validation yet but it's very related to it next i'm going to put some restrictions on such as the name of the the length of the names and the values of their money and other things so let's go put some extra restrictions in our model so the first restriction i'm going to do is add a required statement so you noticed when we did it earlier required was not really necessary but we can put it in here so if i put in the word required in front of the patient's name and then choose the import for the data annotations it will not allow me to leave the patient's name empty now just to prove that i'm going to leave the doctor's name as it is and so the doctor should be an optional string let's run it and see if that works all right let's go ahead and run this with the proper url so i'm going to type the letter a and fill in the rest of the appointment slash create so now when we have the form here and i choose the create button we will see that the patient's full name field is now required and the rest of it here is also required and notice though the doctor's last name was not required so strings are not required to have any value and this did not cause any problems so when i put required in for patient's full name it made this a required field as well so it's almost as if required were listed on every one of these properties but i only needed to put it on the first one so for the patient's full name i'm going to put a requirement on it so we'll call this thing string length and i'll put in a parenthesis and 20. so 20 as you can see from the suggestions is the maximum maximum length is 20 characters and then the after the comma i'm going to give it a minimum length of 4. the next type of data validation that i can put in here is for the data type so for the date we're going to have a specific type of data that we'll accept and so data type dot date is what i'm looking for so that will be our request of the appointment the next field is the patient's net worth which is dollars or currency so the data type here is going to be data type dot currency let's skip down to the bottom where it's got the patient's pain level and so we're going to restrict this between 1 and 10. so integers between 1 and 10. and you can see that range is the proper thing here and we'll put in parenthesis with the minimum and then the maximum and so all of these are now data validation rules that we should see when we try to enter numbers into our form let's try it out all right so here's the data entry form now let's just test this first one out so you can see the minimum length is supposed to be four letters so if i put in just two such as the word me and choose create i get a validation rule that tells me that the minimum length is 4 the maximum is 20. so let's put in jimmy for our appointment that should be working now let's go with the the date so let's pick some date here let's go out to 2022 and let's check it now the approximate net worth so i didn't put the range in here we'll do that later but for right now i'm just going to put in here a lot and see how that works and let's see the doctor's last name is smith so you can see as soon as i tabbed on to smith it says here the patient's net worth is a number so i have to put in something let's give him a hundred dollars and now the perceived pain the guy says i'm in awful pain i'm at 11. so let's choose create on this one and you can see the data rule shows up that says must be between 1 and 10. so we'll give you another we'll give you a 10 jimmy and let's see how that works so it created whatever it was supposed to do and then returned us back to this form the next step is we are going to display the data from this form on another form so let's return to the controller and we're going to add a new action so what i want to show now is the details of one item so a common name for that action is details i could call it show details or i could just call it details either one will work but what i need to send then is a piece of data so in the parentheses we're expecting this to receive a appointment model so if i get an appointment i'm going to send it on let's see if we can provide this with a potential fix that says use the models now when i return the view i could put in the word here details comma appointment or if i just leave out the details that will still work but we don't have that view yet so let's make it so i'm going to right click and choose create so add view is what i'm looking for choose the razer view choose add we're going to use details as the name the template is called details and then we're going to use the model which is our appointment model let's check the add button and see how this works out all right it looks like the view has been created now you can see that this is just a list there's no form or anything on it it's just a list of data and each item has a little function in it that says i'm going to display the patient name and the date and so on so this will be great if it works now you notice the model is listed on line one so it's expecting us to send a model but where is it coming from we have to go back to our data entry form to fix that so let's go to the create cshtml page and as i mentioned earlier in the video line 7 has an action and it's returning to itself so the action that we're looking for now is wait for it can you guess we want to go to the details action so we're using the the default controller which is the appointments controller and then it says the asp action is the details section so we should be able to display a summary after we click create let's see if it works all right let's go ahead and get to the create form so let's put in the appropriate url and we have the appointment create screen okay so let's put in the people's names again so let's put in jimmy and the usual things so his date and let's check it and let's go to the proxima net worth it's a hundred dollars the last name is smith and his pain is let's give him a five go ahead and choose create so it sends it off to the controller and then it returns to say hey you wanted details here's the details so we have all of these different uh values and they're formatted correctly so even the hundred dollars shows up with a dollar sign so there is a details form now this says do you want to go back to the list if we choose that this will return us back to a thing that doesn't exist yet and so we're going to have to fix this it says there is no view called index doesn't exist needs to be made now i'm just going to show you how quickly how to make that index so right now we don't have any list of things that we're managing so let's make a list so the list i'm going to create is a list of appointments appointment models right appointment model is my type and let's call it appointments so when this controller is first launched it's going to create a new list and i'm going to make this static so that way it sticks around between different calls it doesn't change so the create menu doesn't really create anything it shows the create form where does it actually go after we submit the create form well we saw that it goes to this details item so let's add an item here in the appointments so you can see that we're going to take the appointments list dot add and add the new appointment to it so the data validation hopefully worked and now we have a valid appointment that we can add on to it this will still only display one appointment however where would we display a list of those well that would be from the index so let's go to the view parentheses here and add a parameter we're going to call this thing appointments so we're going to send a list of appointments now we don't have the index view so let's create that and it will allow it to generate a list for us so this is pretty nice it does it automatically let's choose add view let's choose razer view and this time we're going to select the template for list and since we have a list in our application now we can pick it from the the menu here so which one is the list well it's going to be made of this model so a list of appointment models is what i'm selecting and now choose add let's see what that generates well it looks like the code has been generated for me let's take a look at some of the important parts of it so first of all you're going to notice something different on line one usually on line one it tells you what the model is well this does tell you what the model is but it's in a different format it's now expecting of an interface called i enumerable so translate that into your knowledge of what a list is so an enumerable includes lists among other types of data so in other words we're looking for a list of what type of a type model of sorry of the appointment model so we're expecting a list of things well what do you do with a list well you display it in a table of course and so we have ourselves a list of items and we have a for loop in here so line 28 says we're going to say for each item in the model so each item in our list of appointments and so this will be repeated for as many times as we have items in our appointment list you can see there's some extra links in here that are going to display in our table let's see what this looks like okay so we're going to go into our usual url let's go to the appointment create let's generate an appointment and then show a list so here's the appointment details we just made an appointment for jimmy and now when i choose back to list look at the item at the bottom here it says the url is going to appointment no slash in other words this is the index item so let's choose this and you can see that we have our first appointment and there's a create new and let's see what that link leads us to you can see at the bottom of the screen that at create is the url so if i choose this we can create another appointment so let's make one for gina and let's see how that looks in the table so we'll go through all of these items and we'll add gina's list in just a second here okay so we have gina's details and now if i choose back to lists i will see two rows in the table now there are other links that we have not programmed yet there's an edit form that you can make you can show the details which will bring us to the details and then also the delete button so delete has not been completed as well let's see if details works so sure enough there is the details of our appointment so now we've got ourselves a pretty good functioning app as far as managing a list what i have demonstrated is data formatting and data validation which things are required which fields have different limits on their values all right so now i've given you a pretty good outline of how this application works now it's time for you to add some of your own customizations so let's look at the challenges so what i'd like you to do is add some address fields so let's give a street a city a zip code email and a phone now each of these are going to have their own data formats so does email have a format sure does now what's then after you've added those properties to the model then you're going to have to update the show details item and also the data entry form is not going to be correct either so you're going to recreate those and then i would like to add two rules so our doctors are greedy and they would refuse to see anyone whose range of salary or net worth is below 90 000. so minimum of 90 000 maximum who knows a billion some big number but the minimum is ninety thousand also we're not going to let the patients come in until they report a minimum value of five for their pain so cynical doctors that need lots of money and will only see people who are really desperate so that's the rules so make those changes you might have to recreate some of these forms but when you're done you'll have a more complex and a more complete data entry form for the patient values so thanks for watching let's go down to the next video where we're going to do some more work in building web applications in c-sharp you

Channel: shad sluiter

Views: 4,743

Rating: 5 out of 5

Keywords: c# tutorial, asp.net mvc, C# data validation, display name web app, c# display name

Id: VQjQb9-iQV4

Length: 22min 43sec (1363 seconds)

Published: Wed Dec 23 2020