Error while submitting the registration form

Question

RegistrationForm.cshtml

@page
@model FaceAdminApp.Pages.Auth.RegistrationFormModel
@{
    ViewData["Title"] = "RegistrationForm";
}

   
   
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            Enterprise Name
            
            
            @foreach (var enterprise in Model.SearchEnterprise(Model.Enterprise).Result)
            {
                @enterprise
            }
            @* @Model.ValidateEnterprise(Model.Enterprise) *@
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
    
    
        Login

RegistrationForm.cshtml.cs

using FaceAdminApp.Auth;
using FaceAdminApp.DTOs;
using FaceAdminApp.Services;
using FaceAdminApp.Utilities;
using FaceAdminApp.ViewModels;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Text;
namespace FaceAdminApp.Pages.Auth
{
    public class RegistrationFormModel : PageModel
    {
        private readonly VacApiService _apiService;
        private readonly ILoginService _loginService;
        private readonly NavigationManager _navManager;
        private readonly DialogService _dialogService;
        public RegistrationFormModel(VacApiService apiService, ILoginService loginService, NavigationManager navManager, DialogService dialogService)
        {
            _apiService = apiService;
            _loginService = loginService;
            _navManager = navManager;
            _dialogService = dialogService;
            SelectListDto = new SelectListDto();
            RegisterVmModel = new RegisterVm();
            LoginModel = new OtpRegisterVm();
        }
        [BindProperty]
        public RegisterVm RegisterVmModel { get; set; }
		[BindProperty]
        public OtpRegisterVm LoginModel { get; set; }
        [BindProperty]
        public int StepOffset { get; set; } = 0;
        public string Enterprise { get; set; }
        [BindProperty]
        public string Username { get; set; }
        //public SelectListDto SelectListDto = new();
        public SelectListDto SelectListDto { get; set; }
        public List Enterprises = new List();
        public LoginResultDto response;
        public bool Processing = false;
        [BindProperty]
        public bool OtpProcessing { get; set; } = false;
        public bool EnterpriseError = false;
        public bool IsPhoneNumberValidated = false;
        [BindProperty]
        public IFormFile Photo { get; set; }
        public async Task OnPostValidSubmit()
        {
            Processing = true;
            if (!ModelState.IsValid)
            {
                return Page();
            }
            var dto = await MapVmToDto();
            // Access mobile number as username
            var username = LoginModel.CountryCode + LoginModel.Username;
            dto.UserName = username;
            if (Photo != null && Photo.Length > 0)
            {
                if (!IsImageFile(Photo.FileName))
                {
                    Notify.Add(TempData, false, "Please upload a valid image file.", "");
                    Processing = false;
                    return Page();
                }
                // Save the file to a location or process it
                var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads", Photo.FileName);
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await Photo.CopyToAsync(stream);
                }
                // Attach the file path to your DTO
                dto.PhotoPath = filePath;
            }
            var response = await _apiService.RegisterUser(dto);
            if (response.Succeeded)
            {
                Notify.Add(TempData, false, "Registration was successful.", "");
            }
            else
            {
                Notify.Add(TempData, false, response.Error, "");
                Processing = false;
            }
            return Page();
        }
        public bool IsImageFile(string fileName)
        {
            var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif" };
            var extension = Path.GetExtension(fileName).ToLowerInvariant();
            return allowedExtensions.Contains(extension);
        }
        public async Task MapVmToDto()
        {
            // Access mobile number as username
            var username = LoginModel.CountryCode + LoginModel.Username;
            var item = SelectListDto.SelectList.FirstOrDefault(e =>
                e.Name.Equals(RegisterVmModel.Enterprise, StringComparison.OrdinalIgnoreCase));
            var enterpriseId = item is null ? 0 : item.Id;
            var dto = new RegisterDto
            {
                FirstName = RegisterVmModel.FirstName,
                LastName = RegisterVmModel.LastName,
                //UserName = LoginModel.CountryCode + LoginModel.Username,
                UserName = username,
                EnterpriseId = enterpriseId,
                EmployeeId = RegisterVmModel.EmployeeId,
                Password = RegisterVmModel.Password,
            };
            return dto;
        }
        public string ValidateEnterprise(string input)
        {
            if (!Enterprises.Contains(input))
            {
                return "Only registered enterprises allowed";
            }
            return null;
        }
        public async Task> SearchEnterprise(string value)
        {
            if (string.IsNullOrEmpty(value) || value.Length < 3)
                return Enumerable.Empty();
            return await Task.FromResult(Enterprises.Where(x => x.StartsWith(value, StringComparison.InvariantCultureIgnoreCase)));
        }
    }
}

While submitting the form, the breakpoint hits while checking the model state and there are invalid details fetched from the OtpRegisterVm and I have used bind property but it is not working and when bind property is removed for the OtpRegisterVm model, the details are all valid for the RegisterVmModel. The OtpRegisterVm contains the username, country code and password and these are fetched from Register.cshtml.cs -

Register.cshtml.cs

using FaceAdminApp.Auth;
using FaceAdminApp.DTOs;
using FaceAdminApp.Models;
using FaceAdminApp.Services;
using FaceAdminApp.Utilities;
using FaceAdminApp.ViewModels;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace FaceAdminApp.Pages.Auth
{
    public class RegisterModel : PageModel
    {
        private readonly ILoginService _loginService;
        private readonly VacApiService _apiService;
        public RegisterModel(ILoginService loginService, VacApiService apiService)
        {
            _loginService = loginService;
            _apiService = apiService;
        }
        [BindProperty]
        public string LoginPhoneNumber { get; set; }
        [BindProperty]
        public string CountryCode { get; set; }
        [BindProperty]
        public OtpRegisterVm LoginModel { get; set; }
        public bool IsPhoneNumberPresent { get; set; } = false;
        public bool IsPhoneNumberValidated { get; set; }
        public bool OtpProcessing { get; set; }
        public bool Processing { get; set; }
        //public void OnGet()
        //{
        //    if (!string.IsNullOrEmpty(LoginPhoneNumber))
        //    {
        //        IsPhoneNumberPresent = true;
        //        LoginModel = new OtpRegisterVm { Username = LoginPhoneNumber, CountryCode = CountryCode };
        //    }
        //    else
        //    {
        //        IsPhoneNumberPresent = false;
        //    }
        //}
        public void OnGet()
        {
            if (!string.IsNullOrEmpty(LoginPhoneNumber))
            {
                IsPhoneNumberPresent = true;
            }
            else
            {
                IsPhoneNumberPresent = false;
            }
        }
        public async Task OnPostGenerateOtpAsync()
        {
            OtpProcessing = true;
            if (LoginModel == null || string.IsNullOrEmpty(LoginModel.Username))
            {
                Notify.Add(TempData, false, "", "Phone Number required");
                OtpProcessing = false;
                return Page();
            }
            else if (LoginModel.Username.Length < 10)
            {
                Notify.Add(TempData, false, "", "Enter valid Phone Number");
                OtpProcessing = false;
                return Page();
            }
            //Notify.Add(TempData, true, $"OTP Generated successfully: {generatedOtp}", "");
            var dto = new PhoneNumberDto { PhoneNumber = LoginModel.CountryCode + LoginModel.Username };
            var response = await _apiService.GenerateRegisterOtp(dto);
            if (response.IsSuccess)
            {
                Notify.Add(TempData, true, "OTP Generated successfully", "");
            }
            else
            {
                Notify.Add(TempData, false, "", response.Message);
            }
            OtpProcessing = false;
            return Page();
        }
        public async Task OnPostAsync()
        {
            Processing = true;
            if (string.IsNullOrEmpty(LoginModel.Username) || string.IsNullOrEmpty(LoginModel.Password))
            {
                Notify.Add(TempData, false, "", "Phone Number and OTP are required");
                Processing = false;
                return Page();
            }
            if (LoginModel.Username.Length < 10 || LoginModel.Password.Length != 6)
            {
                Notify.Add(TempData, false, "", "Invalid Phone Number or OTP");
                Processing = false;
                return Page();
            }
            var dto = new LoginDto { Username = LoginModel.CountryCode + LoginModel.Username, Password = LoginModel.Password };
            var response = await _apiService.ValidateRegisterOtp(dto);
            if (response.IsSuccess)
            {
                Notify.Add(TempData, true, "Phone number validated", "");
                IsPhoneNumberValidated = true;
            }
            else
            {
                Notify.Add(TempData, false, "", response.Message);
            }
            Processing = false;
            return RedirectToPage("/Auth/RegistrationForm");
        }
    }
}

pro-U5N9oLnw.jpeg

Answer

Hi @Surya Chandra Mohan,

For ModelState invalid, it seems your LoginModel does not receive value. For you said you get it from Register.cshtml.cs, I never seen you send this data in this cs file. Any way, I will share detailed explanation for how to send data from one page to another page.

In Razor Pages, it contains RedirectToPage method to pass data by route data, but you cannot pass complex objects as route data. The route data feature only supports simple objects like int and string. If you want to retain more complex objects across requests, you need to use Sessions or TempData.

For TempData,it uses Session, which itself uses IDistributedCache. IDistributedCache doesn't have the capability to accept objects or to serialize objects. So you need manually serialize/deserialize.

Here is a sample

1.Set the TempData before redirection in Register.cshtml.cs:

LoginModel = new OtpRegisterVm()
{
    Username = "aa",
    CountryCode = "ddd"
};      //for easy testing, i just hard-coding, you need be sure it contains value...

TempData["model"] = System.Text.Json.JsonSerializer.Serialize(LoginModel);   
return RedirectToPage("/Auth/RegistrationForm");

2.Receive the TempData and set the value to OtpRegisterVm LoginModel in OnPostValidSubmit in RegistrationForm.cshtml.cs:

Processing = true;
var data = TempData["model"] as string;
LoginModel = System.Text.Json.JsonSerializer.Deserialize(data);
if (!ModelState.IsValid)
{
    return Page();
}

3.Remove the [BindProperty] on OtpRegisterVm LoginModel in RegistrationForm.cshtml.cs .

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Rena

Answer

I am able to fetch the username from one page to another and when the controller method is called, there is a status code 500 internal server error

If I understand, your original problem is solved. This is a new problem?

According to the screenshot the API URL (localhost:5143/api/identity/register) returned a 500 error. There can be many reasons for the 500 error. Unfortunately, you did not share any relevant source code pertaining to this error. We need the controller and the custom _httpService.Post service to do a code review.

It would be easier and quicker if you debugged your own code. Use a tool like PostMan to call the Web API directly. Or use Swagger to call Web API.

Share via

Error while submitting the registration form

2 answers

Here is a sample