Blog

Blazor EditForm 사용하는 방법입니다.

• 표준 HTML 양식과 입력 요소를 사용하여 blazor 양식을 만들 수 있습니다.
• 그러나 Blazor에는 양식 작성 작업을 훨씬 쉽게 해주는 몇 가지 기본 제공 양식 및 입력 구성 요소가 함께 제공됩니다.
• 이러한 기본 제공 blazor 양식 구성 요소는 양식 유효성 검사도 지원합니다.

Blazor form input components

다음은 사용 가능한 내장 blazor form components 중 일부입니다.

Input Text element	InputText
Multiline Textbox(textarea)	InputTextArea
DatePicker	InputDate
CheckBox	InputCheckbox
Input element for numbers	InputNumber
Dropdownlist	InputSelect

Blazor EditForm Component

• Blazor에서 양식은 EditForm 구성 요소를 사용하여 정의됩니다.
• 속성 은 @Model 양식이 바인딩되고 작업할 데이터를 지정합니다.
• Model 속성 값은 Employee구성 요소 클래스의 속성이며 작업할 직원 데이터를 전달합니다.
• InputText Component 는 에 bind-value 속성을 이용해 Employee.FirstName 에 바인딩됩니다.
• 이 속성은 양방향 데이터 바인딩을 제공합니다. 즉, 개체 FirstName 속성 의 값이 Employee 입력 요소에 표시됩니다. firstname입력 요소의 값을 변경하면 변경된 Employee.FirstName값으로 속성이 자동으로 업데이트됩니다.

Edit Employee Form Example

우리는 Edit Employee Form이 아래와 같이 보이길 원합니다.

Edit Employee View (EmployeeDetails.razor)

Id 매개 변수가 있습니다. 수정하려는 직원의 ID입니다.

@page "/editemployee/{id}"

@inherits EditEmployeeBase

<EditForm Model="@Employee">
    <h3>Edit Employee</h3>
    <hr />
    <div class="form-group row">
        <label for="firstName" class="col-sm-2 col-form-label">
            First Name
        </label>
        <div class="col-sm-10">
            <InputText id="firstName" class="form-control" placeholder="First Name"
                       @bind-Value="Employee.FirstName" />
        </div>
    </div>
    <div class="form-group row">
        <label for="lastName" class="col-sm-2 col-form-label">
            Last Name
        </label>
        <div class="col-sm-10">
            <InputText id="lastName" class="form-control" placeholder="Last Name"
                       @bind-Value="Employee.LastName" />
        </div>
    </div>
    <div class="form-group row">
        <label for="email" class="col-sm-2 col-form-label">
            Email
        </label>
        <div class="col-sm-10">
            <InputText id="email" class="form-control" placeholder="Email"
                       @bind-Value="Employee.Email" />
        </div>
    </div>
</EditForm>

Edit Employee Component Class (EditEmployeeBase.cs)

• Employee속성에는 편집하려는 직원 데이터가 포함되어 있습니다.
• EmployeeService ID로 직원 세부 정보를 검색합니다.
• 속성은 IdURL에서 직원 ID를 받습니다.

public class EditEmployeeBase : ComponentBase
{
    public Employee Employee { get; set; } = new Employee();

    [Inject]
    public IEmployeeService EmployeeService { get; set; }

    [Parameter]
    public string Id { get; set; }

    protected async override Task OnInitializedAsync()
    {
        Employee = await EmployeeService.GetEmployee(int.Parse(Id));
    }
}

Redirect to EditEmployee component

Edit컴포넌트 의 버튼을 클릭 하면 DisplayEmployee사용자를 EditEmployee컴포넌트로 리디렉션합니다. 편집할 직원의 Id 는 URL에 경로 매개변수로 전달됩니다.

<a href="@($"editemployee/{Employee.EmployeeId}")"
    class="btn btn-primary m-1">Edit</a>