ASP.NET Core Blazor 양식 개요

• 데이터 주석을 사용할 수 있는 개체 또는 모델에 바인딩됩니다.
  • 요소가 있는 HTML 양식입니다 <form> .
  • EditForm 구성 요소.
• 기본 제공 입력 구성 요소입니다.

• EditForm 데이터 주석을 사용할 수 있는 개체 또는 모델에 바인딩된 구성 요소입니다.
• 기본 제공 입력 구성 요소입니다.

표준 HTML 양식이 지원됩니다. 일반 HTML <form> 태그를 사용하여 양식을 만들고 제출된 양식 요청을 처리하기 위한 처리기를 지정 @onsubmit 합니다.

StarshipPlainForm.razor:

@page "/starship-plain-form"
@inject ILogger<StarshipPlainForm> Logger

<form method="post" @onsubmit="Submit" @formname="starship-plain-form">
    <AntiforgeryToken />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

@code {
    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        public string? Id { get; set; }
    }
}

@page "/starship-plain-form"
@inject ILogger<StarshipPlainForm> Logger

<form method="post" @onsubmit="Submit" @formname="starship-plain-form">
    <AntiforgeryToken />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

@code {
    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        public string? Id { get; set; }
    }
}

위의 StarshipPlainForm 구성 요소에서:

• 요소가 나타나는 위치에 폼이 <form> 렌더링됩니다. 양식의 이름은 프레임워크에 대한 @formname 폼을 고유하게 식별하는 지시문 특성으로 Blazor 지정됩니다.
• 모델은 구성 요소의 @code 블록에서 만들어지고 공용 속성(Model)에 보관됩니다. 특성은 [SupplyParameterFromForm] 연결된 속성의 값을 양식 데이터에서 제공해야 임을 나타냅니다. 속성 이름과 일치하는 요청의 데이터는 속성에 바인딩됩니다.
• InputText 구성 요소는 문자열 값을 편집하기 위한 입력 구성 요소입니다. @bind-Value 지시문 특성은 Model.Id 모델 속성을 InputText 구성 요소의 Value 속성에 바인딩합니다.
• 메서드는 Submit 콜백에 대한 @onsubmit 처리기로 등록됩니다. 사용자가 양식을 제출할 때 처리기가 호출됩니다.

Blazor 는 기존 DOM에 응답을 적용하기 위해 요청을 가로채서 렌더링된 폼을 최대한 많이 유지하여 페이지 탐색 및 양식 처리를 향상시킵니다. 향상된 기능은 페이지를 완전히 로드할 필요가 없으며 구성 요소가 서버에 렌더링되더라도 SPA(단일 페이지 앱)와 유사하게 훨씬 더 부드러운 사용자 환경을 제공합니다. 자세한 내용은 ASP.NET Core Blazor 라우팅 및 탐색을 참조하세요.

스트리밍 렌더링 은 일반 HTML 양식에 대해 지원됩니다.

앞의 예제에서는 폼에 구성 요소를 포함하여 AntiforgeryToken 위조 방지 지원을 포함합니다. 위조 방지 지원은 이 문서의 위조 방지 지원 섹션에서 자세히 설명합니다.

예를 들어 oninput onblur다른 요소의 DOM 이벤트를 기반으로 양식을 제출하려면 JavaScript를 사용하여 양식(submit MDN 설명서)을 제출합니다.

앱에서 Blazor 일반 양식을 사용하는 대신 양식은 일반적으로 프레임워크 EditForm 구성 요소를 사용하여 기본 제공 양식 지원으로 Blazor정의됩니다. 다음 Razor 구성 요소는 구성 요소를 사용하여 EditForm 웹 폼을 렌더링하는 일반적인 요소, 구성 요소 및 Razor 코드를 보여 줍니다.

양식은 Blazor 프레임워크의 EditForm 구성 요소를 사용하여 정의합니다. 다음 Razor 구성 요소는 구성 요소를 사용하여 EditForm 웹 폼을 렌더링하는 일반적인 요소, 구성 요소 및 Razor 코드를 보여 줍니다.

@page "/starship-1"
@inject ILogger<Starship1> Logger

<EditForm Model="Model" OnSubmit="Submit" FormName="Starship1">
    <div>
        <label>
            Identifier:
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        public string? Id { get; set; }
    }
}

@page "/starship-1"
@inject ILogger<Starship1> Logger

<EditForm Model="Model" OnSubmit="Submit" FormName="Starship1">
    <div>
        <label>
            Identifier:
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        public string? Id { get; set; }
    }
}

위의 Starship1 구성 요소에서:

• EditForm 구성 요소는 <EditForm> 요소가 나타나는 곳에서 렌더링됩니다. 양식의 이름은 프레임워크에 대한 @formname 폼을 고유하게 식별하는 지시문 특성으로 Blazor 지정됩니다.
• 모델은 구성 요소의 @code 블록에서 만들어지고 공용 속성(Model)에 보관됩니다. 속성이 매개 변수에 EditForm.Model 할당됩니다. 특성은 [SupplyParameterFromForm] 연결된 속성의 값을 양식 데이터에서 제공해야 임을 나타냅니다. 속성 이름과 일치하는 요청의 데이터는 속성에 바인딩됩니다.
• InputText 구성 요소는 문자열 값을 편집하기 위한 입력 구성 요소입니다. @bind-Value 지시문 특성은 Model.Id 모델 속성을 InputText 구성 요소의 Value 속성에 바인딩합니다.
• Submit 메서드는 OnSubmit 콜백에 대한 처리기로 등록됩니다. 사용자가 양식을 제출할 때 처리기가 호출됩니다.

Blazor 은 구성 요소에 대한 EditForm 페이지 탐색 및 양식 처리를 향상시킵니다. 자세한 내용은 ASP.NET Core Blazor 라우팅 및 탐색을 참조하세요.

스트리밍 렌더링 은 .에 대해 EditForm지원됩니다.

@page "/starship-1"
@inject ILogger<Starship1> Logger

<EditForm Model="Model" OnSubmit="Submit">
    <InputText @bind-Value="Model!.Id" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    public Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit()
    {
        Logger.LogInformation("Model.Id = {Id}", Model?.Id);
    }

    public class Starship
    {
        public string? Id { get; set; }
    }
}

위의 Starship1 구성 요소에서:

• EditForm 구성 요소는 <EditForm> 요소가 나타나는 곳에서 렌더링됩니다.
• 모델은 구성 요소의 @code 블록에 생성되고 프라이빗 필드(model)에 저장됩니다. 필드가 매개 변수에 EditForm.Model 할당됩니다.
• InputText 구성 요소는 문자열 값을 편집하기 위한 입력 구성 요소입니다. 지시문 특성은 @bind-Value 모델 속성을 InputText 구성 요소의 Value 속성† 바인딩 Model.Id 합니다.
• Submit 메서드는 OnSubmit 콜백에 대한 처리기로 등록됩니다. 사용자가 양식을 제출할 때 처리기가 호출됩니다.

@page "/starship-2"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship2> Logger

<EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship2">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <label>
        Identifier: 
        <InputText @bind-Value="Model!.Id" />
    </label>
    <button type="submit">Submit</button>
</EditForm>

@code {
    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}

@page "/starship-2"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship2> Logger

<EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship2">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <label>
        Identifier: 
        <InputText @bind-Value="Model!.Id" />
    </label>
    <button type="submit">Submit</button>
</EditForm>

@code {
    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}

@page "/starship-2"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship2> Logger

<EditForm Model="Model" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value="Model!.Id" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    public Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit()
    {
        Logger.LogInformation("Id = {Id}", Model?.Id);
    }

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}

위조 방지 지원

위조 방지 서비스는 파일에서 호출되면 앱 AddRazorComponents 에 Program 자동으로 추가 Blazor 됩니다.

앱은 파일의 요청 처리 파이프라인에서 호출 UseAntiforgery 하여 위조 방지 미들웨어를 Program 사용합니다. UseAntiforgery 는 호출 후 호출됩니다 UseRouting. 호출 UseRouting UseEndpoints이 있는 경우 호출은 해당 호출 UseAntiforgery 간에 이동해야 합니다. 호출 후 UseAntiforgery 호출해야 UseAuthentication 합니다.UseAuthorization

구성 AntiforgeryToken 요소는 위조 방지 토큰을 숨겨진 필드로 렌더링하고 특성은 [RequireAntiforgeryToken] 위조 방지 보호를 사용하도록 설정합니다. 위조 방지 검사가 실패 400 - Bad Request 하면 응답이 throw되고 양식이 처리되지 않습니다.

기반 EditForm양식의 AntiforgeryToken 경우 구성 요소 및 [RequireAntiforgeryToken] 특성이 자동으로 추가되어 위조 방지 보호를 제공합니다.

HTML <form> 요소를 기반으로 하는 양식의 경우 구성 요소를 양식에 AntiforgeryToken 수동으로 추가합니다.

<form method="post" @onsubmit="Submit" @formname="starshipForm">
    <AntiforgeryToken />
    <input id="send" type="submit" value="Send" />
</form>

@if (submitted)
{
    <p>Form submitted!</p>
}

@code{
    private bool submitted = false;

    private void Submit() => submitted = true;
}

@using Microsoft.AspNetCore.Antiforgery
@attribute [RequireAntiforgeryToken(required: false)]

자세한 내용은 ASP.NET Core Blazor 인증 및 권한 부여를 참조하세요.

오버포스트 공격 완화

양식 모델을 사용하여 데이터베이스에서 레코드를 만들고 편집하는 구성 요소에서 일반적으로 사용되는 것과 같이 정적으로 렌더링된 서버 쪽 양식은 대량 할당 공격이라고도 하는 오버포스트 공격에 취약할 수 있습니다. 악의적인 사용자가 렌더링된 양식의 일부가 아닌 속성에 대한 데이터를 처리하는 서버에 HTML 양식 POST를 발급하고 개발자가 사용자가 수정하도록 허용하지 않으려는 경우 오버포스트 공격이 발생합니다. "overposting"이라는 용어는 말 그대로 악의적인 사용자가 양식에 과도하게 POSTed되었음을 의미합니다.

모델에 만들기 및 업데이트 작업에 대한 제한된 속성이 포함되지 않은 경우 오버포스트는 문제가 되지 않습니다. 그러나 유지 관리하는 정적 SSR 기반 Blazor 양식을 사용할 때는 오버포스트를 염두에 두어야 합니다.

오버포스트를 완화하려면 만들기(삽입) 및 업데이트 작업을 사용하여 폼 및 데이터베이스에 별도의 뷰 DTO(모델/데이터 전송 개체)를 사용하는 것이 좋습니다. 양식을 제출하면 뷰 모델/DTO의 속성만 구성 요소와 C# 코드에서 데이터베이스를 수정하는 데 사용됩니다. 악의적인 사용자가 포함하는 추가 데이터는 삭제되므로 악의적인 사용자가 오버포스트 공격을 수행할 수 없습니다.

향상된 양식 처리

양식에 대한 매개 변수 EditForm 또는 data-enhance HTML 양식의 특성(<form>)을 Enhance 사용하여 양식 POST 요청에 대한 탐색을 향상시킵니다.

<EditForm ... Enhance ...>
    ...
</EditForm>

<form ... data-enhance ...>
    ...
</form>

❌지원되지 않음: 양식의 상위 요소에 대해 향상된 탐색을 설정하여 향상된 양식 처리를 사용하도록 설정할 수 없습니다.

<div ... data-enhance ...>
    <form ...>
        <!-- NOT enhanced -->
    </form>
</div>

향상된 양식 게시물은 엔드포인트에서 Blazor 만 작동합니다. 향상된 양식을 비 엔드Blazor 포인트에 게시하면 오류가 발생합니다.

향상된 양식 처리를 사용하지 않도록 설정하려면 다음을 수행합니다.

• 의 EditForm경우 폼 요소에서 매개 변수를 제거 Enhance 하거나 다음Enhance="false"으로 false설정합니다.
• HTML<form>의 경우 양식 요소에서 특성을 제거 data-enhance 하거나 다음data-enhance="false"으로 false설정합니다.

Blazor업데이트된 콘텐츠가 서버 렌더링의 일부가 아닌 경우 향상된 탐색 및 양식 전달을 통해 DOM에 대한 동적 변경 내용을 실행 취소할 수 있습니다. 요소의 콘텐츠를 유지하려면 특성을 사용합니다 data-permanent .

다음 예제에서는 페이지가 로드되면 요소의 <div> 콘텐츠가 스크립트에 의해 동적으로 업데이트됩니다.

<div data-permanent>
    ...
</div>

향상된 탐색 및 양식 처리를 전역적으로 사용하지 않도록 설정하려면 ASP.NET Core Blazor 시작을 참조하세요.

이벤트를 사용하여 enhancedload 향상된 페이지 업데이트를 수신 대기하는 방법에 대한 지침은 ASP.NET Core Blazor 라우팅 및 탐색을 참조하세요.

예제에서는 양식 POST 요청에 대해 향상된 양식 처리를 채택하지 않지만 향상된 양식 처리 섹션의 지침 에 따라 향상된 기능을 채택하도록 모든 예제를 업데이트할 수 있습니다.

예를 들어 C# 9.0 및 .NET 5에서 도입된 대상 형식 new 연산자를 사용합니다. 다음 예제에서는 형식이 연산자에 대해 new 명시적으로 명시되지 않습니다.

public ShipDescription ShipDescription { get; set; } = new();

C# 8.0 이하(ASP.NET Core 3.1)를 사용하는 경우 예제 코드를 수정하여 형식을 연산자에 명시합니다 new .

public ShipDescription ShipDescription { get; set; } = new ShipDescription();

구성 요소는 NRT(nullable 참조 형식)를 사용하고 .NET 컴파일러는 null 상태 정적 분석을 수행하며 둘 다 .NET 6 이상에서 지원됩니다. 자세한 내용은 ASP.NET Core 5.0에서 6.0으로 마이그레이션을 참조하세요.

C# 9.0 이하(.NET 5 이하)를 사용하는 경우 예제에서 NRT를 제거합니다. 일반적으로 예제 코드의 형식에서 물음표(?) 및 느낌표(!)를 제거하는 것일 뿐입니다.

.NET SDK는 .NET 6 이상을 대상으로 할 때 프로젝트에 암시적 전역 using 지시문을 적용합니다. 이 예제에서는 로거를 사용하여 양식 처리에 대한 정보를 기록하지만 구성 요소 예제에서 네임스페이스에 대한 Microsoft.Extensions.Logging 지시문을 지정할 @using 필요는 없습니다. 자세한 내용은 .NET 프로젝트 SDK: 암시적 using 지시문을 참조하세요.

C# 9.0 이하(.NET 5 이하)를 사용하는 경우 예제에 필요한 API에 대한 지시문 뒤 @page 의 구성 요소 맨 위에 지시문을 추가 @using 합니다. Visual Studio(개체를 마우스 오른쪽 단추로 클릭하고 정의 피킹 선택)나 .NET API 브라우저를 통해 API 네임스페이스를 찾습니다.

클라이언트 쪽 유효성 검사에는 회로가 필요합니다.

즉 Blazor Web App, 클라이언트 쪽 유효성 검사에는 활성 BlazorSignalR 회로가 필요합니다. 정적 서버 쪽 렌더링(정적 SSR)을 채택한 구성 요소의 양식에는 클라이언트 쪽 유효성 검사를 사용할 수 없습니다. 정적 SSR을 채택하는 양식은 양식이 제출된 후 서버에서 유효성을 검사합니다.

• ASP.NET Core Blazor 파일 업로드
• Blazor샘플 GitHub 리포지토리()(dotnet/blazor-samples다운로드 방법)
• ASP.NET Core GitHub 리포지토리()는dotnet/aspnetcore 테스트 자산을 형성합니다.

• ASP.NET Core Blazor 파일 업로드
• Microsoft Entra ID를 사용하여 호스트된 ASP.NET Core Blazor WebAssembly 앱 보호
• Azure Active Directory B2C를 사용하여 호스트된 ASP.NET Core Blazor WebAssembly 앱 보호
• Identity Server를 사용하여 호스팅된 ASP.NET Core Blazor WebAssembly 앱 보호
• Blazor샘플 GitHub 리포지토리()(dotnet/blazor-samples다운로드 방법)
• ASP.NET Core GitHub 리포지토리()는dotnet/aspnetcore 테스트 자산을 형성합니다.