ASP NET Web API user registration

this is part 21 of asp.net Web API tutorial in this video we'll discus implementing new user registration page this is continuation to part 20 so please watch part 20 before proceeding we want our new user registration page to look like this we want three pieces of information to register a new user with our application we need their email address password and confirm password we are going to make use of bootstrap to style our pages so let's flip to visual studio now and add an HTML page so let's right click on our project add HTML page let's name our page register dot HTML let's reference a bootstrap within our head section so within the content folder we have bootstrap dot min dot CSS let's drag and drop this right here and we 120 pixels padding from the top of the browser vendor so on the body element I'm going to include style attribute and set padding top to 20 pixels and let's make the registration page ten columns wide so I'm going to include a development with class call MD 10 this class is a bootstrap clause now if you're new to bootstrap I recommend you to watch bootstrap tutorial on our channel which will get you up to speed with basics of bootstrap and we also want one column offset on the left so in addition to call MD 10 I am also going to use call MD offset 1 so it's going to offset 1 column on the Left 1 column on the right and in the middle the registration page will be 10 columns wide we want to place you know the registration page inside a well so let's include another development here with plus well inside this let's include a table element let's set the plus to bootstrap tablecloths and we want our table to be bordered so let's also include table bordered plus and inside this let's include a section for the table head and let's set the class of the table row to success and inside this let's use a TD and set call span to two and the text inside the TD is going to be new user registration so the heading column here is going to span two columns that's the reason why we have set call span to two so the text inside that is going to be new user registration and let's include a section for T body inside this let's include a TR and let's include three to Dedes so within the first TD we want this text email and within the second TD we want this text box to capture user email address so that text in the first TD is going to be email and within the second TD let's include an input element of type text let's give it an ID let's call this txt email let's include a placeholder and let's set the placeholder to email and similarly we need table rows to capture password confirm password and the register button so in the interest of time I have already typed the required HTML so let's copy and paste this inside our registration page so here we have a row to capture the password arrow to capture confirm password and another row with the register button we have given the register button an ID of BT and register and on the button we're using BTN and BTN success classes so let's see what changes and run our application by pressing ctrl f5 this is how our registration page looks at the moment when we click the register button and when the registration is successful we want to display a success model as you can see here now let's include the HTML required for this so just after the closing table element let's include it development set its class to model when this model is being displayed and when it is being hidden we want fade animation effect so let's also use the fade class and I'm also going to set tabindex to minus 1 and let's give it an ID let's set it to success model let's set data - keyboard attribute to false this prevents the model from closing when we press the Escape key on the keyboard I'm also going to set another data - attribute and that is data - backdrop and I'm going to set that to static this is going to prevent the model from closing when we click anywhere outside the model and inside this we're going to use another development with class model dialog and we want a small model so let's use model SM class and inside this let's include the model content so let's include a div element with class model content now the model consists of a model header which displays the success and this close button we have model body and model footer so inside this development with class model content let's include another development with class model header and inside model header we need two things we need this little cross which when we click the model will be dismissed and this text success so to get this little cross we are going to use a button element set the type to button and we're going to set its class to clothes and data - dismiss attribute to model which is going to dismiss the model when we click that little cross and to get that little cross let's use AM % x semicolon and then we want the text success within the model title so to get that let's use an h4 element and the text inside this is going to be success and now let's include a development for model body so let's set the class of this development to model body and inside this let's use an h2 element and set the text to registration successful and finally let's include another development with class model footer and within the model footer we want the close button so let's include a button element let's set its type to button data dismiss our data - dismiss attribute set to model and let's set its class to BTN and BTN - success BTN - success is going to give us that green color and the text on the button is going to be close let's save our changes reload our webpage and when we click the register button at the moment nothing is going to happen because we have not written any jQuery code for that now let's write the required jQuery code to display the success model so we can see how it looks at the moment we need to reference to script files for that you can find both of those script files within the scripts folder we need jQuery file and bootstrap javascript file so just before the closing body element let's first reference the jQuery file followed by that the bootstrap javascript file and then let's include a section for script let's set its type attribute to text slash JavaScript and then inside this within our document dot ready function let's wire up the click event handler so let's first find the register button using its ID the ID of the register button is BT and register so let's use the jQuery ID selector which is hash find the register button and wire up the click event handler so when we click the register button we want to execute some code so what do we want to do when we click the register button for now let's simply display the success model to display the success model we will have to find it using its ID and the ID of the success model is success model so let's use the jQuery ID selector once again find the success model div and then use the model method pass it the string show which is going to display the model let's save our changes reload our web page and at this point when we click the register button notice we get the success model and when we click this little cross or the button the model should close but it's not being closed at the moment let's investigate why now if you look at the data - dismiss attribute we have a typo there and that's the reason why we are not able to close the model so let's fix the typo let's see what changes reload our webpage and let's click the register button once again we get our success model when we click the little cross the model is being dismissed similarly when we click the close button the model is dismissed as expected another thing that we need to do is display any validation errors the new user registration page has got three mandatory fields email password and confirm password if the user does not provide these fields and if they try to register we want to display the validation errors using bootstrap alert so let's include the required HTML for that so just after the success model do let's include another development for alert let's give it an ID let's call this div error and let's set its class to alert and let's also use alert danger class which is going to give us this red contextual color and we want to keep this alert collapsed initially so let's also use the collapse class and within the alert we want this little cross here which when we click the alert will be dismissed so to get that little cross let's use an anchor element let's give it an ID let's call it linked close and let's set its class to Plews and let's set the href attribute to hash and then to get that little cross let's use an % x semicolon and then finally to display the validation error text we need another div so let's include a Divya and give it an ID div error text now when we click this little cross we want the other to be dismissed so let's wire up click event handler let's find the link element using its ID and let's write up the click event handler so when we click the link what do we want to do we want to dismiss the alert so let's find the other two div using its ID and we want to hide the alert so let's use the hide method and we won't feed animation effect when the alert is being dismissed so let's see pass fade string to it now at the moment when we click the register button we are simply displaying the success model now we want to register the new user credentials and then display the success model now how are we going to save the new user registration details when we created this Web API project we've got an account controller so if you look within controllers folder out-of-the-box we have got this account controller and within this account controller we have got register method this register method has got this register by link model parameter and if you look at this register binding model object it has got three properties email password and confirm password and from the UI from our register page we are passing values for those three properties so what we need to do now is post the data that the user is going to provide using this form to the register method within our account controller okay so when we click the register button what do we want to do we want to harvest the data that we have on this form and then post that data to the register method within the account controller so let's use jQuery AJAX function for that so dollar dot Ajax and we are going to post data to that the URL is going to be slash API slash account so with an account controller we've got register method so that's the URL to which we want to post the data so the method we are going to use is post and we have to pass the data as well so what is the data that we're going to pass we're going to pass email address and where is the email address coming from the email address is coming from the email address textbox and if you look at the ID of the email address textbox it is txt email so let's find the text box using its ID and then use the jQuery Val function to get the value out of it similarly we need to retrieve password and confirm password so password is going to come from DX D password text box and confirm password is going to come from DX D confirm password text box all right so we post the data to this URL and once that is successful then what we want to do we want to display so when we successfully post the data we want to execute some code and that's when we want to display the success model in case if there is any error then we want to do something else which is going to be part of this anonymous function so when there is an error we get jQuery XML HTTP request object so now we have our development here so if there are any errors we are going to use this development to display those errors so we have inside this development another development which is going to display the text so let's first find that development using its ID and then we are going to use the text function we have the jquery xml httprequest object being passed into the error function and we are going to use the response text property to get any validation error details and then what do we want to do we want to display the alert itself and the ID of the alert div is div error so let's find the div and then let's use the show method and we want fade animation effect when it is being displayed so let's pass the fade string all right so with all these changes let's go ahead and reload our webpage let's provide the credentials to register a new user test1 at gmail.com let's provide a password and confirm password let's click register now the first request is going to take a few seconds because behind the scenes it's going to create the membership database and all the required tables and then it's going to insert that record into that database table here now we get success registration successful let's click close let's register another user test two at gmail.com registration successful let's register another user test three at gmail.com all right so we have registered three users and if we don't supply for example let's say email address and when I click the register method button notice we get the validation error the email field is required now the obvious question that comes to our mind at this point is where is this registration data store now to answer that question let's go to visual studio and click on this button within solution Explorer show all files and within the app data notice we have got an MDF file so this is a local database here let's double click on this one so what it's going to do is open it within server Explorer we've got tables here and we've got a few tables now the table that we are interested in is asp net users we'll talk about the other tables in a later video for now let's right click on the asp net users table and then select this option show table data so it is this table where the registration data is stored so here you can see the email addresses that we have used test 1 2 & 3 at gmail.com and look at the passwords they are hashed and stored for us so this is all provided out of the box by asp.net so we'll discuss all the customizations that we can do to this asp.net membership database in our next video thank you for listening and have a great day

Channel: kudvenkat

Views: 248,357

Rating: 4.827538 out of 5

Keywords: asp.net web api register user, asp.net web api account controller, asp.net web api jquery post data

Id: 6Rrnt3AKs2g

Length: 20min 5sec (1205 seconds)

Published: Tue Nov 29 2016