ASP.NET 핵심 BlazorQuickGrid 구성 요소

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

패키지

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

참고 메모

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

샘플 앱

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

QuickGrid 구현

구성 요소 QuickGrid 를 구현하려면 다음과 같이 합니다.

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

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

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

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();
}

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

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

열 기준 정렬

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

PropertyColumn<TGridItem,TProp> 태그에 Sortable="true" (Sortable)을 추가하세요.

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

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

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

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

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

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

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

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

페이지 네비게이션 UI를 제공하려면 QuickGrid 컴포넌트 위 또는 아래에 Paginator 컴포넌트를 추가하십시오. Paginator.State을(를) pagination으로 설정합니다.

<Paginator State="pagination" />

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

QuickGrid Paginator 구성 요소와 함께 사용할 때 데이터의 마지막 페이지를 채우기 위해 빈 행을 추가로 렌더링합니다. .NET 9 이상에서는 빈 데이터 셀(<td></td>)이 빈 행에 추가됩니다. 빈 행은 모든 페이지에서 행 높이와 스타일이 안정적으로 유지되도록 QuickGrid를 렌더링하는 데 사용됩니다.

행 스타일 적용

CSS 격리를 사용하여 행에 스타일을 적용합니다. 이를 통해 Paginator 구성 요소를 사용하여 페이지 데이터를 처리하는 QuickGrid 구성 요소의 빈 행에 스타일을 지정할 수 있습니다.

래퍼 블록 요소에서 QuickGrid 구성 요소를 래핑합니다(예: <div>).

+ <div>
    <QuickGrid ...>
        ...
    </QuickGrid>
+ </div>

::deep 의사 요소를 사용하여 행 스타일을 적용합니다. 다음 예제에서는 행 높이가 빈 데이터 행을 포함하여 2em로 설정됩니다.

{COMPONENT}.razor.css:

::deep tr {
    height: 2em;
}

또는 다음 CSS 스타일 지정 방법을 사용합니다.

• 데이터로 채워진 행 셀을 표시합니다.
• 빈 행 셀을 표시하지 않으면 부트스트랩 스타일에 따라 빈 행 셀의 테두리가 표시되는 것을 방지할 수 있습니다.

{COMPONENT}.razor.css:

::deep tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

::deep td:empty {
    display: none;
}

CSS 격리에서 ::deep의사 요소를 사용하는 방법에 대한 자세한 내용은 ASP.NET Core Blazor CSS 격리를 참조하세요.

사용자 지정 특성 및 스타일

또한 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 인스턴스를 인식하고 효율성을 위해 쿼리를 비동기적으로 해결하는 방법을 알고 있습니다.

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

참고

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

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

builder.Services.AddQuickGridEntityFrameworkAdapter();

다음 예제에서는 데이터베이스 컨텍스트ExampleTable()의 DbSet<TEntity>AppDbContextcontext (테이블)를 구성 요소의 데이터 원본 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();
}

작업 예제는 다음 리소스를 참조하세요.

• Blazor 동영상 데이터베이스 앱 빌드 자습서
• Blazor 동영상 데이터베이스 샘플 앱: 리포지토리에서 최신 버전 폴더를 선택합니다. 자습서 프로젝트의 샘플 폴더 이름이 지정 BlazorWebAppMovies됩니다.

표시 이름 지원

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

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

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

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

QuickGrid 구성 요소에서 DisplayAttribute.Name 속성을 사용 가능하도록 하려면, 구성 요소 내에서 또는 별도의 클래스에서 PropertyColumn<TGridItem,TProp>를 서브클래스화 하십시오. 지역화되지 않은 GetName(DisplayAttribute.Name)에 값이 없을 경우 DisplayName 메서드를 호출하여 지역화된 [DisplayName] 값을 반환합니다.

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>().GetName() ??
                memberInfo.Name;
        }

        base.OnParametersSet();
    }
}

구성 요소의 QuickGrid에서 서브클래스를 사용하세요. 다음 예제에서는 앞 DisplayNameColumn 의 내용이 사용됩니다. 이름 ""은 모델의 속성에 의해 제공되므로 을(를) 지정할 필요가 없습니다.

<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 식품 적용 데이터베이스에서 데이터를 가져옵니다.

GridItemsProvider<TGridItem>는 GridItemsProviderRequest<TGridItem>을 OpenFDA 데이터베이스에 대한 쿼리로 변환합니다. 쿼리 매개 변수는 외부 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 스캐폴더는 Razor 구성 요소를 QuickGrid 로 구성하여 데이터베이스의 정보를 표시합니다.

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

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

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

Visual Studio

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

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

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

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

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

Visual Studio Code

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

여러 명령을 붙여넣으면 마지막 명령을 제외한 모든 명령이 실행됩니다. 키보드에서 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

중요한

처음 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 클래스입니다. DbContext 클래스가 팩터리 공급자(AddDbContextFactory)를 사용하여 앱의 서비스에 등록되도록 하려면 팩터리 공급자 등록이 있는 기존 DbContext 클래스를 사용하거나 새 DbContext 클래스를 제공합니다.
-m	{MODEL}	모델 클래스의 이름입니다.
-outDir	{PATH}	생성된 구성 요소의 출력 디렉터리입니다. 구성 요소를 저장할 출력 디렉터리의 모델 이름에서 폴더가 만들어집니다(모델 클래스의 이름이 지정 Movie되면 폴더 이름은 자동으로 지정 MoviePages됨). 경로는 일반적으로 Components/PagesBlazor Web App에 대한 것이거나, 독립 실행형 Blazor WebAssembly 앱에 대한 Pages입니다.

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

dotnet aspnet-codegenerator blazor -h

.NET CLI

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

여러 명령을 붙여넣으면 마지막 명령을 제외한 모든 명령이 실행됩니다. 키보드에서 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

중요

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

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

• 에 대한 CLI(명령줄 인터페이스) 도구 EF Core
• aspnet-codegenerator 스캐폴딩 도구
• EF Core용 디자인 타임 도구
• SQLite 및 SQL Server 공급자는 EF Core 패키지를 종속성으로 사용합니다.
• 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를 포함하여 사용할 클래스입니다. DbContext 클래스가 팩터리 공급자(AddDbContextFactory)를 사용하여 앱의 서비스에 등록되도록 하려면 팩터리 공급자 등록이 있는 기존 DbContext 클래스를 사용하거나 새 DbContext 클래스를 제공합니다.
-m	{MODEL}	모델 클래스의 이름입니다.
-outDir	{PATH}	생성된 구성 요소의 출력 디렉터리입니다. 구성 요소를 저장할 출력 디렉터리의 모델 이름에서 폴더가 만들어집니다(모델 클래스의 이름이 지정 Movie되면 폴더 이름은 자동으로 지정 MoviePages됨). 경로는 일반적으로 Components/Pages 또는 독립 실행형 Blazor WebAssembly 앱에 대한 Pages입니다.

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

dotnet aspnet-codegenerator blazor -h

스캐폴더를 사용하는 예제는 QuickGrid 영화 데이터베이스 앱 빌드Blazor(개요)를 참조하세요.

여러 동시 EF Core 쿼리가 System.InvalidOperationException을(를) 유발합니다

여러 동시 EF Core 쿼리는 다음 System.InvalidOperationException트리거할 수 있습니다.

System.InvalidOperationException: 이전 작업이 완료되기 전에 이 컨텍스트 인스턴스에서 두 번째 작업이 시작되었습니다. 이는 일반적으로 DbContext의 동일한 인스턴스를 사용하는 서로 다른 스레드에 의해 발생합니다. DbContext의 스레딩 문제를 방지하는 방법에 대한 더 많은 정보를 보려면 https://go.microsoft.com/fwlink/?linkid=2097913.을 참조하세요.

이 시나리오는 ASP.NET Core의 향후 릴리스에서 개선될 예정입니다. 자세한 정보를 원하시면 [Blazor] QuickGrid 및 EF Core 경험 개선(dotnet/aspnetcore #58716)을 참조하세요.

그 동안 취소 토큰과 함께 ItemsProvider 사용하여 문제를 해결할 수 있습니다. 취소 토큰은 새 요청이 발급될 때 이전 요청을 취소하여 동시 쿼리를 방지합니다.

Blazor 영화 데이터베이스 앱 빌드(개요) 자습서의 동영상 데이터베이스 Index 구성 요소를 기반으로 하는 다음 예제를 고려해 보세요. 앱에 스캐폴드된 간단한 버전은 문서의 샘플 앱에서 확인할 수 있습니다. 앱에 스캐폴드된 Index 구성 요소는 다음 구성 요소로 대체됩니다.

Components/Pages/MoviePages/Index.razor:

@page "/movies"
@rendermode InteractiveServer
@using Microsoft.EntityFrameworkCore
@using Microsoft.AspNetCore.Components.QuickGrid
@using BlazorWebAppMovies.Models
@using BlazorWebAppMovies.Data
@inject IDbContextFactory<BlazorWebAppMovies.Data.BlazorWebAppMoviesContext> DbFactory

<PageTitle>Index</PageTitle>

<h1>Index</h1>

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

<p>
    <a href="movies/create">Create New</a>
</p>

<div>
    <QuickGrid Class="table" TGridItem="Movie" ItemsProvider="GetMovies"
            ItemKey="(x => x.Id)" Pagination="pagination">
        <PropertyColumn Property="movie => movie.Title" Sortable="true" />
        <PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />
        <PropertyColumn Property="movie => movie.Genre" />
        <PropertyColumn Property="movie => movie.Price" />
        <PropertyColumn Property="movie => movie.Rating" />

        <TemplateColumn Context="movie">
            <a href="@($"movies/edit?id={movie.Id}")">Edit</a> |
            <a href="@($"movies/details?id={movie.Id}")">Details</a> |
            <a href="@($"movies/delete?id={movie.Id}")">Delete</a>
        </TemplateColumn>
    </QuickGrid>
</div>

<Paginator State="pagination" />

@code {
    private BlazorWebAppMoviesContext context = default!;
    private PaginationState pagination = new PaginationState { ItemsPerPage = 5 };
    private string titleFilter = string.Empty;

    public async ValueTask<GridItemsProviderResult<Movie>> GetMovies(GridItemsProviderRequest<Movie> request)
    {
        using var context = DbFactory.CreateDbContext();
        var totalCount = await context.Movie.CountAsync(request.CancellationToken);
        IQueryable<Movie> query = context.Movie.OrderBy(x => x.Id);
        query = request.ApplySorting(query).Skip(request.StartIndex);

        if (request.Count.HasValue)
        {
            query = query.Take(request.Count.Value);
        }

        var items = await query.ToArrayAsync(request.CancellationToken);

        var result = new GridItemsProviderResult<Movie>
        {
            Items = items,
            TotalItemCount = totalCount
        };

        return result;
    }
}