ASP.NET 핵심 Blazor`QuickGrid` 구성 요소

아티클
11/06/2024

구성 QuickGrid 요소는 데이터를 테이블 형식으로 Razor 빠르고 효율적으로 표시하기 위한 구성 요소입니다. QuickGrid는 공통 그리드 렌더링 시나리오를 위한 간단하고 편리한 데이터 그리드 구성 요소를 제공하며, 데이터 그리드 구성 요소를 빌드하기 위한 참조 아키텍처 및 성능 기준 역할을 합니다. QuickGrid는 고도로 최적화되었으며 고급 기술을 사용하여 최적의 렌더링 성능을 달성합니다.

Package(패키지)

패키지에 대한 패키지 참조를 추가합니다 Microsoft.AspNetCore.Components.QuickGrid .

참고 항목

.NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 워크플로에서 패키지 설치 및 관리의 문서(NuGet 설명서)를 참조하세요. NuGet.org에서 올바른 패키지 버전을 확인합니다.

샘플 앱

다양한 QuickGrid 데모는 샘플 앱에 대한 QuickGrid를 Blazor 참조하세요. 데모 사이트는 GitHub Pages에서 호스트됩니다. 사이트는 커뮤니티에서 유지 관리하는 BlazorWasmPrerendering.Build GitHub 프로젝트를 사용하는 정적 미리 렌더링 덕분에 빠르게 로드됩니다.

`QuickGrid` 이행

구성 요소를 구현하려면 다음을 수행 QuickGrid 합니다.

태그(<QuickGrid>...</QuickGrid>)에서 구성 요소에 Razor QuickGrid 대한 태그를 지정합니다.
그리드에 대한 쿼리 가능한 데이터 원본의 이름을 지정합니다. 다음 데이터 원본 중 하나를 사용합니다.
- Items: nullable IQueryable<TGridItem>입니다. 여기에서 TGridItem 표의 각 행이 나타내는 데이터 형식입니다.
- ItemsProvider: 그리드에 대한 데이터를 제공하는 콜백입니다.
Class: 선택적 CSS 클래스 이름입니다. 제공된 경우 클래스 이름은 렌더링된 테이블의 특성에 포함 class 됩니다.
Theme: 테마 이름(기본값: default)입니다. 이는 테이블과 일치하는 스타일 지정 규칙에 영향을 줍니다.
Virtualize: true이면 그리드가 가상화로 렌더링됩니다. 일반적으로 스크롤과 함께 사용되며 그리드가 현재 스크롤 뷰포트 주위의 데이터만 가져오고 렌더링합니다. 이렇게 하면 큰 데이터 집합을 스크롤할 때 성능이 크게 향상될 수 있습니다. 사용하는 Virtualize경우 값을 ItemSize 제공해야 하며 모든 행이 일정한 높이로 렌더링되도록 해야 합니다. 일반적으로 렌더링된 데이터의 양이 작거나 페이지 매김을 사용하는 경우 사용하지 Virtualize 않는 것이 좋습니다.
ItemSize: 를 사용하는 Virtualize경우에만 적용됩니다. ItemSize 는 각 행에 대해 예상 높이를 픽셀 단위로 정의하여 가상화 메커니즘이 표시 크기와 일치하고 정확한 스크롤을 보장하기 위해 올바른 개수의 항목을 가져올 수 있도록 합니다.
ItemKey: 필요에 따라 렌더링된 각 행에 대한 @key 값을 정의합니다. 일반적으로 각 데이터 항목에 대해 기본 키 값과 같은 고유 식별자를 지정하는 데 사용됩니다. 이렇게 하면 기본 데이터 저장소에 대한 새 쿼리 후와 같이 인스턴스가 새 복사본으로 대체되는 경우에도 TGridItem 고유 식별자를 기반으로 행 요소와 데이터 항목 간의 연결을 유지할 수 있습니다. 설정 @key 하지 않으면 인스턴스입니다 TGridItem .
OverscanCount: 스크롤하는 동안 렌더링 빈도를 줄이기 위해 표시되는 영역 전후에 렌더링할 추가 항목 수를 정의합니다. 값이 높을수록 화면에서 더 많은 항목을 렌더링하여 스크롤 부드러움을 향상시킬 수 있지만 값이 높을수록 초기 로드 시간이 증가할 수 있습니다. 데이터 세트 크기 및 사용자 환경 요구 사항에 따라 균형을 찾는 것이 좋습니다. 기본값은 3입니다. 를 사용하는 Virtualize경우에만 사용할 수 있습니다.
Pagination: 필요에 따라 이 TGridItem 인스턴스를 PaginationState 모델과 연결하여 그리드가 현재 데이터 페이지만 가져오고 렌더링합니다. 일반적으로 제공된 PaginationState 인스턴스를 Paginator 표시하고 업데이트하는 구성 요소 또는 다른 UI 논리와 함께 사용됩니다.
QuickGrid 자식 콘텐츠(RenderFragment)에서 셀에 값이 표시되는 열을 나타내는 TGridItem s를 지정PropertyColumn<TGridItem,TProp>합니다.
- Property: 이 열의 셀에 표시할 값을 정의합니다.
- Format: 필요에 따라 값의 형식 문자열을 지정합니다. 를 사용 Format 하려면 형식을 TProp 구현 IFormattable해야 합니다.
- Sortable: 이 열을 기준으로 데이터를 정렬할 수 있는지 여부를 나타냅니다. 기본값은 열 형식에 따라 달라질 수 있습니다. 예를 들어 매개 변수가 TemplateColumn<TGridItem> 지정된 경우 SortBy 정렬됩니다.
- InitialSortDirection: 정렬 방향을 나타냅니다(있는 경우 IsDefaultSortColumn true).
- IsDefaultSortColumn: 이 열을 기본적으로 정렬해야 하는지 여부를 나타냅니다.
- PlaceholderTemplate: 지정된 경우 가상화된 그리드는 이 템플릿을 사용하여 데이터가 로드되지 않은 셀을 렌더링합니다.
- HeaderTemplate: 이 열의 머리글 셀에 대한 선택적 템플릿입니다. 지정하지 않으면 기본 헤더 템플릿에는 Title적용 가능한 정렬 표시기 및 옵션 단추와 함께 포함됩니다.
- Title: 열의 제목 텍스트입니다. 타이틀이 사용되지 않으면 HeaderTemplate 자동으로 렌더링됩니다.

태그(<QuickGrid>...</QuickGrid>)에서 구성 요소에 Razor QuickGrid 대한 태그를 지정합니다.
그리드에 대한 쿼리 가능한 데이터 원본의 이름을 지정합니다. 다음 데이터 원본 중 하나를 사용합니다.
- Items: nullable IQueryable<TGridItem>입니다. 여기에서 TGridItem 표의 각 행이 나타내는 데이터 형식입니다.
- ItemsProvider: 그리드에 대한 데이터를 제공하는 콜백입니다.
Class: 선택적 CSS 클래스 이름입니다. 제공된 경우 클래스 이름은 렌더링된 테이블의 특성에 포함 class 됩니다.
Theme: 테마 이름(기본값: default)입니다. 이는 테이블과 일치하는 스타일 지정 규칙에 영향을 줍니다.
Virtualize: true이면 그리드가 가상화로 렌더링됩니다. 일반적으로 스크롤과 함께 사용되며 그리드가 현재 스크롤 뷰포트 주위의 데이터만 가져오고 렌더링합니다. 이렇게 하면 큰 데이터 집합을 스크롤할 때 성능이 크게 향상될 수 있습니다. 사용하는 Virtualize경우 값을 ItemSize 제공해야 하며 모든 행이 일정한 높이로 렌더링되도록 해야 합니다. 일반적으로 렌더링된 데이터의 양이 작거나 페이지 매김을 사용하는 경우 사용하지 Virtualize 않는 것이 좋습니다.
ItemSize: 를 사용하는 Virtualize경우에만 적용됩니다. ItemSize 는 각 행에 대해 예상 높이를 픽셀 단위로 정의하여 가상화 메커니즘이 표시 크기와 일치하고 정확한 스크롤을 보장하기 위해 올바른 개수의 항목을 가져올 수 있도록 합니다.
ItemKey: 필요에 따라 렌더링된 각 행에 대한 @key 값을 정의합니다. 일반적으로 각 데이터 항목에 대해 기본 키 값과 같은 고유 식별자를 지정하는 데 사용됩니다. 이렇게 하면 기본 데이터 저장소에 대한 새 쿼리 후와 같이 인스턴스가 새 복사본으로 대체되는 경우에도 TGridItem 고유 식별자를 기반으로 행 요소와 데이터 항목 간의 연결을 유지할 수 있습니다. 설정 @key 하지 않으면 인스턴스입니다 TGridItem .
Pagination: 필요에 따라 이 TGridItem 인스턴스를 PaginationState 모델과 연결하여 그리드가 현재 데이터 페이지만 가져오고 렌더링합니다. 일반적으로 제공된 PaginationState 인스턴스를 Paginator 표시하고 업데이트하는 구성 요소 또는 다른 UI 논리와 함께 사용됩니다.
QuickGrid 자식 콘텐츠(RenderFragment)에서 셀에 값이 표시되는 열을 나타내는 TGridItem s를 지정PropertyColumn<TGridItem,TProp>합니다.
- Property: 이 열의 셀에 표시할 값을 정의합니다.
- Format: 필요에 따라 값의 형식 문자열을 지정합니다. 를 사용 Format 하려면 형식을 TProp 구현 IFormattable해야 합니다.
- Sortable: 이 열을 기준으로 데이터를 정렬할 수 있는지 여부를 나타냅니다. 기본값은 열 형식에 따라 달라질 수 있습니다. 예를 들어 매개 변수가 TemplateColumn<TGridItem> 지정된 경우 SortBy 정렬됩니다.
- InitialSortDirection: 정렬 방향을 나타냅니다(있는 경우 IsDefaultSortColumn true).
- IsDefaultSortColumn: 이 열을 기본적으로 정렬해야 하는지 여부를 나타냅니다.
- PlaceholderTemplate: 지정된 경우 가상화된 그리드는 이 템플릿을 사용하여 데이터가 로드되지 않은 셀을 렌더링합니다.
- HeaderTemplate: 이 열의 머리글 셀에 대한 선택적 템플릿입니다. 지정하지 않으면 기본 헤더 템플릿에는 Title적용 가능한 정렬 표시기 및 옵션 단추와 함께 포함됩니다.
- Title: 열의 제목 텍스트입니다. 타이틀이 사용되지 않으면 HeaderTemplate 자동으로 렌더링됩니다.

예를 들어 다음 구성 요소를 추가하여 그리드를 렌더링합니다.

QuickGrid 구성 Blazor Web App요소는 페이징 및 정렬과 같은 대화형 기능을 사용하도록 설정하기 위해 대화형 렌더링 모드를 채택해야 합니다.

PromotionGrid.razor:

@page "/promotion-grid"
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Promotion Grid</PageTitle>

<h1>Promotion Grid Example</h1>

<QuickGrid Items="people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
    private record Person(int PersonId, string Name, DateOnly PromotionDate);

    private IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

@page "/promotion-grid"
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Promotion Grid</PageTitle>

<h1>Promotion Grid Example</h1>

<QuickGrid Items="people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
    private record Person(int PersonId, string Name, DateOnly PromotionDate);

    private IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

상대 경로 /promotion-grid에서 브라우저의 구성 요소에 액세스합니다.

본격적인 상용 그리드가 제공하는 기능(예: 계층 구조 행, 순서를 다시 정렬하는 열 또는 Excel과 유사한 범위 선택)으로 QuickGrid을 확장할 계획은 현재 없습니다. 직접 개발하지 않을 고급 기능이 필요한, 경우 타사 그리드를 계속 사용합니다.

열 기준 정렬

QuickGrid 구성 요소는 열을 기준으로 항목을 정렬할 수 있습니다. 즉Blazor Web App, 정렬을 수행하려면 구성 요소가 대화형 렌더링 모드를 채택해야 합니다.

태그에 (Sortable)를 추가 Sortable="true" 합니다.PropertyColumn<TGridItem,TProp>

<PropertyColumn Property="..." Sortable="true" />

실행 중인 앱에서 렌더링된 열 제목을 선택하여 열을 정렬 QuickGrid 합니다.

구성 요소가 있는 `Paginator` 페이지 항목

QuickGrid 구성 요소는 데이터 원본의 데이터를 페이지할 수 있습니다. 페이징을 Blazor Web App사용하려면 구성 요소가 대화형 렌더링 모드를 채택해야 합니다.

PaginationState 구성 요소의 @code 블록에 인스턴스를 추가합니다. ItemsPerPage 페이지당 표시할 항목 수로 설정합니다. 다음 예제에서는 인스턴스 이름이 지정 pagination되고 페이지당 10개의 항목이 설정됩니다.

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

구성 요소의 QuickGrid Pagination 속성을 다음으로 pagination설정합니다.

<QuickGrid Items="..." Pagination="pagination">

페이지 매김을 위한 UI를 Paginator 제공하려면 구성 요소 위 또는 아래에 QuickGrid 구성 요소를 추가합니다. 다음으로 설정합니다.Paginator.State pagination

<Paginator State="pagination" />

실행 중인 앱에서 렌더링된 Paginator 구성 요소를 사용하여 항목을 페이지로 이동합니다.

사용자 지정 특성 및 스타일

QuickGrid는 또한 렌더링된 테이블 요소에 사용자 지정 특성 및 스타일 클래스(Class)를 전달하도록 지원합니다.

<QuickGrid Items="..." custom-attribute="value" Class="custom-class">

Entity Framework Core(EF Core) 데이터 원본

팩터리 패턴을 사용하여 구성 요소에 EF Core 데이터를 제공하는 데이터베이스 컨텍스트를 QuickGrid 확인합니다. 팩터리 패턴이 권장되는 이유에 대한 자세한 내용은 Entity Framework Core()를 사용하는 ASP.NET Core Blazor 를EF Core 참조하세요.

데이터베이스 컨텍스트 팩터리(IDbContextFactory<TContext>)는 지시문을 사용하여 구성 요소 @inject 에 삽입됩니다. 팩터리 접근 방식을 사용하려면 데이터베이스 컨텍스트를 삭제해야 하므로 구성 요소는 지시문을 사용하여 인터페이스를 IAsyncDisposable @implements 구현합니다. 구성 요소의 QuickGrid 항목 공급자는 DbSet<T> 삽입된 데이터베이스 컨텍스트 팩터리의 생성된 데이터베이스 컨텍스트(CreateDbContext)에서 가져온 것입니다.

QuickGrid는 EF 제공 IQueryable 인스턴스를 인식하고 효율성을 위해 쿼리를 비동기적으로 해결하는 방법을 알고 있습니다.

NuGet 패키지에 대한 패키지 참조를 Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter 추가합니다.

참고 항목

파일의 서비스 컬렉션을 Program 호출 AddQuickGridEntityFrameworkAdapter 하여 EF 인식 IAsyncQueryExecutor 구현을 등록합니다.

builder.Services.AddQuickGridEntityFrameworkAdapter();

다음 예제에서는 데이터베이스 컨텍스트context()의 AppDbContext DbSet<TEntity> ExampleTable (테이블)를 구성 요소의 데이터 원본 QuickGrid 으로 사용합니다.

@using Microsoft.AspNetCore.Components.QuickGrid
@using Microsoft.EntityFrameworkCore
@implements IAsyncDisposable
@inject IDbContextFactory<AppDbContext> DbFactory

...

<QuickGrid ... Items="context.ExampleTable" ...>
    ...
</QuickGrid>

@code {
    private AppDbContext context = default!;

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

앞의 예제의 코드 블록(@code)에서 다음을 수행합니다.

이 context 필드는 데이터베이스 컨텍스트를 포함하며 , 형식은 . AppDbContext입니다.
수명 주기 메서드는 OnInitialized 삽입된 팩터리(CreateDbContext) context 의 필드에 새 데이터베이스 컨텍스트(DbFactory)를 할당합니다.
비동 DisposeAsync 기 메서드는 구성 요소가 삭제될 때 데이터베이스 컨텍스트를 삭제합니다.

EF 지원 LINQ 연산자를 사용하여 데이터를 매개 변수에 전달하기 전에 필터링할 Items 수도 있습니다.

다음 예제에서는 검색 상자에 입력한 영화 제목으로 영화를 필터링합니다. 데이터베이스 컨텍스트가 BlazorWebAppMoviesContext있고 모델은 .입니다 Movie. 동영상의 Title 속성은 필터 작업에 사용됩니다.

@using Microsoft.AspNetCore.Components.QuickGrid
@using Microsoft.EntityFrameworkCore
@implements IAsyncDisposable
@inject IDbContextFactory<BlazorWebAppMoviesContext> DbFactory

...

<p>
    <input type="search" @bind="titleFilter" @bind:event="oninput" />
</p>

<QuickGrid ... Items="FilteredMovies" ...>
    ...
</QuickGrid>

@code {
    private string titleFilter = string.Empty;
    private BlazorWebAppMoviesContext context = default!;

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    private IQueryable<Movie> FilteredMovies => 
        context.Movie.Where(m => m.Title!.Contains(titleFilter));

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

표시 이름 지원

열 제목은 '의 태그를 PropertyColumn<TGridItem,TProp>사용하여 ColumnBase<TGridItem>.Title 할당할 수 있습니다. 다음 동영상 예제에서 열에는 열의 영화 릴리스 날짜 데이터에 대한 이름 "Release Date"이 지정됩니다.

<PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />

그러나 바인딩된 모델 속성에서 열 제목(이름)을 관리하는 것이 일반적으로 앱을 유지 관리하는 데 더 적합합니다. 모델은 특성을 사용하여 속성의 표시 이름을 제어할 [Display] 수 있습니다. 다음 예제에서 모델은 해당 ReleaseDate 속성에 대해 영화 릴리스 날짜 표시 이름을 "Release Date"로 지정합니다.

[Display(Name = "Release Date")]
public DateTime ReleaseDate { get; set; }

구성 요소가 구성 요소 또는 별도의 클래스에서 하위 클래스 PropertyColumn<TGridItem,TProp> 를 사용하도록 DisplayAttribute.Name설정 QuickGrid 하려면 다음을 수행합니다.

public class DisplayNameColumn<TGridItem, TProp> : PropertyColumn<TGridItem, TProp>
{
    protected override void OnParametersSet()
    {
        if (Title is null && Property.Body is MemberExpression memberExpression)
        {
            var memberInfo = memberExpression.Member;
            Title = 
                memberInfo.GetCustomAttribute<DisplayNameAttribute>().DisplayName ??
                memberInfo.GetCustomAttribute<DisplayAttribute>().Name ??
                memberInfo.Name;
        }

        base.OnParametersSet();
    }
}

구성 요소에서 하위 클래스를 QuickGrid 사용합니다. 다음 예제에서는 앞 DisplayNameColumn 의 내용이 사용됩니다. 이름 "Release Date"은 모델의 특성에 의해 [Display] 제공되므로 다음을 지정할 Title필요가 없습니다.

<DisplayNameColumn Property="movie => movie.ReleaseDate" />

이 [DisplayName] 특성 도 지원됩니다.

[DisplayName("Release Date")]
public DateTime ReleaseDate { get; set; }

그러나 특성은 [Display] 추가 속성을 사용할 수 있도록 하므로 권장됩니다. 예를 들어 특성은 [Display] 지역화를 위해 리소스 종류를 할당하는 기능을 제공합니다.

원격 데이터

앱에서 Blazor WebAssembly 서버의 JSON 기반 웹 API에서 데이터를 가져오는 것이 일반적인 요구 사항입니다. 데이터의 현재 페이지/뷰포트에 필요한 데이터만 가져오고 서버에서 정렬 또는 필터링 규칙을 적용하려면 매개 변수를 ItemsProvider 사용합니다.

ItemsProvider외부 엔드포인트를 쿼리하는 데 앱이 필요한 경우 또는 요구 사항이 적용되지 IQueryable않는 다른 경우 서버 쪽 Blazor 앱에서도 사용할 수 있습니다.

대리자 형식과 GridItemsProvider<TGridItem> 일치하는 콜백을 제공합니다. 여기에서 TGridItem 표에 표시되는 데이터 형식입니다. 콜백에는 반환할 데이터의 시작 인덱스, 최대 행 수 및 정렬 순서를 지정하는 형식 GridItemsProviderRequest<TGridItem>의 매개 변수가 지정됩니다. 일치하는 항목을 반환하는 것 외에도 페이징 및 가상화가 올바르게 작동하려면 총 항목 수(totalItemCount)가 필요합니다.

다음 예제에서는 공용 OpenFDA 식품 적용 데이터베이스에서 데이터를 가져옵니다.

OpenFDA GridItemsProvider<TGridItem> 데이터베이스에 대한 쿼리로 변환합니다 GridItemsProviderRequest<TGridItem> . 쿼리 매개 변수는 외부 JSON API에서 지원하는 특정 URL 형식으로 변환됩니다. 외부 API에서 지원하는 정렬 및 필터링을 통해서만 정렬 및 필터링을 수행할 수 있습니다. OpenFDA 엔드포인트는 정렬을 지원하지 않으므로 정렬 가능한 것으로 표시된 열이 없습니다. 그러나 레코드(skip 매개 변수)를 건너뛰고 레코드limit (매개 변수)의 반환을 제한하도록 지원하므로 구성 요소는 가상화를 사용하도록 설정하고 수만 개 레코드를 빠르게 스크롤할 수 있습니다.

FoodRecalls.razor:

@page "/food-recalls"
@inject HttpClient Http
@inject NavigationManager Navigation

<PageTitle>Food Recalls</PageTitle>

<h1>OpenFDA Food Recalls</h1>

<div class="grid" tabindex="-1">
    <QuickGrid ItemsProvider="@foodRecallProvider" Virtualize="true">
        <PropertyColumn Title="ID" Property="@(c => c.Event_Id)" />
        <PropertyColumn Property="@(c => c.State)" />
        <PropertyColumn Property="@(c => c.City)" />
        <PropertyColumn Title="Company" Property="@(c => c.Recalling_Firm)" />
        <PropertyColumn Property="@(c => c.Status)" />
    </QuickGrid>
</div>

<p>Total: <strong>@numResults results found</strong></p>

@code {
    private GridItemsProvider<FoodRecall>? foodRecallProvider;
    private int numResults;

    protected override async Task OnInitializedAsync()
    {
        foodRecallProvider = async req =>
        {
            var url = Navigation.GetUriWithQueryParameters(
                "https://api.fda.gov/food/enforcement.json", 
                new Dictionary<string, object?>
            {
                { "skip", req.StartIndex },
                { "limit", req.Count },
            });

            var response = await Http.GetFromJsonAsync<FoodRecallQueryResult>(
                url, req.CancellationToken);

            return GridItemsProviderResult.From(
                items: response!.Results,
                totalItemCount: response!.Meta.Results.Total);
        };

        numResults = (await Http.GetFromJsonAsync<FoodRecallQueryResult>(
            "https://api.fda.gov/food/enforcement.json"))!.Meta.Results.Total;
    }
}

웹 API 호출에 대한 자세한 내용은 ASP.NET Core Blazor 앱에서 웹 API 호출을 참조하세요.

`QuickGrid` 스캐폴더

QuickGrid 스캐폴더는 구성 요소를 QuickGrid 스캐폴드 Razor 하여 데이터베이스의 데이터를 표시합니다.

스캐폴더는 Entity Framework Core 데이터 모델을 기반으로 CRUD(기본 만들기, 읽기, 업데이트 및 삭제) 페이지를 생성합니다. 개별 페이지 또는 모든 CRUD 페이지를 스캐폴드할 수 있습니다. 모델 클래스를 DbContext선택하고 필요에 따라 새 DbContext 클래스를 만듭니다.

스캐폴드된 Razor 구성 요소는 모델 클래스의 이름을 따서 명명된 생성된 폴더의 프로젝트에 추가됩니다. 생성된 Index 구성 요소는 구성 요소를 사용하여 QuickGrid 데이터를 표시합니다. 필요에 따라 생성된 구성 요소를 사용자 지정하고 대화형 작업을 통해 페이징, 정렬 및 필터링과 같은 대화형 기능을 활용할 수 있습니다.

스캐폴더에서 생성된 구성 요소에는 SSR(서버 쪽 렌더링)이 필요하므로 WebAssembly에서 실행할 때 지원되지 않습니다.

폴더를 마우스 오른쪽 단추로 Components/Pages 클릭하고 새 스캐폴드 항목 추가>를 선택합니다.

설치된>공통BlazorRazor>> 구성 요소에 새 스캐폴드 항목 추가 대화 상자가 열려 있는 상태에서 CRUD(Entity Framework)를 사용하여 구성 요소를 선택합니다.Razor 추가 단추를 선택합니다.

CRUD 는 만들기, 읽기, 업데이트 및 삭제의 약어입니다. 스캐폴더는 앱에 대한 만들기, 편집, 삭제, 세부 정보 및 인덱스 구성 요소를 생성합니다.

CRUD(Entity Framework) 대화 상자를 사용하여 구성 요소 추가 Razor 를 완료합니다.

템플릿 드롭다운 목록에는 특히 만들기, 편집, 삭제, 세부 정보 및 목록 구성 요소를 만들기 위한 다른 템플릿이 포함되어 있습니다. 이 드롭다운 목록은 모델 클래스에 스캐폴드된 특정 유형의 구성 요소를 만들어야 하는 경우에 편리합니다. 템플릿 드롭다운 목록을 CRUD로 설정하여 전체 구성 요소 집합을 스캐폴드합니다.
모델 클래스 드롭다운 목록에서 모델 클래스를 선택합니다. 모델 이름에서 생성된 구성 요소에 대한 폴더가 만들어집니다(모델 클래스의 이름이 지정 Movie되면 폴더 이름은 자동으로 지정 MoviePages됨).
DbContext 클래스의 경우 기존 데이터베이스 컨텍스트를 선택하거나(더하기 기호) 단추 및 데이터 컨텍스트 모달 추가 대화 상자를 선택하여 + 새 데이터베이스 컨텍스트를 추가합니다.
모델 대화 상자가 닫히면 데이터베이스 공급자 드롭다운 목록이 기본적으로 SQL Server로 설정됩니다. 사용 중인 데이터베이스에 적합한 공급자를 선택할 수 있습니다. 옵션에는 SQL Server, SQLite, PostgreSQL 및 Azure Cosmos DB가 포함됩니다.
추가를 선택합니다.

프로젝트의 루트 디렉터리에 열린 터미널(>터미널 메뉴 >새 터미널)의 프롬프트()에 다음 명령을 모두 붙여넣습니다. 여러 명령을 붙여넣으면 여러 명령이 실행된다는 경고가 나타납니다. 경고를 해제하고 붙여넣기 작업을 계속합니다.

여러 명령을 붙여넣으면 마지막 명령을 제외한 모든 명령이 실행됩니다. 키보드에서 Enter 키를 누 를 때까지 마지막 명령이 실행되지 않습니다.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter

Important

처음 8개의 명령이 실행된 후 키보드에서 Enter 키를 눌러 마지막 명령을 실행해야 합니다.

앞의 명령은 다음을 추가합니다.

에 대한 CLI(명령줄 인터페이스) 도구 EF Core
aspnet-codegenerator 스캐폴딩 도구
EF Core용 디자인 타임 도구
패키지를 종속성으로 사용하는 EF Core SQLite 및 SQL Server 공급자
Microsoft.VisualStudio.Web.CodeGeneration.Design 스캐폴딩용

터미널에서 다음 명령을 실행하여 템플릿을 사용하여 전체 구성 요소 집합을 스캐폴드합니다.CRUD

dotnet aspnet-codegenerator blazor CRUD -dbProvider {PROVIDER} -dc {DB CONTEXT CLASS} -m {MODEL} -outDir {PATH}

참고 항목

앞의 명령은 .NET CLI 명령이며, VS Code 터미널의 기본 명령 셸인 PowerShell 프롬프트에 입력하면 .NET CLI 명령이 실행됩니다.

다음 표에서는 이전 명령의 ASP.NET Core 코드 생성기 옵션에 대해 설명합니다.

옵션	자리 표시자	설명
`-dbProvider`	`{PROVIDER}`	사용할 데이터베이스 공급자입니다. 옵션 포함 `sqlserver` (기본값), `sqlite`, `cosmos`. `postgres`
`-dc`	`{DB CONTEXT CLASS}`	네임스페이 DbContext 스를 포함하여 사용할 클래스입니다.
`-m`	`{MODEL}`	모델 클래스의 이름입니다.
`-outDir`	`{PATH}`	생성된 구성 요소의 출력 디렉터리입니다. 구성 요소를 저장할 출력 디렉터리의 모델 이름에서 폴더가 만들어집니다(모델 클래스의 이름이 지정 `Movie`되면 폴더 이름은 자동으로 지정 `MoviePages`됨). 경로는 일반적으로 `Components/Pages` 독립 실행형 Blazor WebAssembly 앱에 대한 Blazor Web App 경로입니다`Pages`.

추가 Blazor 공급자 옵션의 경우 .NET CLI 도움말 옵션(-h|--help)을 사용합니다.

dotnet aspnet-codegenerator blazor -h

프로젝트의 루트 디렉터리에 열린 명령 셸의 프롬프트(>)에 다음 명령을 모두 붙여넣습니다. 여러 명령을 붙여넣으면 여러 명령이 실행된다는 경고가 나타납니다. 경고를 해제하고 붙여넣기 작업을 계속합니다.

여러 명령을 붙여넣으면 마지막 명령을 제외한 모든 명령이 실행됩니다. 키보드에서 Enter 키를 누 를 때까지 마지막 명령이 실행되지 않습니다.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter

Important

처음 8개의 명령이 실행된 후 키보드에서 Enter 키를 눌러 마지막 명령을 실행해야 합니다.

앞의 명령은 다음을 추가합니다.

에 대한 CLI(명령줄 인터페이스) 도구 EF Core
aspnet-codegenerator 스캐폴딩 도구
EF Core용 디자인 타임 도구
패키지를 종속성으로 사용하는 EF Core SQLite 및 SQL Server 공급자
Microsoft.VisualStudio.Web.CodeGeneration.Design 스캐폴딩을 위한 것입니다.

명령 셸에서 다음 명령을 실행하여 템플릿을 사용하여 전체 구성 요소 집합을 스캐폴드합니다.CRUD

dotnet aspnet-codegenerator blazor CRUD -dbProvider {PROVIDER} -dc {DB CONTEXT CLASS} -m {MODEL} -outDir {PATH}

다음 표에서는 이전 명령의 ASP.NET Core 코드 생성기 옵션에 대해 설명합니다.

옵션	자리 표시자	설명
`-dbProvider`	`{PROVIDER}`	사용할 데이터베이스 공급자입니다. 옵션 포함 `sqlserver` (기본값), `sqlite`, `cosmos`. `postgres`
`-dc`	`{DB CONTEXT CLASS}`	네임스페이 DbContext 스를 포함하여 사용할 클래스입니다.
`-m`	`{MODEL}`	모델 클래스의 이름입니다.
`-outDir`	`{PATH}`	생성된 구성 요소의 출력 디렉터리입니다. 구성 요소를 저장할 출력 디렉터리의 모델 이름에서 폴더가 만들어집니다(모델 클래스의 이름이 지정 `Movie`되면 폴더 이름은 자동으로 지정 `MoviePages`됨). 경로는 일반적으로 `Components/Pages` 독립 실행형 Blazor WebAssembly 앱에 대한 Blazor Web App 경로입니다`Pages`.

추가 Blazor 공급자 옵션의 경우 .NET CLI 도움말 옵션(-h|--help)을 사용합니다.

dotnet aspnet-codegenerator blazor -h

다음을 통해 공유

ASP.NET 핵심 Blazor`QuickGrid` 구성 요소

Package(패키지)

샘플 앱

`QuickGrid` 이행

열 기준 정렬

구성 요소가 있는 `Paginator` 페이지 항목

사용자 지정 특성 및 스타일

Entity Framework Core(EF Core) 데이터 원본

표시 이름 지원

원격 데이터

`QuickGrid` 스캐폴더

추가 리소스

다음을 통해 공유

ASP.NET 핵심 BlazorQuickGrid 구성 요소

Package(패키지)

샘플 앱

QuickGrid 이행

열 기준 정렬

구성 요소가 있는 Paginator 페이지 항목

사용자 지정 특성 및 스타일

Entity Framework Core(EF Core) 데이터 원본

표시 이름 지원

원격 데이터

QuickGrid 스캐폴더

추가 리소스

ASP.NET 핵심 Blazor`QuickGrid` 구성 요소

`QuickGrid` 이행

구성 요소가 있는 `Paginator` 페이지 항목

`QuickGrid` 스캐폴더