ASP.Net Core Blazor WASM 도전기(로그인 폼)

아

 

ASP.Net Core Blazor WebAssembly

다른건 다 이해하겠는데 솔직히 이름이 너무 길다

 

검색난이도가 빡센거 같다.

 

 

 

유튜브 보고 대충 만들어봤다.

www.youtube.com/watch?v=S9AonrrIuLE

이 아저씨가 설명을 되게 잘한다.

 

대충의 코드

@page "/auth/register"
@layout AuthLayout
@using FreeBlazorApp.Shared

<div class="row">
    <div class="col-12">
        <h2>Create new account</h2>
        <EditForm Model="model" OnInvalidSubmit="RegisterUser">
            <RadzenCard>
                <DataAnnotationsValidator />
                <ValidationSummary />

                <label>First Name</label>
                <RadzenTextBox @bind-Value="model.Firstname"></RadzenTextBox>

                <label>Last Name</label>
                <RadzenTextBox @bind-Value="model.Lastname"></RadzenTextBox>

                <label>Email</label>
                <RadzenTextBox @bind-Value="model.Email"></RadzenTextBox>

                <label>Password</label>
                <RadzenTextBox @bind-Value="model.Password"></RadzenTextBox>

                <label>Confirm Password</label>
                <RadzenTextBox @bind-Value="model.ConfirmPassword"></RadzenTextBox>
                <hr />

                <RadzenButton ButtonType="Radzen.ButtonType.Submit"
                              Text="Register"
                              ButtonStyle="Radzen.ButtonStyle.Primary"
                              class="btn-block mr-2" />

                <RadzenButton ButtonType="Radzen.ButtonType.Button"
                              Text="Login"
                              ButtonStyle="Radzen.ButtonStyle.Secondary"
                              class="btn-block mr-2" />
            </RadzenCard>
        </EditForm>
    </div>
</div>


@code {
    RegisterRequest model = new RegisterRequest();

    public void RegisterUser()
    {

    }
}

 

이거는 AuthLayout

@inherits LayoutComponentBase

<div class="middle-box">
    <h1>welcome to planner App</h1>
    @Body
</div>

 

이거는 CSS

.middle-box {
    margin: auto;
    margin-top: 150px;
    box-shadow: 5px 10px 18px #888888;
    border-radius: 20px;
}

 

뭔가 코드를 블로그로 써내기가 어려운것 같다.

 

근데 이 강좌의 큰 단점으로는

RestAPI를 만들어 놔야 다른 강의를 진행할 수 있다는 점인데,

이건 장고로 따로 만들어서 해야겠다,,

 

ㄷㄷ