how to render razor page to another based on provide logic to login

Question

 <MudPaper Class="px-6 pb-8 pt-3 rounded-t-0">

@if (IsPhoneNumberPresent)

 {

     <RegistrationForm LoginModel="@(new OtpRegisterVm { Username = LoginPhoneNumber, CountryCode = CountryCode })" />

 }

 else

 {

     <RegistrationForm />

 }
 </MudPaper>

this is blazor code need to be convert to razor with same functionality

Answer 1

@page "/register"

@using FaceAdminWebApp.ViewModels

@model FaceAdminWebApp.Pages.Auth.RegisterModel

@{

ViewData["Title"] = "Register";

}
<h1>Register</h1>

@if (!Model.IsPhoneNumberPresent)

{
<div class="px-6 pb-8 pt-3 rounded-t-0">

    <a asp-page="RegistrationForm" model='@(new OtpRegisterVm { Username = Model.LoginPhoneNumber, CountryCode = Model.CountryCode })' />

</div>
}

else

{
<div class="px-6 pb-8 pt-3 rounded-t-0">

    <a asp-page="RegistrationForm" />

</div>
}

```this is my register page form this page based on this condtions need to render formpage of 

```aspx-csharp

@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>}

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 all registrationform.cshtml and .cs pages . here i need to handle registratuonFormpage from register page

Answer 2

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.cshtml.cs page if   if (!string.IsNullOrEmpty(LoginPhoneNumber))

        {

            IsPhoneNumberPresent = true; conditiin satifies (no number provided) it should render "RegistrationForm" /> through register.cshtml in else blcok to enter a number , if phonenumber is present  register form should be displayed to register based on otp @if (!Model.IsPhoneNumberPresent)

{

<div class="px-6 pb-8 pt-3 rounded-t-0">

    <"RegistrationForm" model='@(new OtpRegisterVm { Username = Model.LoginPhoneNumber, CountryCode = Model.CountryCode })' />

</div>

}of this block

Answer 3

How to separate code based on its condition ,? what needs to be in register page and Registration Form page