(#52) DataType attribute in asp.net core | Generate form fields from model | Asp.Net Core tutorial

welcome again to asp.net core a masive tutorial in this video we will learn how can we generate the fields of a form automatically by making some changes into the model class let's start how can we generate the form fields automatically from model to generate the fields of a form we have to make some changes into our model class and we can make those changes by using some attributes let's focus on the attributes now there is a new attribute in system load component modeled or Delta annotations namespace and that would name is data type in the constructor of this data type we have to pass the name of our type suppose I want to generate a password field then I have to type over here password for example I want to create a new field of date/time type suppose I want to open that calendar then I can handle everything from this data type attribute let's open the visual studio and let's see how it works in practical project here we are back to our bookstore where obligation I can run this application by pressing ctrl f5 to add a new book we are using this form let's click on the add new book link here is the form now suppose I want to make some changes in this form let's open the model class inside the models folder we have a new class book model we are using the same model class to generate our form suppose on this form I want to add a new custom field first of all let's add a new property for this new custom field suppose the name of property is my field corresponding to this property I want to add a new field into my phone perfect let's go to the form form is available in 30 views folder let's open the book folder and here we have a new add new book form let's copy this new form group let's paste it again in service label tag and this is before attribute I will be using my fill attribute let's use the same for s before as well and same for the validations as well remember if you are generating your field from the model class then you have to use only this input s before you do not have to you any other type of input tag you simply can use this input and yes before attributed to simply enter the name of your property perfect that's billing the solution and simply run this application by pressing ctrl f5 go to the add new book over here you can see that we have the title of our new field that is Michael and we have a new input field over here let's see the details of this input field right click on this one and choose inspect insider in spec you can focus that this is a type of text so here you can see type is equal to text it means with these a simple text box let's make some things into this field now to make some changes into this field we'll have to use a new attribute and the name of the attribute is data type let's see what this video type is you can right click on this data type and choose go to definition here you can focus that this is of valid is an attribute and inside the constructor of this data type attribute we have to pass the type of our data type let's see what is this data type again right click on this data type and choose go to definition this data type is a enum and over here you can see that there are large number of types of these fields their time date time duration phone number currency text HTML there are loads of number of types are available over here let's try to use these types into our form first we'll start from this their time inside this data type constructor we have to pass the enum and it is data type don't suppose first I'm using their time let's save all the changes build the solution again refresh stage and this time you can notice that this field has been updated automatically over here you can see that we have a plunder symbol if I click on this glenda you can see we are getting a calendar this is the date section and this is the time section because we have chosen date time that is why we are able to see this date time over here you can use any date from this calendar we can choose any year as well any month and then any date we can also choose the time so I want to select 2 p.m. ok here is the Earth's then we have minutes and then EMM p.m. so over here in the field you can notice that this is the date and this is the time perfect now suppose I want to change the level as well to change the label of our field we simply have to use display attribute and how to do that display inside the display you have to pass the name property perfect let's run this solution in debug mode now and let's put a breakpoint into the controller class go to the add new book page okay here you can notice that we have the custom title and then we have the field of their time let's focus on the HTML of this field right click on this field and choose inspect this time you can notice the type of this field is date/time local okay it means we can choose date and time both of them together let's close this one and choose a date time suppose I'm using this date perfect let's enter some titles click on the add book let's see what data we got into this book model here in the money field property you can notice that we are getting date and time as well so if you have a field into your database table then you can store this value into your field or if you want to use this field for some other logic then here is that data into your property and you can use it accordingly so first I do not want to save it into the database so I can execute it directly like this we can also add the validations to this field as well all other medicines like required or sting lamp or whatever very lesson is applicable to this field you can add all of them over here now let's try the second data type suppose instead of using this inner time now I want to use only date field okay let's update this display as well build this solution click on the add new book link this time you can see that you are having this field only for the date type if I click on this blender then you can notice that we have only section for the date we do not have any section to choose the time perfect let's choose a date here on the title as well you can notice that we have the updated title let's click on the add book and in the field property you can notice that you are getting the date click on the continue button these validations error are for other fields of the form but we are working on this custom my fields so this is working fine similar to the date you can use time as well if you will use time then over there into the form you will see that you have a section only for time let's try some other data type as well suppose now I want to use password this password field is required when we create a login form or the signup form then we need this password field update the display property as well enter your password build the solution and run this application again let's click on the add new book this time you can notice that we have this field and if I type anything into this field then you can notice that nothing is visible to the user everything is visible as the dot by because it is a password field now and if I see the details of this password field right-click on this field and choose inspect here into the developers window you can see that the type of this field is password so this field is generated automatically from the Moodle class you do not have to make any change into our form we simply can update everything from this model class perfect let's enter some details into the password field and click on the add book button let's see what we got into the model class here into the my field you can see that we are getting the value of that password field the value is the peers because I have entered knit this into that field that is why we are getting this value over here so by using gives approach you can create several type of fields into your form let us again learn about some more data type email address suppose I want to create a new field for email address let's use this one data type both email address perfect let's run this application go to the add new book again ok we have not updated this title so do not worry about that let's enter some email over here suppose I am writing it is and click on the add book this time you can notice that we are getting an HTML error please include at the rate in the email address if this is missing at the rate let's focus on that HTML as well in the HTML you can notice that the type of this input field is that is right we are getting this terror if you want to disable the HTML very difference then you can do that easily for this you have to go to a form and insert this form we can simply use no validate ok let's save all the changes go back to the browser again click on this new book let's enter some more data over here and this click on the add book ok this time you can see that we are getting this data over here into this my fill if you want to validate this data then you have to use the second attribute of email address the main purpose of using data type is only to generate a field onto the form it is not used to validate the data suppose you want to validate this email address field then you can simply use one more attribute or here email address you can also use the regex let's again in this application click on the add new book let's enter some wrong details now it is click on the add book perfect so here is the value into the minefield continue and here is the error the enter your password field is not a valid email address this util is coming because we have enter the display as enter your password that is why we are getting this text over here into these illnesses but we are validating our data that this field is not a valid email address there are couple of things that are is to not working in this ESP wrote net core for example if you will use some data type like upload or or you will use this multi-line text then you can notice that these will not work on pure form okay so some of them are working and some of them are not working so if something is not working on to your form this does not mean that you have written some wrong code into your application these are not working because they are not implemented as of now into asp.net core MBC so do not worry about them if in future the team will add that support for this data type then you will see that these will work automatically but for now some of them are working and some of them are not working using this data type attribute we can create our form there is no need to write everything into our form they can't simply delete the fields of our form from the model clucks directly there are lots of data types available in this form you have to try all of them and you have to make a list of what all are working for you and what all are not working for you and once you will complete this assignment you have to tell everything into the comment section you have to enter your comment in such a way that these fields are working for me and these fields are not working for me that is all in this video make sure you hit the like button of this video enter the result of your assignment into the comment section if you want to ask anything else to me then you can ask everything into the comment section sale this video subscribe to our Channel and please join the web dental YouTube channel thank you for watching have a great day

Channel: WebGentle

Views: 9,510

Keywords: asp.net core, asp.net core tutorial, asp.net core 3.0, asp.net core 3.0 tutorial, asp.net core mvc 3.1, asp.net core mvc 3.1 tutorial, asp net mvc, asp net mvc tutorial, dotnet core, dotnet core mvc, asp.net mvc core 3, asp.net mvc core tutorial, asp.net mvc core course, dot net core tutorial, dot net core mvc tutorial, asp.net core 3.1, .net core, DataType attribute in asp.net core, Generate form fields from model, DataType(DataType.Password)

Id: 9u0EOBNHvDE

Length: 12min 37sec (757 seconds)

Published: Sun May 10 2020