Blazor는 JavaScript로 작성하는 번거로움 없이 C# 및 HTML로 애플리케이션을 완전히 작성할 수 있게 해주는 웹 개발 플랫폼입니다. Blazor 사용자 인터페이스는 HTML과 C#을 혼합하는 razor 파일로 정의됩니다. 테이블 형식의 데이터를 표시하기 위해 기본 HTML 테이블을 사용하는 것이 유일한 옵션입니다. 일반적인 HTML 파일에서와 마찬가지로 razor 파일에 테이블 마크업만 작성하면 됩니다.

그러나 편집, 선택, 정렬, 필터링 및 그룹화와 같은 더 많은 상호 작용을 추가해야 하는 경우 완전히 개발된 Blazor 구성 요소를 사용해야 합니다. 이 부분에서는 FlexGrid for Blazor가 도움이 될 수 있습니다. FlexGrid는 기본적인 기능을 갖춘 데이터 그리드 구성 요소로 적은 노력으로 필요한 모든 상호 작용을 제공하며 모든 주요 브라우저와 완벽하게 호환됩니다.

이 글에서 HTML “날씨 예측” 테이블을 FlexGrid와 함께 기본 Blazor 템플릿으로 바꾸는 방법을 안내하겠습니다. 또한 대용량 데이터 세트를 효율적으로 표시하기 위해 앱에서 사용할 수있는 다양한 데이터 가상화 기술을 포함한 그리드의 다양한 기능도 보여드리겠습니다.

새로운 Blazor 프로젝트 생성

Visual Studio 2019를 열고 새 "Blazor App"프로젝트를 만듭니다.

새 프로젝트의 이름을 지정합니다.

이 연습에서는 서버 앱을 만들 것입니다. 이는 앱에 ASP.NET Core 서버측 부분이 포함될 것을 의미합니다. Blazor Server는 2019년 초에 .NET Core 3.0과 함께 릴리스되었지만 클라이언트에서 완전히 실행되는 Blazor의 WebAssembly 버전은 아직 공식적으로 릴리스되지 않았습니다(2019년 12월 기준).

생성된 프로젝트에는 표에 일기 예보를 표시하기 위한 기본 UI를 포함한 사전 정의된 페이지 세트가 제공됩니다. FetchData.razor 파일을 엽니다.

FetchData.razor 샘플은 데이터를 사용할 수 있을 때까지 "Loading ..." 텍스트를 표시합니다. 그런 다음 헤더와 행이 있는 HTML 테이블을 렌더링합니다. 이 표는 Blazor용 FlexGrid를 대신 사용하기 위해 대체할 테이블입니다.

먼저 앱을 빌드하고 실행하여 일기 예보 테이블을 볼 수 있습니다.

FlexGrid로 HTML 테이블 교체

HTML 테이블은 Blazor에서 타사 라이브러리를 사용하지 않고 테이블 형식 데이터를 표시할 수 있는 유일한 방법입니다. 그러나 테이블에는 기능이 부족하기 때문에 FlexGrid와 같은 데이터 그리드 컨트롤을 사용하려면 테이블을 업데이트해야 합니다.

FlexGrid를 추가하려면 먼저 nuget.org에서 공개적으로 사용할 수 있는 nuget 패키지 “C1.Blazor.Grid”를 추가해야 합니다. 프로젝트 파일을 마우스 오른쪽 단추로 클릭하고 Nuget 패키지 관리(Manage Nuget Packages)를 선택합니다. 여기에서 C1.Blazor.Grid 라이브러리를 찾아서 프로젝트에 설치할 수 있습니다.

C1.Blazor.Grid 라이브러리에는 몇 가지 종속성이 있으며, 아직 없는 경우에는 이를 확인하고 설치합니다.

패키지가 프로젝트의 Dependencies 폴더 아래에 설치되면 볼 수 있습니다.

다음으로“Pages”폴더에 있는 _Host.cshtml 파일에 일련의 링크와 스크립트를 추가해야합니다.

<link rel="stylesheet" href="~/_content/C1.Blazor.Core/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.Grid/styles.css" /> 
<link rel="stylesheet" href="~/_content/C1.Blazor.ListView/styles.css" /> 
<link rel="stylesheet" href="~/_content/C1.Blazor.Input/styles.css" /> 
<link rel="stylesheet" href="~/_content/C1.Blazor.DataPager/styles.css" /> 
<script src="~/_content/C1.Blazor.Core/scripts.js"></script>
<script src="~/_content/C1.Blazor.Input/scripts.js"></script> 
<script src="~/_content/C1.Blazor.Grid/scripts.js"></script> 

FetchData.razor 파일로 돌아가서 다음 선언을 추가합니다.

@using C1.Blazor.Grid

이제 원본 샘플과 유사한 인터페이스를 얻으려면 HTML 테이블 마크업을 다음 마크업으로 교체해야 합니다.

<FlexGrid ItemsSource="forecasts" AutoGenerateColumns="false" DefaultColumnWidth="GridLength.Star" ColumnHeaderStyle="@("font-weight:bold")">  
    <FlexGridColumns>  
        <GridColumn Binding="Date" Format="d"/>  
        <GridColumn Binding="TemperatureC" Header="Temp. (C)" />  
        <GridColumn Binding="TemperatureF" Header="Temp. (F)" />  
        <GridColumn Binding="Summary" />  
    </FlexGridColumns>  
</FlexGrid>

프로젝트를 빌드하고 실행할 때 일기 예보를 표시하는 FlexGrid가 표시됩니다.

이 시점에서 샘플은 원본 샘플과 동일하게 보이지만 선택, 키보드 탐색 및 편집 기능과 같은 새로운 기능을 얻었습니다.

또한 열 헤더를 클릭하여 정렬할 수 있습니다

Blazor Grid에 필터링 추가

다음으로 몇 줄의 코드를 추가하여 Blazor 데이터 그리드인 FlexGrid에 필터링 기능을 추가하는 방법을 보여 드리겠습니다.

필터링을 지원하기 위해 그리드 위에 텍스트 상자를 추가하고 필터 문자열을 제공하기 위해 FlexGrid에 "연결합니다". 입력한 텍스트는 그리드의 행을 필터링합니다. 기본 HTML 입력 요소를 사용할 수 있지만, 앱에는 이미 참조된 C1.Blazor 라이브러리가 있으므로 (FlexGrid에 종속되어 있으므로) C1TextBox 컨트롤을 사용하겠습니다.

C1TextBox용 NuGet 패키지 (C1.Blazor.Input에 포함되어 있음)가 이미 프로젝트에 추가되었습니다. 이제 "Input"라이브러리의 using 문을 추가하여 C1TextBox를 사용할 수 있습니다.

 @using C1.Blazor.Input

<C1TextBox @bind-Text="filterText" /> 

다음으로 FlexGrid에 FullTextFilterBehavior를 추가합니다. 이 동작은 기본적으로 텍스트 상자와 데이터 그리드를 "연결"하는 데 필요한 모든 로직(예: 텍스트 변경 이벤트 및 FlexGrid 데이터에 필터 적용 등)을 캡슐화합니다. 이 기능은 실제로 내장되어 있습니다!

<FlexGridBehaviors> 

    <FullTextFilterBehavior FilterString="@filterText" MatchNumbers="true" /> 

</FlexGridBehaviors>

C1TextBox는 "filterText"필드를 변경하고 전체 텍스트 필터 작용은 그리드의 데이터 필터링을 처리할 뿐만 아니라 일치 항목을 강조 표시합니다.

Blazor Grid에 그룹화 추가

데이터 그리드의 또 다른 인기있는 기능은 그룹화입니다. FlexGrid에 데이터를 그룹화하기 위해 미가공 데이터 대신 C1CollectionView를 그리드의 ItemsSource로 할당합니다. 이 방법으로 페이지의 초기화 메소드에서 GroupAsync를 호출할 수 있으며, 나머지는 FlexGrid가 수행 할 수 있습니다.

protected override async Task OnInitializedAsync()  
{  
    var data = await ForecastService.GetForecastAsync(DateTime.Now);  
    var collection = new C1CollectionView<WeatherForecast>(data);  
    await collection.GroupAsync(nameof(WeatherForecast.Summary));  
    forecasts = collection;  
}

“Summary”열에 텍스트 대신 아이콘을 표시하기 위해 열의 CellTemplate 속성을 사용하고 가능한 모든 값을 해당 아이콘과 함께 해당 HTML “img”에 매핑합니다.

<GridColumn Binding="Summary">  
    <CellTemplate>  
        @switch (context)  
        {  
            case "Freezing":  
                <img style="width:20px;height:20px" src="freezing.png" />  
                break;  
            case "Bracing":  
                <img style="width:20px;height:20px" src="bracing.png" />  
                break;  
            case "Chilly":  
                <img style="width:20px;height:20px" src="chilly.png" />  
                break;  
            case "Cool":  
                <img style="width:20px;height:20px" src="cool.png" />  
                break;  
            case "Mild":  
                <img style="width:20px;height:20px" src="mild.png" />  
                break;  
            case "Warm":  
                <img style="width:20px;height:20px" src="warm.png" />  
                break;  
            case "Balmy":  
                <img style="width:20px;height:20px" src="balmy.png" />  
                break;  
            case "Hot":  
                <img style="width:20px;height:20px" src="hot.png" />  
                break;  
            case "Sweltering":  
                <img style="width:20px;height:20px" src="sweltering.png" />  
                break;  
            case "Scorching":  
                <img style="width:20px;height:20px" src="scorching.png" />  
                break;  
        }  
    </CellTemplate>  
</GridColumn>

대규모 데이터 세트를 위한 데이터 가상화 추가

FlexGrid는 C1CollectionView를 통해 다양한 데이터 가상화 구현을 제공합니다.

가장 오래되고 널리 사용되는 데이터 가상화 기술은 클라이언트 쪽 페이지 지정(pagination)입니다. 사용자가 버튼을 클릭하여 탐색할 수 있는 여러 페이지를 나타내는 일련의 버튼으로 구성됩니다.

페이징 추가

페이징을 활성화합니다. 활성화하기 위해서 먼저“C1.Blazor.DataPager”에 대한 참조를 추가합니다.

그런 다음 FetchData.razor 파일에서 시작 부분에 C1DataPager @using 문을 추가하고 그리드 아래에 다음 마크업을 추가합니다.

@using C1.Blazor.DataPager  
<C1DataPager Source="forecasts" />

코드 섹션에서는 C1PagedCollectionView를 사용하여 C1DataPager와 FlexGrid에 할당합니다.

@using C1.CollectionView  
C1PagedCollectionView<WeatherForecast> forecasts;  
protected override async Task OnInitializedAsync()  
{  
    var data = await ForecastService.GetForecastAsync(DateTime.Now);  
    forecasts = new C1PagedCollectionView<WeatherForecast>(data) { PageSize = 5 };  
}

가상 스크롤링 추가

다음으로 C1VirtualCollectionView를 통해 제공되는 서버측 페이징이라는 다른 가상화 기술을 사용합니다.

이 기술은 그리드의 행의 전체 범위를 표시합니다. 컬렉션의 항목 수에 관계없이 스크롤 막대를 드래그하여 마지막 행으로 이동할 수 있습니다. 그리드가 스크롤될 때 페이지의 항목을 요청합니다. 스크롤를 할 때, 행이 처음에는 비어있는 것으로 나타나고 실제 데이터가 서버에서 전송될 때 채워집니다.

활성화하기 전에 그리드가 너무 커지지 않도록 그리드에 높이를 설정해야 합니다.

Style="@("height:300px")"

초기화 코드는 단지 가상 컬렉션을 할당하고 컬렉션 구현이 요청 될 때 서비스로부터 데이터를 가져옵니다.

protected override void OnInitialized()  
{  
    forecasts = new MyVirtualCollectionView() { PageSize = 5 };  
}

public class MyVirtualCollectionView : C1VirtualCollectionView<WeatherForecast>  
{  
    protected override async Task<Tuple<int, IReadOnlyList<WeatherForecast>>> GetPageAsync(int pageIndex, int startingIndex, int count, IReadOnlyList<SortDescription> sortDescriptions = null, FilterExpression filterExpression = null, CancellationToken cancellationToken = default)  
    {  
        var service = new WeatherForecastService();  
        var data = await service.GetForecastAsync(DateTime.Now.AddDays(startingIndex), PageSize);  
        return new Tuple<int, IReadOnlyList<WeatherForecast>>(1_000, data);  
    }  
}

마찬가지로 "커서(Cursor)" 페이지 매김은 서버에서 작동하도록 설계되었습니다. 다음 페이지를 페치(fetch)하기 위한 후속 요청에서 사용될 토큰과 함께 데이터 페이지가 리턴됩니다.

"커서" 페이지 매김은 모든 페이지를 순차적으로 가져와야 하므로 특정 페이지로 이동을 허용하지 않습니다. 이러한 단점에도 불구하고, 이러한 종류의 페이지 지정은 총 항목 수를 계산할 필요가 없으며 더 빠르게 서버 구현을 단순화합니다.

FlexGrid를 C1CursorCollectionView와 함께 사용하면 아래쪽에 더 많은 페이지를 가져 오고 있음을 나타내는 스피너가 표시됩니다.

protected override void OnInitialized()  
{  
    forecasts = new MyCursorCollectionView();  
}

public class MyCursorCollectionView : C1CursorCollectionView<WeatherForecast>  
{  
    protected override async Task<Tuple<string, IReadOnlyList<WeatherForecast>>> GetPageAsync(int startingIndex, string pageToken, int? count = null, IReadOnlyList<SortDescription> sortDescriptions = null, FilterExpression filterExpression = null, CancellationToken cancellationToken = default)  
    {  
        var service = new WeatherForecastService();  
        var data = await service.GetForecastAsync(DateTime.Now.AddDays(startingIndex));  
        return new Tuple<string, IReadOnlyList<WeatherForecast>>("", data);  
    }  
}

이 연습에서는 표준 HTML 테이블을 모든 기능을 갖춘 데이터 그리드 구성 요소인 FlexGrid로 교체하는 것이 얼마나 쉬운지 보여주었습니다. FlexGrid는 NuGet을 통해 설치할 수 있지만 GrapeCity의 기본 사이트에서 패키지를 설치하여 샘플도 얻을 수 있습니다. FlexGrid 샘플은 위에서 간단히 언급한 기능을 활성화하는 방법에 대한 자세한 정보를 제공합니다.