Creating the Register View Model
This is part 66 of ASP.NET Core tutorial. In this video, we'll discuss how to register a new user using ASP.NET Core Identity. We want our user registration form to look like this: We want to capture user email, which will be used as the username to log in, and then his password, and then finally another field to confirm the password they have provided.
The first thing that we want to do is create a view model class that's gonna carry the data from this user registration view to the controller. So let's add that class to the ViewModels folder in our project. Right-click on the folder, add new item. We want to add a class. Let's name this class RegisterViewModel.
In this RegisterViewModel class, I'm going to include three properties to capture user email, password, and confirm password. In the interest of time, I'm going to paste the required code and then walk you through it. There's nothing new that's going on here, but it's just all these concepts in our previous videos in this series. So the code here should be pretty straightforward to understand.
Applying Model Validation Attributes
We have a RegisterViewModel class. We discussed view models in detail in part 26 of this ASP.NET Core tutorial. In this view model class, we've got three properties: Email, Password, and ConfirmPassword. On these properties, we're using built-in ASP.NET Core validation attributes for model validation. We see red squiggly lines; to fix that, let's bring in the required namespace by pressing control-period. We know this validation attributes are present in System.ComponentModel.DataAnnotations namespace. Let's bring that in.
Email is a required field, so we're using the Required validation attribute. We also want to ensure a valid email address format is provided; to validate against that, we're using the EmailAddress validation attribute. Password is also a required field. As we type the password in the password text box on the UI, we do not want to display the typed characters; instead, we want to mask those characters. For that, we are using the [DataType(DataType.Password)] validation attribute. So the same is true even for ConfirmPassword.
Notice in the property name ConfirmPassword we do not have a space between the words confirm and password, but when we display a label for this field on the UI, we want to include a single space between the words confirm and password. For that, we are using the Display attribute. We are also using the Compare attribute because we want to compare the password that we type in the ConfirmPassword field with the value that is typed in the Password field. The name of this property is specified right here. And if they do not match, this is the error message that we want to display: "Password and confirmation password do not match." We discussed these validation attributes and model validation in detail in parts 42 and 43 of our ASP.NET Core tutorial. So if you're new to these concepts, please check out these videos.
This RegisterViewModel class carries the data from this register view to the controller, and the controller will do the rest.
Building the Account Controller and View
I'm going to name the controller AccountController because we are dealing with user accounts here: creating, reading, updating and deleting user accounts. So back in our project, let's right-click on the Controllers folder, add new item. We want to add a controller. Let's name our controller AccountController.
The name of the action method is Register. So when a GET request is issued to /account/register, this is the action method that responds, and it's going to return our Register view. At the moment, we do not have the Register view. The name of the controller here is AccountController, so the first thing that we want to do is in the Views folder, let's add a new folder with name Account. And this folder is going to contain all the views of this AccountController. Right-click on the Account folder, add new item. We want to add a Razor View, and let's name our view register.cshtml.
As you might have guessed already, the model for this view is this RegisterViewModel class. So let's copy the name of the class and specify that as the model. In the interest of time, I'm going to paste the required code. Again, there should be nothing new to you in this code because we discussed all these concepts in detail in our previous videos in the series. So let me quickly walk you through what this code is doing.
First, we're using the ViewBag object's Title property to set a page title to "User Registration." And then here, we're using Bootstrap 4 to style our registration view. And when this form is submitted, we want to issue a POST request. So on the form tag, we are setting the method attribute to post. And then we are using the validation summary tag helper to display any validation errors we might have. And then we have a div element here which contains a label, an input element, and a span validation element for the Email field. The same is true even for Password; we have a label, input element, and a span validation element. And then finally, the same for ConfirmPassword. And then we have the submit button here. The text on the button is Register. When this button is clicked, we will issue a POST request, and this form data is submitted to the server. We discussed all these form tag helpers and issuing POST requests to the server in detail in this ASP.NET Core tutorial playlist.
Adding and Styling the Navigation Link
In the layout view, let's include a navigation menu item to get to the Register view. Here we have the List and Create navigation menu items. Let's make a copy of this menu item, and then change the bits that are required. The text on the navigation menu item is Register. And when this navigation menu item is clicked, we want to get to the Account controller and Register action within that Account controller. Let's save all these changes and run our project.
Notice we have a Register navigation menu, but we actually want it on the right-hand side right here. So all our registration and login related navigation menu items should be on the right-hand side here, and all our application navigation menu items like List and Create on the left-hand side here. So to move this Register link to the right-hand side, what I'm going to do is create another unordered list here and then use the same Bootstrap navbar-nav class. And then move this li element inside this unordered list. And then to push this register navigation menu item to the right-hand side, I'm going to use another Bootstrap styling class, ml-auto.
Handling GET vs. POST Requests
Notice now we have the register navigation menu item on the right. And when we click that, the URL changes to /account/register and we see our user registration view. At the moment when we submit this form by clicking this register button, notice the same user registration view is re-rendered. This is because the register action that we have within our Account controller, it is responding to both HTTP GET and HTTP POST. When a POST request is issued, it is the same action method that is executed, and all this method is doing is returning us that same register view. So we see the register view re-rendered.
We want this register action to respond only to HTTP GET and not HTTP POST. So let's decorate it explicitly with [HttpGet] and save our changes. Notice now when we issue a POST request by clicking the register button, we see a Not Found error. That's because at the moment within our Account controller, we do not have an action method that can handle the POST issued by our register view. Well, we'll discuss how to do that in our next video. We'll handle the POST request when this register button is clicked, create a user account with the provided data on this form. That's it in this video. Thank you.
