[Blazor] Blazor Form 사용하기 - EditForm Model

EditForm 의 Model 에 객체를 바인딩하여 사용하는 방법입니다.

Pizza 항목이 나열된 경우 특정 항목의 Edit 버튼을 눌렀을때 해당 데이터가 표시되도록 합니다.

BlazorFormTest.razor

@page "/blazorformtest/{pizzaId}"

@using Blazor.AppTest.Data
@using Blazor.AppTest.Services

<EditForm Model="@Pizza">
    <h3>Edit Employee</h3>
    <hr />
    <div class="form-group row">
        <label for="name" class="col-sm-2 col-form-label">
            Name
        </label>
        <div class="col-sm-10">
            <InputText id="name" class="form-control" placeholder="Name" @bind-Value="Pizza.Name" />
        </div>
    </div>
    <div class="form-group row">
        <label for="price" class="col-sm-2 col-form-label">
            Last Name
        </label>
        <div class="col-sm-10">
            <InputNumber id="price" class="form-control" placeholder="Price" @bind-Value="Pizza.Price" />
        </div>
    </div>
    <div class="form-group row">
        <label for="description" class="col-sm-2 col-form-label">
            Description
        </label>
        <div class="col-sm-10">
            <InputText id="description" class="form-control" placeholder="Description" @bind-Value="Pizza.Description" />
        </div>
    </div>
</EditForm>

@code
{
    public PizzaItem Pizza { get; set; } = new PizzaItem();

    [Inject]
    public PizzaService PizzaService { get; set; }

    [Parameter]
    public string PizzaId { get; set; } = "1";

    protected async override Task OnInitializedAsync()
    {
        Pizza = await PizzaService.GetPizzaAsync(int.Parse(PizzaId));
    }
}

위 화면이 호출되도록 Edit 버튼에 연결합니다.

<a href="@($"blazorformtest/{pizza.PizzaId}")" class="btn btn-primary m-1">Edit</a>

Pizzas.razor

@page "/pizzas"
@using Blazor.AppTest.Data
@using Blazor.AppTest.Services

@inject PizzaService PizzaSvc

<h3>Pizza</h3>

@if (todaysPizzas == null)
{
    <p>We're finding out what pizzas are available today...</p>
}
else
{
    <table>
        <thead>
            <tr>
                <th>| Pizza Name </th>
                <th>| Description </th>
                <th>| Vegetarian </th>
                <th>| Vegan </th>
                <th>| Price | </th>
                <th>| Edit | </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var pizza in todaysPizzas)
            {
                <tr>
                    <td>@pizza.Name</td>
                    <td>@pizza.Description</td>
                    <td>@pizza.Vegetarian</td>
                    <td>@pizza.Vegan</td>
                    <td>@pizza.Price</td>
                    <td>
                        <a href="@($"blazorformtest/{pizza.PizzaId}")" class="btn btn-primary m-1">Edit</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private PizzaItem[]? todaysPizzas;

    protected override async Task OnInitializedAsync()
    {
        todaysPizzas = await PizzaSvc.GetPizzasAsync();
    }
}

실행결과

[Source]
https://github.com/kei-soft/Blazor.AppTest/blob/master/Blazor.AppTest/Pages/BlazorFormTest.razor

GitHub - kei-soft/Blazor.AppTest