A community member has associated this post with a similar question:
how to render razor page to another based on provide logic to login
Only moderators can edit this content.
need to render a page to another through loginform
Register.cshtml
@page "/register"
@using FaceAdminWebApp.ViewModels
@model FaceAdminWebApp.Pages.Auth.RegisterModel
@{
ViewData["Title"] = "Register";
}
<h1>Register</h1>
@if (Model.IsPhoneNumberPresent)
{
var loginModel = new OtpRegisterVm { Username = Model.LoginPhoneNumber, CountryCode = Model.CountryCode };
}
else
{
<RegistartionForm/>
}
Register.cshtml.cs
using FaceAdminWebApp.Auth;
using FaceAdminWebApp.Services;
using FaceAdminWebApp.Utilities;
using FaceAdminWebApp.ViewModels;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace FaceAdminWebApp.Pages.Auth
{
public class RegisterModel : PageModel
{
private readonly ILoginService _loginService;
private readonly VacApiService _apiService;
private readonly NavigationManager _navManager;
public RegisterModel(ILoginService loginService, VacApiService apiService, NavigationManager navManager)
{
_loginService = loginService;
_apiService = apiService;
_navManager = navManager;
}
[BindProperty]
public string LoginPhoneNumber { get; set; }
[BindProperty]
public string CountryCode { get; set; }
public bool IsPhoneNumberPresent { get; set; } = false;
public RegisterVm RegisterVmModel { get; set; } = new RegisterVm();
[BindProperty]
public OtpRegisterVm LoginModel { get; set; } = new OtpRegisterVm();
public void OnGet()
{
// Your initialization logic
if (!string.IsNullOrEmpty(LoginPhoneNumber))
{
IsPhoneNumberPresent = true;
Notify.Add(TempData, false, "", "Your Phone Number is not Registered. Please Register yourself to use VaxID application.");
}
}
public IActionResult OnPost()
{
return RedirectToPage("/login");
}
}
}
this is register page should execute if else block based on the condition(ongetmethod) if number not provided , phonenumber present will be false so it should execute else blaock and that registrationform shoudbe displayed , if present its loginmodel should be displayed to register for the new user and my RegistratonForm page is
RegistrationForm.cshtml
@page
@model FaceAdminWebApp.Pages.Auth.RegistrationFormModel
@{
ViewData["Title"] = "RegistrationForm ";
}
<h3>REGISTER</h3>
@if (!Model.IsPhoneNumberValidated)
{
<EditForm Model="@Model.LoginModel" OnValidSubmit="OnValidPhoneNumberSubmit" autocomplete="off">
<DataAnnotationsValidator />
<div class="text-center mt-3" style="color: lightgrey;">
<span>STEP @(1 + Model.StepOffset) / @(2 + Model.StepOffset)</span>
</div>
<div class="px-3 my-1 d-flex justify-center">
<div class="form-group">
<label for="Country">Country</label>
<select class="form-control" id="Country" asp-for="LoginModel.CountryCode">
<option value="+91">+91</option>
<option value="+49">+49</option>
<option value="+1">+1</option>
</select>
<label for="MobilePhoneNumber">Mobile Phone Number</label>
<input type="text" class="form-control" id="MobilePhoneNumber" asp-for="LoginModel.Username">
</div>
@* <button type="submit" class="btn btn-primary">Submit</button> *@
</div>
<div class="d-flex justify-space-between align-center mt-1">
<div>
<label for="OTP">OTP</label>
<input id="OTP" type="text" class="form-control" asp-for="LoginModel.Password" autocomplete="off" />
</div>
<form method="post" asp-page-handler="GenerateOtp">
<button type="submit" class="btn btn-outline-primary btn-sm ml-4 mt-4" style="width: 150px;"
disabled="@Model.OtpProcessing">
@if (Model.OtpProcessing)
{
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<span>GENERATING</span>
}
else
{
<span>GENERATE OTP</span>
}
</button>
</form>
</div>
<div class="mt-6 d-flex justify-space-between align-center">
<button type="button" class="btn btn-secondary" onclick="window.location.href = '/Auth/Login'">
Login
</button>
<button type="submit" class="btn btn-primary ml-4" disabled="@Model.Processing">
@if (Model.Processing)
{
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<span>VALIDATING</span>
}
else
{
<span>VALIDATE</span>
}
</button>
</div>
</EditForm>
}
else
{
<EditForm Model="@Model" OnValidSubmit="OnValidSubmit" autocomplete="off">
<DataAnnotationsValidator />
<div class="mt-3 text-center" style="color: lightgrey;">
<span>STEP @(2 + Model.StepOffset) / @(2 + Model.StepOffset)</span>
</div>
@if (Model.IsPictureUploaded)
{
<form method="post">
<div class="form-group">
<label asp-for="RegisterVmModel.FirstName"></label>
<input asp-for="RegisterVmModel.FirstName" class="form-control" autocomplete="off" />
</div>
<div class="form-group">
<label asp-for="RegisterVmModel.LastName"></label>
<input asp-for="RegisterVmModel.LastName" class="form-control" autocomplete="off" />
</div>
<div class="form-group">
<label asp-for="RegisterVmModel.EmployeeId"></label>
<input asp-for="RegisterVmModel.EmployeeId" class="form-control" autocomplete="off" />
</div>
<div class="form-group">
<label asp-for="RegisterVmModel.Enterprise">Enterprise Name</label>
<input id="enterpriseInput" class="form-control" autocomplete="off" asp-for="RegisterVmModel.Enterprise" />
<!-- Display matched enterprises based on user input -->
@foreach (var enterprise in Model.SearchEnterprise(Model.Enterprise).Result)
{
<div>@enterprise</div>
}
<span class="text-danger">@Model.ValidateEnterprise(Model.Enterprise)</span>
<span class="adornment-icon">
<i class="material-icons">search</i>
</span>
</div>
<div class="form-group">
<label asp-for="RegisterVmModel.Password"></label>
<input asp-for="RegisterVmModel.Password" class="form-control" autocomplete="off" type="password" />
</div>
<div class="form-group">
<label asp-for="RegisterVmModel.ConfirmPassword"></label>
<input asp-for="RegisterVmModel.ConfirmPassword" class="form-control" autocomplete="off" type="password" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
}
<div class="mt-2">
<div class="row">
<div class="col-7 col-sm-6">
<div class="d-flex flex-column justify-content-around align-items-center" style="height: 100%;">
<p class="text-center">Profile Picture</p>
<form method="post" asp-page-handler="TakePhoto">
<!-- You can include additional form fields here if needed -->
<button type="submit" class="btn btn-outline-primary btn-sm">Attach</button>
</form>
</div>
</div>
<div class="col-5 col-sm-6">
<div class="d-flex justify-content-center align-items-center">
<img src="@Model.ProfilePhoto" height="75" />
</div>
</div>
</div>
</div>
<div class="mt-6 d-flex justify-space-between align-center">
<button type="button" class="btn btn-secondary" name="handler" value="NavigateToLogin">
<span class="material-icons">chevron_left</span>
Login
</button>
@if (Model.IsPictureUploaded)
{
<form method="post" action="Register">
<button type="submit" class="btn btn-primary" disabled="@Model.Processing">
@if (Model.Processing)
{
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span>REGISTERING</span>
}
else
{
<span>REGISTER</span>
}
</button>
</form>
}
else
{
<form method="post" asp-action="UploadPhotoSecondAttempt">
<button type="submit" class="btn btn-secondary ml-4" disabled="@Model.Processing">
@if (Model.Processing)
{
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span>UPLOADING</span>
}
else
{
<span>UPLOAD PHOTO</span>
}
</button>
</form>
}
</div>
</EditForm>
}
RegistrationForm.cshtml.cs
using FaceAdminWebApp.Auth;
using FaceAdminWebApp.DTOs;
using FaceAdminWebApp.Services;
using FaceAdminWebApp.Utilities;
using FaceAdminWebApp.ViewModels;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Text;
namespace FaceAdminWebApp.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;
}
[BindProperty]
public RegisterVm RegisterVmModel { get; set; }
[BindProperty]
public OtpRegisterVm LoginModel { get; set; }
[BindProperty]
public int StepOffset { get; set; } = 0;
[BindProperty]
public string Enterprise { get; set; }
private string CountryCode = "+91";
private string PhotoBase64String = null;
private string PhotoFileName = string.Empty;
public string ProfilePhoto = "/avatar.png";
private SelectListDto SelectListDto = new();
private List<string> Enterprises = new List<string>();
private LoginResultDto response;
public bool Processing = false;
[BindProperty]
public bool OtpProcessing { get; set; } = false;
private bool EnterpriseError = false;
public bool IsPhoneNumberValidated = false;
public bool IsPictureUploaded = true;
public async Task<IActionResult> OnPostGenerateOtpAsync()
{
OtpProcessing = true;
if (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();
}
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 RedirectToPage("/Auth/RegistrationForm");
}
public async Task<IEnumerable<string>> SearchEnterprise(string value)
{
if (string.IsNullOrEmpty(value) || value.Length < 3)
return Enumerable.Empty<string>();
return await Task.FromResult(Enterprises.Where(x => x.StartsWith(value, StringComparison.InvariantCultureIgnoreCase)));
}
public string ValidateEnterprise(string input)
{
if (!Enterprises.Contains(input))
{
return "Only registered enterprises allowed";
}
return null;
}
public async Task OnValidPhoneNumberSubmit()
{
Processing = true;
if (LoginModel.Username.Length < 10 || LoginModel.Password.Length != 6)
{
Notify.Add(TempData, false, $"Invalid Phone Number or OTP", ""); // Note: Empty string for details
Processing = false;
return;
}
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", ""); // Note: Empty string for details
IsPhoneNumberValidated = true;
}
else
{
Notify.Add(TempData, false, $"{response.Message}", ""); // Note: Empty string for details
}
Processing = false;
//await InvokeAsync(StateHasChanged);
}
public async Task<IActionResult> OnValidSubmit()
{
if (!ModelState.IsValid)
{
return Page();
}
if (PhotoBase64String is null)
{
await ConfirmNoPhotoSubmission();
return Page();
}
Processing = true;
var dto = await MapVmToDto();
var response = await _apiService.RegisterUser(dto);
if (response.Succeeded)
{
Notify.Add(TempData, false, "Registration was successful.", "");
await UploadPhotoSecondAttempt();
}
else
{
Notify.Add(TempData, false, response.Error, "");
Processing = false;
}
return Page();
}
private async Task<RegisterDto> MapVmToDto()
{
var item = SelectListDto.SelectList.FirstOrDefault(e =>
e.Name.Equals(RegisterVmModel.Enterprise, StringComparison.OrdinalIgnoreCase));
var enterpriseId = item is null ? 0 : item.Id;
return new RegisterDto
{
FirstName = RegisterVmModel.FirstName,
LastName = RegisterVmModel.LastName,
UserName = LoginModel.CountryCode + LoginModel.Username,
EnterpriseId = enterpriseId,
EmployeeId = RegisterVmModel.EmployeeId,
Password = RegisterVmModel.Password,
};
}
private async Task UploadPhotoSecondAttempt()
{
if (PhotoBase64String != null)
{
var bytes = Convert.FromBase64String(PhotoBase64String);
using (var ms = new MemoryStream(bytes))
{
var content = new MultipartFormDataContent();
var fileContent = new StreamContent(ms);
content.Add(fileContent, "file", PhotoFileName);
var stringContent = new StringContent(response.Id.ToString(), Encoding.UTF8, "text/plain");
content.Add(stringContent, "id");
var pictureResult = await _apiService.UpdateProfilePictureFromFile(content);
if (pictureResult)
{
Notify.Add(TempData, false, "Profile picture uploaded", "");
}
else
{
Notify.Add(TempData, false, "Error while uploading profile picture. Upload again", "");
IsPictureUploaded = false;
Processing = false;
}
}
}
else
{
await ConfirmNoPhotoSubmission();
}
Processing = false;
await _loginService.Login(response);
_navManager.NavigateTo("/");
}
private async Task ConfirmNoPhotoSubmission()
{
//var dialogResult = await _dialogService.ShowMessageBox("Photo Missing",
// "No Profile Picture is attached, Profile Picture is required.",
// "OK");
// Handle dialog result if needed
}
public IActionResult OnPostNavigateToLogin()
{
return RedirectToPage("/Login");
}
}
}
this is blazor logic to register
<MudTabPanel Text="I Don't Have">
<MudPaper Class="px-6 pb-8 pt-3 rounded-t-0">
@if (IsPhoneNumberPresent)
{
<RegistrationForm LoginModel="@(new OtpRegisterVm { Username = LoginPhoneNumber, CountryCode = CountryCode })" />
}
else
{
<RegistrationForm />
}
</MudPaper>
</MudTabPanel>
i need to converthis to razor pages syntax to register