blazorrazor-pagesblazor-server-siderazor-components

How to connect cshtml with a _layout.razor


About my problem. When you create a Blazor server side application. You can choose to use Individual Use account. Then Blazor is creating all this for you. I have made some changes in the design of the file " Login.cshtml"

What i want to do now, is to have that at my start page. I the setup that is from the begining. You have a Mainlayout. I want to use my own "LoginLayout".

But the problem is that my Login.cshtml dont fit with LoginLayout.razor

Down here, you can se how the file looks like. This is generated from Blazor.

@page
@model LoginModel


@{
    ViewData["Title"] = "Log in";
}

<div class="row">
    <div class="col-md-4">
        <section>
            <form id="account" method="post">
              <div asp-validation-summary="All" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Input.Email"></label>
                    <input asp-for="Input.Email" class="form-control" />
                    <span asp-validation-for="Input.Email" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Input.Password"></label>
                    <input asp-for="Input.Password" class="form-control" />
                    <span asp-validation-for="Input.Password" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <div class="checkbox">
                        <label asp-for="Input.RememberMe">
                            <input asp-for="Input.RememberMe" />
                            @Html.DisplayNameFor(m => m.Input.RememberMe)
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-lg btn-block">Log in</button>
                </div>
            </form>
        </section>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

I want to have help, so i can use this login.cshtml as my startpage.


Solution

  • Just put the following code at the top of your _Host.cshtml

    @attribute [Microsoft.AspNetCore.Authorization.Authorize]
    

    Note: You cannot display the Login page in Blazor (MainLayout, etc.) The login page is a Razor page. It cannot be integrated with Blazor. The attribute above initiate a redirect to the Login page, which is displayed in a layout of its own. This is not Blazor. This is Razor pages. Only after the user has been logged in, will
    a redirection to the Blazor app be made.

    Hope this works...