Login modal in ASP.net Core Razor Pages

user_6638152 0
Viewed 1112

I want to create an asp.net core razor pages (not MVC) program with modal for some of it's functionalities like login, forgot password, etc. I created a razor page for login with bootstrap modal and a link for open modal in frontend and LoginViewModel and RegistrationServices in backend. How can I use this page to access login modal in all pages? Can I use Partial view? How? otherwise, what is the solution? This is _Login:

   public class _LoginModel : PageModel
{
    private readonly ICookieAuthenticationService _cookieAuthenticationService;
    private readonly IUserRegistrationService _userRegistrationService;
    private readonly IUserService _userService;

    public _LoginModel(ICookieAuthenticationService cookieAuthenticationService,
        IUserRegistrationService userRegistrationService,
        IUserService userService)
    {
        _cookieAuthenticationService = cookieAuthenticationService;
        _userRegistrationService = userRegistrationService;
        _userService = userService;
    }

    [BindProperty]
    public LoginViewModel LoginViewModel { get; set; }

    [TempData]
    public string ErrorMessage { get; set; }
    
    ...
}

I removed @page from _Login and inject services and use this for partial view:

<partial name="_Login" model="new _LoginModel(cookieAuthenticationService, userRegistrationService, userService, logService)" />

but post method does not work because of remove @page.

bootstrap-modal razor-pages asp.net-core popup c#
1 Answers

I want to create an asp.net core razor pages (not MVC) program with modal for some of it's functionalities like login, forgot password, etc.

A partial page is a Razor markup file (.cshtml) without an @page directive, but as you mentioned that if you remove @page directive from _Login.cshtml, which would cause Razor Page feature, such as page handler(s) etc, not work well anymore.

To achieve the requirement of showing login etc functionality in a modal popup, you can use a additional partial page _LoginPartial.cshtml, and make it post to _Login handler, like below.

@model _LoginModel

<div class="row">
    <div class="col-md-4">
        <section>
            <form method="post" asp-page="_Login">
                <h4>Use a local account to log in.</h4>
                <hr />
                <div asp-validation-summary="All" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="LoginViewModel.Email"></label>
                    <input asp-for="LoginViewModel.Email" class="form-control" />
                    <span asp-validation-for="LoginViewModel.Email" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="LoginViewModel.Password"></label>
                    <input asp-for="LoginViewModel.Password" class="form-control" />
                    <span asp-validation-for="LoginViewModel.Password" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Log in</button>
                </div>
            </form>
        </section>
    </div>
</div>

Invoke _LoginPartial

<partial name="_LoginPartial" model='...

Update:

how to validate inputs before post to new page? things like empty password or invalid user.

Client-side validation could help prevent submission until the form is valid. You can use following code in your view page, which would help add required script references that supports client-side validation.

@section scripts{ 
    <partial name="_ValidationScriptsPartial" />
}
user_67516340
Related