Post
Ask Question

Registration Razor Page in ASP.NET Core Razor Pages Web Application

Introduction

 
In this article, we will be working on the registration page of the ASP.NET Core razor page web application. We will be adding more properties to the default registration page. We will be adding properties such as Name, Address, City and Postal code, as the default registration page contains only a few properties such as email, ID, password and confirm password.
 

Creating ASP.NET Core Razor Pages Web Application

 
Inside Visual Studio, we will create an ASP.NET Core Razor Pages web application.
 
Registration Razor Page In ASP.NET Core Razor Pages Web Application
 
We have to change the Authentication to Individual Users Accounts. This will make sure that identity is scaffolded, to make use of login and registration functionality inside the project.
 
Registration Razor Page In ASP.NET Core Razor Pages Web Application
 
The project folder should look like the following:
 
Registration Razor Page In ASP.NET Core Razor Pages Web Application
 
Now we will work on register functionality, in register functionality, we only have email and password fields but we will add more fields such as Name, Address, City, Phone number and Postal code.
 
Registration Razor Page In ASP.NET Core Razor Pages Web Application
 
In order to add those properties inside the database, we have to extend the IdentityUser that has already been implemented and we have to add additional properties there.
 
So, we need to add a new model class to create new properties. To add a model class, right-click on the models folder, add a new class and name it ApplicationUser.
  1. using Microsoft.AspNetCore.Identity;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Threading.Tasks;  
  6.   
  7. namespace SparkAutomation.Models  
  8. {  
  9.     public class ApplicationUser : IdentityUser  
  10.     {  
  11.         public string Name { get; set; }  
  12.         public string Address { get; set; }  
  13.         public string City { get; set; }  
  14.         public string PostalCode { get; set; }  
  15.   
  16.     }  
  17. }  
This ApplicationUser class is extending IdentityUser, that is it is an implementation of IdentityUser. Inside the ApplicationUser class, we are adding four properties such as Name, Address, City and Postal code.
 
Now we have to push these changes to the local database created earlier. So in order to push anything to the database, we need to make changes inside the ApplicationDbContext class created by default inside the Migration folder.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Text;  
  4. using Microsoft.AspNetCore.Identity.EntityFrameworkCore;  
  5. using Microsoft.EntityFrameworkCore;  
  6. using SparkAutomation.Models;  
  7.   
  8. namespace SparkAutomation.Data  
  9. {  
  10.     public class ApplicationDbContext : IdentityDbContext  
  11.     {  
  12.         public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)  
  13.             : base(options)  
  14.         {  
  15.         }  
  16.         public DbSet<ApplicationUser> ApplicationUser { get; set; }  
  17.     }  
  18. }  
Inside ApplicationDbContext class, we have to create a new DbSet for ApplicationUser.
 
Now we will add a migration, so we will go to tools, then NuGet Package Manager and click on Package Manager Console.
 
To add a migration, type the following command inside the Package Manager Console.
  1. add-migration AddPropertiesToUser  
If we go through the newly created migration file, we can see that it is adding columns such as Name, Address, City and Postal code to AspNetUsers table.
  1. using Microsoft.EntityFrameworkCore.Migrations;  
  2.   
  3. namespace SparkAutomation.Data.Migrations  
  4. {  
  5.     public partial class AddPropertiesToUser : Migration  
  6.     {  
  7.         protected override void Up(MigrationBuilder migrationBuilder)  
  8.         {  
  9.             migrationBuilder.AddColumn<string>(  
  10.                 name: "Discriminator",  
  11.                 table: "AspNetUsers",  
  12.                 nullable: false,  
  13.                 defaultValue: "");  
  14.   
  15.             migrationBuilder.AddColumn<string>(  
  16.                 name: "Address",  
  17.                 table: "AspNetUsers",  
  18.                 nullable: true);  
  19.   
  20.             migrationBuilder.AddColumn<string>(  
  21.                 name: "City",  
  22.                 table: "AspNetUsers",  
  23.                 nullable: true);  
  24.   
  25.             migrationBuilder.AddColumn<string>(  
  26.                 name: "Name",  
  27.                 table: "AspNetUsers",  
  28.                 nullable: true);  
  29.   
  30.             migrationBuilder.AddColumn<string>(  
  31.                 name: "PostalCode",  
  32.                 table: "AspNetUsers",  
  33.                 nullable: true);  
  34.         }  
  35.   
  36.         protected override void Down(MigrationBuilder migrationBuilder)  
  37.         {  
  38.             migrationBuilder.DropColumn(  
  39.                 name: "Discriminator",  
  40.                 table: "AspNetUsers");  
  41.   
  42.             migrationBuilder.DropColumn(  
  43.                 name: "Address",  
  44.                 table: "AspNetUsers");  
  45.   
  46.             migrationBuilder.DropColumn(  
  47.                 name: "City",  
  48.                 table: "AspNetUsers");  
  49.   
  50.             migrationBuilder.DropColumn(  
  51.                 name: "Name",  
  52.                 table: "AspNetUsers");  
  53.   
  54.             migrationBuilder.DropColumn(  
  55.                 name: "PostalCode",  
  56.                 table: "AspNetUsers");  
  57.         }  
  58.     }  
  59. }  
Now we need to update the database to make changes inside of it. To update the database, type following command inside the Package Manager Console.
  1. update-database  
If we go back to the database, right-click on AspNetUsers table and click on view data. We can see all of the four new properties have been added inside the table.
 
Registration Razor Page In ASP.NET Core Razor Pages Web Application 
 
After adding more properties inside the AspNetUsers table, we can add these properties inside the register page. In order to add more fields inside the registration page, we have to make changes inside the register razor page which has been auto-implemented by the identity.
 
We need to make changes inside register page model, because whenever we want to display anything the razor page, we need those properties inside page model.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel.DataAnnotations;  
  4. using System.Linq;  
  5. using System.Text;  
  6. using System.Text.Encodings.Web;  
  7. using System.Threading.Tasks;  
  8. using Microsoft.AspNetCore.Authentication;  
  9. using Microsoft.AspNetCore.Authorization;  
  10. using Microsoft.AspNetCore.Identity;  
  11. using Microsoft.AspNetCore.Identity.UI.Services;  
  12. using Microsoft.AspNetCore.Mvc;  
  13. using Microsoft.AspNetCore.Mvc.RazorPages;  
  14. using Microsoft.AspNetCore.WebUtilities;  
  15. using Microsoft.Extensions.Logging;  
  16.   
  17. namespace SparkAutomation.Areas.Identity.Pages.Account  
  18. {  
  19.     [AllowAnonymous]  
  20.     public class RegisterModel : PageModel  
  21.     {  
  22.         private readonly SignInManager<IdentityUser> _signInManager;  
  23.         private readonly UserManager<IdentityUser> _userManager;  
  24.         private readonly ILogger<RegisterModel> _logger;  
  25.         private readonly IEmailSender _emailSender;  
  26.   
  27.         public RegisterModel(  
  28.             UserManager<IdentityUser> userManager,  
  29.             SignInManager<IdentityUser> signInManager,  
  30.             ILogger<RegisterModel> logger,  
  31.             IEmailSender emailSender)  
  32.         {  
  33.             _userManager = userManager;  
  34.             _signInManager = signInManager;  
  35.             _logger = logger;  
  36.             _emailSender = emailSender;  
  37.         }  
  38.   
  39.         [BindProperty]  
  40.         public InputModel Input { get; set; }  
  41.   
  42.         public string ReturnUrl { get; set; }  
  43.   
  44.         public IList<AuthenticationScheme> ExternalLogins { get; set; }  
  45.   
  46.         public class InputModel  
  47.         {  
  48.             [Required]  
  49.             [EmailAddress]  
  50.             [Display(Name = "Email")]  
  51.             public string Email { get; set; }  
  52.   
  53.             [Required]  
  54.             [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]  
  55.             [DataType(DataType.Password)]  
  56.             [Display(Name = "Password")]  
  57.             public string Password { get; set; }  
  58.   
  59.             [DataType(DataType.Password)]  
  60.             [Display(Name = "Confirm password")]  
  61.             [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]  
  62.             public string ConfirmPassword { get; set; }  
  63.   
  64.             [Required]  
  65.             public string Name { get; set; }  
  66.             public string Address { get; set; }  
  67.             public string City { get; set; }  
  68.             public string PostalCode { get; set; }  
  69.   
  70.             [Required]  
  71.             public string PhoneNumber { get; set; }  
  72.         }  
  73.   
  74.         public async Task OnGetAsync(string returnUrl = null)  
  75.         {  
  76.             ReturnUrl = returnUrl;  
  77.             ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).ToList();  
  78.         }  
  79.   
  80.         public async Task<IActionResult> OnPostAsync(string returnUrl = null)  
  81.         {  
  82.             returnUrl = returnUrl ?? Url.Content("~/");  
  83.             ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).ToList();  
  84.             if (ModelState.IsValid)  
  85.             {  
  86.                 var user = new IdentityUser { UserName = Input.Email, Email = Input.Email };  
  87.                 var result = await _userManager.CreateAsync(user, Input.Password);  
  88.                 if (result.Succeeded)  
  89.                 {  
  90.                     _logger.LogInformation("User created a new account with password.");  
  91.   
  92.                     var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);  
  93.                     code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));  
  94.                     var callbackUrl = Url.Page(  
  95.                         "/Account/ConfirmEmail",  
  96.                         pageHandler: null,  
  97.                         values: new { area = "Identity", userId = user.Id, code = code },  
  98.                         protocol: Request.Scheme);  
  99.   
  100.                     await _emailSender.SendEmailAsync(Input.Email, "Confirm your email",  
  101.                         $"Please confirm your account by <a href='{HtmlEncoder.Default.Encode(callbackUrl)}'>clicking here</a>.");  
  102.   
  103.                     if (_userManager.Options.SignIn.RequireConfirmedAccount)  
  104.                     {  
  105.                         return RedirectToPage("RegisterConfirmation", new { email = Input.Email });  
  106.                     }  
  107.                     else  
  108.                     {  
  109.                         await _signInManager.SignInAsync(user, isPersistent: false);  
  110.                         return LocalRedirect(returnUrl);  
  111.                     }  
  112.                 }  
  113.                 foreach (var error in result.Errors)  
  114.                 {  
  115.                     ModelState.AddModelError(string.Empty, error.Description);  
  116.                 }  
  117.             }  
  118.   
  119.             // If we got this far, something failed, redisplay form  
  120.             return Page();  
  121.         }  
  122.     }  
  123. }  
Inside InputModel class, we need to add all of the properties that we added inside ApplicationUser model class.
 
Now we need to make changes inside the register razor page to add fields related to those four properties.
  1. @page  
  2. @model RegisterModel  
  3. @{  
  4.     ViewData["Title"] = "Register";  
  5. }  
  6.   
  7. <h2 class="text-info pt-2 pb-3">Create a new account</h2>  
  8.   
  9. <div class="row backgroundWhite border">  
  10.   
  11.     <div class="col-md-8">  
  12.         <form asp-route-returnUrl="@Model.ReturnUrl" method="post">  
  13.             <div asp-validation-summary="All" class="text-danger"></div>  
  14.             <div class="form-group">  
  15.                 <div class="row">  
  16.                     <div class="col-4">  
  17.                         <label asp-for="Input.Name"></label>  
  18.                     </div>  
  19.                     <div class="col-8">  
  20.                         <input asp-for="Input.Name" class="form-control" />  
  21.                     </div>  
  22.                     <span asp-validation-for="Input.Name" class="text-danger"></span>  
  23.                 </div>  
  24.             </div>  
  25.   
  26.             <div class="form-group">  
  27.                 <div class="row">  
  28.                     <div class="col-4">  
  29.                         <label asp-for="Input.Email"></label>  
  30.                     </div>  
  31.                     <div class="col-8">  
  32.                         <input asp-for="Input.Email" class="form-control" />  
  33.                     </div>  
  34.                     <span asp-validation-for="Input.Email" class="text-danger"></span>  
  35.                 </div>  
  36.             </div>  
  37.   
  38.             <div class="form-group">  
  39.                 <div class="row">  
  40.                     <div class="col-4">  
  41.                         <label asp-for="Input.PhoneNumber"></label>  
  42.                     </div>  
  43.                     <div class="col-8">  
  44.                         <input asp-for="Input.PhoneNumber" class="form-control" />  
  45.                     </div>  
  46.                     <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>  
  47.                 </div>  
  48.             </div>  
  49.   
  50.             <div class="form-group">  
  51.                 <div class="row">  
  52.                     <div class="col-4">  
  53.                         <label asp-for="Input.Address"></label>  
  54.                     </div>  
  55.                     <div class="col-8">  
  56.                         <input asp-for="Input.Address" class="form-control" />  
  57.                     </div>  
  58.                     <span asp-validation-for="Input.Address" class="text-danger"></span>  
  59.                 </div>  
  60.             </div>  
  61.   
  62.             <div class="form-group">  
  63.                 <div class="row">  
  64.                     <div class="col-4">  
  65.                         <label asp-for="Input.City"></label>  
  66.                     </div>  
  67.                     <div class="col-8">  
  68.                         <input asp-for="Input.City" class="form-control" />  
  69.                     </div>  
  70.                     <span asp-validation-for="Input.City" class="text-danger"></span>  
  71.                 </div>  
  72.             </div>  
  73.   
  74.             <div class="form-group">  
  75.                 <div class="row">  
  76.                     <div class="col-4">  
  77.                         <label asp-for="Input.PostalCode"></label>  
  78.                     </div>  
  79.                     <div class="col-8">  
  80.                         <input asp-for="Input.PostalCode" class="form-control" />  
  81.                     </div>  
  82.                     <span asp-validation-for="Input.PostalCode" class="text-danger"></span>  
  83.                 </div>  
  84.             </div>  
  85.   
  86.             <div class="form-group">  
  87.                 <div class="row">  
  88.                     <div class="col-4">  
  89.                         <label asp-for="Input.Password"></label>  
  90.                     </div>  
  91.                     <div class="col-8">  
  92.                         <input asp-for="Input.Password" class="form-control" />  
  93.                     </div>  
  94.                     <span asp-validation-for="Input.Password" class="text-danger"></span>  
  95.                 </div>  
  96.             </div>  
  97.   
  98.             <div class="form-group">  
  99.                 <div class="row">  
  100.                     <div class="col-4">  
  101.                         <label asp-for="Input.ConfirmPassword"></label>  
  102.                     </div>  
  103.                     <div class="col-8">  
  104.                         <input asp-for="Input.ConfirmPassword" class="form-control" />  
  105.                     </div>  
  106.                     <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>  
  107.                 </div>  
  108.             </div>  
  109.   
  110.             <div class="form-group">  
  111.                 <div class="row">  
  112.                     <div class="col-4">  
  113.                           
  114.                     </div>  
  115.                     <div class="col-8">  
  116.                         <button type="submit" class="btn btn-success form-control">Register</button>  
  117.                     </div>  
  118.                       
  119.                 </div>  
  120.             </div>  
  121.         </form>  
  122.     </div>  
  123.   
  124. </div>  
  125.   
  126.   
  127. @section Scripts {  
  128.     <partial name="_ValidationScriptsPartial" />  
  129. }  
After modifying the existing registration page and adding more fields to it, the final output should look like the below image:
 
Registration Razor Page In ASP.NET Core Razor Pages Web Application
 

Summary

 
In this article, I demonstrated how to create an ASP.NET Core Razor Pages web application. We completed the view for the register functionality, modified the existing registration page and added more properties inside the database to display newly created fields inside the register razor page. 


Similar Articles