ASP.NET Core MVC Login and Registration using Identity | Add Custom Fields | Part 2

hello everyone this is Manoj welcome back to my YouTube channel in today's video we will work on our part 2 of our asp.net identity so in the part one we have seen how we can use our identity objects like registration login and if you see this register part we have three Fields email password confirm password so whenever you add a register component from your identity wizard then you will get these fields as default but in this video we will see how we can add our additional feeds let's say if we want to add first name and last name on this register page how we can do that so for that let's go to visual studio and let me stop this so if you see the folder structure we have area folder we have identity folder and inside that we have a data folder and pages so in the data folder we have our context class and we have our model class the name is mydb Project user all right so the first step is let's see if you want to add two more Fields first name and last name so we have to add two additional properties inside this user folder so let's add them the shortcut is prop if you hit enter and change the data type and here the property name so first name again prop tab then data type is string and another property is last name so these are two properties which we want to add additionally in our resistor form so now the second step is we have to go to our DB context class and here inside this on model creating we have to add additional line using our Builder object so Builder Dot apply configuration and inside that we have to add a new object of a class so the class will be application user entity configuration and once you hover on it it will ask you to add this class so we have to generate this class inside the same mydb context class and here inside this class we have to create our configure method where we'll pass both the properties so public void configure and inside this class property we have to pass a parameter entity type Builder and inside that we have to pass our model our model is mydb not my DB it is my DB object so copy this and paste it inside this and create an object so let's say Builder is our object so here now we have to pass both the properties so Builder Dot property so we'll use Lambda expression so x dot first name and let's give a maximum length of this so has maximum length and we have to pass any number so let's say 255 let's copy this we have to pass the same object over here also and for the another property we have to only change our last name so this is our second step so we are done with our model changes and our DB context changes now let's go to our account Pages inside this register so first of all if you see this HTML page we have a register model and if you see this email password confirm password all are coming from our input model so right click on this register model and go to definition so you see we are into this class and here we have all these things so if we come down so in this input model we have email we have password we have confirm password so these three fields are coming from here okay so now we have to add two more properties so let's add so first of all if we copy the common part so we will use required and will also use the display name so let's say the display name is first name and let's copy the same on display decorator and here let's also use string length and first it will take the number of characters and then the second parameter it will take error message so error message and let's give Max 255 characters are allowed so save let's copy this and paste it below and change the property as last name save so this is our the csstml.cs file changes and now we have to go to our view part that is register.cs HTML so now after this model only let's copy this and paste now if I remove this email and if I type dot so it will give me the first name and last name in The intellisense because we have added both the things in our input model so the first name first name first name let's copy and change last name last name so save now let's build it so build has started so build is succeeded now let's try to run the project and see if these two first name and last name input fields are visible on our UI or not so you can see localhost colon 5122 that is our project URL or you can say our project base URL so our UI has been loaded let's go to the register page so you can see the first name and last name both are visible on a register page perfect so now if you go in the database and I execute the same command okay let me so in the in the table we don't have these two Fields why because we haven't run our migration and we haven't run our update database command that's why so let's close it and go back to visual studio so now what we have to do is we have to go to our tools new get package manager and package manager console so inside this let's clear everything so now we have to add a migration so additional Fields so this will create a new migration based on our changes for first name and last name so you can see build has started and also build it succeeded so it will create a yeah perfect so you can see we have new Fields first name and last name all right now let's update our database and that command is update database so what this command will do it will execute are this script into our SQL end as you can see the script is being executed done so if I again go back to my database and first we have to refresh my identity project refresh and if I execute the same command again so you can see at the last we have two more properties first name and last name perfect now let's try to run it and see if whatever value we will pass in the first name and last name if both are going in the database or not so project is loaded go to register and let's try to give details we'll confirm password register perfect so see we have got an error you can say the SQL exception cannot insert the value null into column first name why if you come back here so in the register.cs.html.cs file that is the code behind file so here we have a method so whenever you click the registration button so basically this post a sync method will get executed so for the first name and last name what we have to do is we have this user object so after this user Dot first name equal we have input object already so input DOT first name and similarly user dot last name is equal to input dot last name so it will take first name elastium from this input and it will send both the properties to the database all right let's save and build the project again just to check if there is any error or exception simple it has started yeah built succeeded no error is there so let's run the project and now we'll try to save both the first name and last name values again in the database and see if both are coming here or not so go to register form and let's say first name last name email and password also confirm password click on register you see we have got a success message as register confirmation all right now let's go back to SQL server and click on execute so we have another record with the name uh with the username manuscript gmail.com this is my email address now let's go to the first name and last name you see we have got both the values as first name and last name all right so this is how you can add your additional Fields into your register form all right let me recap again first we have to add our properties into our model folder then we have to add the same properties in my DB context using this class and configure method then we have to add both the properties into our input model like first name and last name then we have to add both the things into our HTML part like this we have added two divs first one for first name second one is for last name and finally we have to add our first name and last name property using input model that's it I hope this is clear to all of you now and I have one announcement so let's say if you are working for a college project or if you are doing an internship and you are struggling with any of your project that is related to.net.net core jQuery react.js so I also do some paid services so if you are having any kind of requirements you can contact me on my Instagram or you can also check my channel description there I have also WhatsApp number so you can contact me on Whatsapp or my Instagram all right and if you haven't subscribed my channel so please do subscribe I need your help and support so I'll see you in the next one thanks for watching take care bye

Channel: Manoj Deshwal

Views: 8,023

Keywords: asp.net core, asp.net razor pages, razor page, .net core, .net, website, asp.net, asp.net core mvc login with Identity, add asp.net core identity to existing project, user authentication in asp.net core mvc, login and logout in asp.net mvc, .net core mvc user authentication, identityuser, .netcore identity, authorize, .net core registration form, .net core login form, asp.net core customize identity, asp.net core identity step by step, asp.net core identity mvc, manojdeshwal, deshwal

Id: xmuUlkX2DB4

Length: 14min 34sec (874 seconds)

Published: Wed Jun 28 2023