! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Blazor용 FlexGrid로 OData 서비스에 연결 > 블로그 & Tips

본문 바로가기

ComponentOne

블로그 & Tips

Blazor용 FlexGrid로 OData 서비스에 연결

페이지 정보

작성자 GrapeCity 작성일 2021-01-28 14:07 조회 4,534회 댓글 0건

본문

데이터가 새로운 형태의 금으로 간주되는 현대 시대에는 데이터 소스가 풍부합니다. 그러나 각 데이터 소스에는 데이터를 클라이언트에 공개하기 위한 자체 표준이 있을 수 있으며, 클라이언트 응용 프로그램 개발자는 데이터에 연결하고 표시하는 여러 가지 방법을 유지해야 합니다.

OData는 다양한 소스에서 얻는 데이터를 더 쉽게 사용할 수 있게 해주는 표준 데이터 모델 및 프로토콜을 제공합니다.

이 문서에서는 OData 서버에서 데이터를 가져와 DataGrid ComponentOne Blazor용 FlexGrid를 사용해 Blazor 응용 프로그램에 표시하는 방법을 설명합니다. 또한 서버 측 정렬 및 필터링으로 대량의 데이터 집합에 대한 데이터 가상화를 수행하는 방법을 보여드릴 것입니다. 



OData의 배경


지역 날씨 예보 서비스 회사가 자사 서비스를 Android, iOS의 모바일 앱과 브라우저를 통해 공개하고 싶다고 가정해 보겠습니다. 그러려면 해당 클라이언트에 데이터를 공개하는 자신의 방식을 고안해야 합니다. 또한 이러한 클라이언트에서 다양한 국가의 날씨 예보 서비스를 사용하고 집계하기를 원한다고 가정해 보겠습니다.


다른 국가의 날씨 예보 서비스는 데이터를 공개하는 자체 방식이 있을 수 있습니다. 따라서 클라이언트 응용 프로그램 개발자는 다양한 방식을 지원해야 하고, 결국 이러한 구현을 유지하는 것이 번거로운 일이 될 수 있습니다. 모든 날씨 서비스 공급자가 사용하는 표준 프로토콜이 있다면, 즉, 데이터를 모델링하는 방법에 합의하고 해당 데이터에 액세스하기 위한 프로토콜이 있을 경우 이러한 상황이 해결될 것입니다.


OData는 표준 데이터 모델 및 프로토콜을 정의하여 이 문제를 해결합니다. OData(Open Data Protocol)는 REST API를 만드는 데 사용할 수 있는 기존 서비스입니다. OData 서버는 .NET에서 Microsoft가 제공하는 Microsoft.OData.Core NuGet 패키지를 사용해 만들 수 있습니다.


OData는 WebApi 서버를 만들 수 있는 자체 도구 집합을 제공하고, 정렬, 필터링 등과 관련된 여러 작업을 수행하기 위한 자체 쿼리 매개 변수를 보유하고 있습니다. 어떤 데이터베이스도 OData 서버에 연결할 수 있습니다. 예를 들어 소매 의류 회사는 배송한 주문을 SQL 데이터베이스에 저장한 후 OData를 사용해 이 주문을 쿼리할 수 있습니다.


OData는 또한 API이므로 JSON, XML 등 다양한 데이터 형식으로 데이터를 반환만 할 수 있습니다. 이 데이터는 표나 목록과 같이 사용자가 읽을 수 있는 형식으로 계속 표시되어야 합니다.


Blazor DataGrid에 OData 표시


OData가 데이터 형식을 지정하거나 데이터를 읽는 데 유용하지만, 데이터는 표나 목록과 같이 사용자가 읽을 수 있는 형식으로 계속 시각화되어야 합니다.


ComponentOne Blazor용 FlexGrid는 OData 서버에서 반환된 데이터를 표시하는 데 쉽게 사용할 수 있는 DataGrid 컴포넌트입니다.


또한 서버에 다시 쿼리를 전송할 필요 없이 FlexGrid를 사용해 정렬, 필터링, 그룹화와 같은 다양한 기타 작업을 수행할 수 있습니다.

Blazor용 FlexGrid로 OData 서비스에 연결


FlexGrid와 Blazor Edition의 일부인 수많은 FlexGrid 샘플을 다운로드할 수 있습니다.


ComponentOne 최신 버전 다운로드 

지금 다운로드하십시오!


그런 다음 OData 서버에서 데이터를 가져와 ComponentOne Blazor FlexGrid에 표시하는 방법을 설명하겠습니다.



Blazor FlexGrid를 OData에 연결


위 데이터는 FlexGrid에 표시될 데이터입니다. 보시다시피 이 데이터는 JSON 형식으로 되어 있어 쉽게 읽을 수 없습니다.

Blazor용 FlexGrid로 OData 서비스에 연결

또한 필터링과 같은 작업을 수행하려면 기억하기 어렵고 실수할 가능성이 많은 $filter 쿼리를 OData URL에 수동으로 추가해야 합니다. 따라서 FlexGrid를 사용해 데이터를 표시하고 다양한 작업을 수행하는 것이 더 쉽습니다.


새로운 Blazor 프로젝트 만들기

  1. Visual Studio 19를 열고 ‘파일’, ‘새 프로젝트’를 차례로 클릭하거나 Ctrl+Shift+N을 누릅니다.

Blazor용 FlexGrid로 OData 서비스에 연결

  1. Blazor 응용 프로그램 템플릿을 선택하고 ‘다음’을 클릭합니다.

Blazor용 FlexGrid로 OData 서비스에 연결

  1. 프로젝트의 이름 및 위치를 입력하고 ‘만들기’를 클릭합니다.

Blazor용 FlexGrid로 OData 서비스에 연결

  1. Blazor WebAssembly 응용 프로그램을 선택합니다.

Blazor용 FlexGrid로 OData 서비스에 연결

  1. 프로젝트가 로드된 후 다음과 같은 NuGet 패키지를 프로젝트에 추가합니다.

    • C1.Blazor.Core

    • C1.Blazor.Input

    • C1.Blazor.Grid

    • C1.Blazor.DataPager

    • System.Text.Json


OData 서비스 클래스 만들기


프로젝트가 만들어졌으므로 이제 HttpClient 클래스를 사용해 OData 서버에 응용 프로그램을 연결하겠습니다. OData 서버에서 데이터를 빨리 가져오려면 ODataService 클래스를 만들어야 합니다.


  1. Data 폴더를 마우스 오른쪽 버튼으로 클릭한 후 ‘클래스 추가’로 이동합니다. 이 클래스의 이름을 ODataService로 지정합니다. 이 클래스는 제공된 URL로 데이터를 가져와 일반 개체로 구문 분석하는 데 사용할 수 있는 제네릭 클래스가 됩니다.

  2. 이 클래스에 다음 속성과 생성자를 추가합니다.

    public class ODataService<T>  
    {  
        public string URL { get; set; } 
        public string Modal { get; set; }
    ​
        public HttpClient Http { get; }
    ​
        public ODataService(string url, string model)  
        {  
    ​
              this.Http = new HttpClient(); 
              this.URL = url;  
              this.Modal = model;  
        }  
    }

  • URL 속성은 OData 서비스가 호스팅되는 위치의 URL을 설정하는 데 사용됩니다.

  • 모델 속성은 가져와야 할 모달 또는 표를 설정하는 데 사용됩니다.

  • HTTP 속성은 서버의 데이터를 가져오는 데 사용될 HttpClient 개체를 설정하는 데 사용됩니다.

  • 이 클래스의 생성자는 값을 적절한 속성에 할당합니다.

  1. 서버에서 데이터를 가져올 GetAsync 메서드를 추가합니다. 또한 비공개 GetUrl 및 ParseResponse 메서드를 추가합니다.

    public async Task<(List<T>, int)> GetAsync(int start, int count, string sorts, string filter)  
    {  
    var url = this.GetUrl(start, count, sorts, filter); var response = await this.Http.GetStringAsync(url); var parsedResponse = this.ParseResponse(response);  
    return (parsedResponse.Value, Convert.ToInt32(parsedResponse.Count));  
    }
    ​
    private string GetUrl(int start, int count, string sorts, string filter)  
    {  
    ODataUrlBuilder builder = new ODataUrlBuilder(this.URL, this.Modal); builder.Page(start, count).Sort(sorts).Filter(filter);  
    return builder.Build();  
    }
    ​
    private ODataResponse<T> ParseResponse(string response)  
    {  
    var parsedResponse = JsonSerializer.Deserialize<ODataResponse<T>>(response); return parsedResponse;  
    }

  • GetUrl 메서드는 전체 URL, 모달 및 항목의 시작 인덱스, 반환할 전체 항목, 정렬 적용 여부, 필터 등과 같은 기타 매개 변수를 생성합니다.

  • ParseResponse 메서드는 ODataService 클래스를 초기화할 때 제공되는 서버에서 반환된 JSON 응답을 개체로 구문 분석합니다.

  • GetAsync 메서드는 OData 서버에서 응답을 가져오는 데 사용됩니다.

  1. ODataService 클래스 내부에 비공개 ODataResponse 클래스를 추가합니다. 서버의 JSON 응답은 Newtonsoft.Json 라이브러리를 사용하는 이 클래스의 개체로 직렬화됩니다.

    private class ODataResponse<S>  
    {  
        [JsonPropertyName("odata.metadata")] 
        public string Metadata { get; set; } 
        [JsonPropertyName("odata.count")] 
        public string Count { get; set; } 
        [JsonPropertyName("value")]  
        public List<S> Value { get; set; }  
    }

  • odata.metadata JSON 속성에는 요청의 URL, 사용된 모달 클래스와 같은 메타데이터가 포함됩니다. 요구 사항에 대해 메타데이터를 사용할 필요는 없을 것입니다.

  • odata.count 속성에는 전체 항목 개수가 포함됩니다.

  • value 속성에는 서버에 저장된 실제 데이터가 포함됩니다. 이 클래스의 값 속성에 이 데이터를 저장하면 GetAsync 메서드가 이 개체를 반환합니다.

  1. OData 서버에서 데이터를 가져오기 위한 URL을 만드는 비공개 ODataUrlBuilder 클래스를 만듭니다. 이 클래스에는 정렬, 필터링 등을 거친 데이터를 서버에서 직접 가져오기 위한 메서드가 포함됩니다.

    private class ODataUrlBuilder  
    {  
      private string URL = "";  
      public ODataUrlBuilder(string url, string model)  
      {  
            this.URL = $"{url}/{model}?";  
            this.URL += "$format=json&$inlinecount=allpages";  
      }
    ​
      public ODataUrlBuilder Page(int skip, int count)  
      {  
          this.URL += $"&$skip={skip}&$top={count}"; 
          return this;  
      }
    ​
      public ODataUrlBuilder Sort(string sorts)  
      {  
            if(string.IsNullOrEmpty(sorts))  
            {  
                  return this;  
            }
            this.URL += $"&$orderby={sorts}"; 
            return this;  
      }   
    ​
      public ODataUrlBuilder Filter(string filter)  
      {  
            if(string.IsNullOrEmpty(filter))  
            {  
                  return this;  
            }
    ​
            this.URL += $"&$filter={filter}"; 
            return this;  
      }
    ​
      public string Build()  
      {  
          return this.URL;  
      }  
    }

모델 및 컨텍스트 클래스 만들기

ODataService 클래스에는 응답을 구문 분석할 모델 클래스가 필요합니다. 따라서 ODataService 클래스를 사용해 데이터를 가져오는 데 사용될 모델 클래스 및 컨텍스트 클래스를 만들겠습니다.

  1. Data 폴더를 다시 마우스 오른쪽 버튼으로 클릭하여 클래스를 추가합니다. 이 클래스의 이름을 Order라고 지정합니다.

  2. Order 클래스에 다음과 같은 속성을 추가합니다.

    public class Order  
    {  
    [Key]  
    public int OrderID { get; set; } 
    public string CustomerID { get; set; } 
    public int EmployeeID { get; set; }  
    public DateTime OrderDate { get; set; } 
    public DateTime RequiredDate { get; set; } 
    public DateTime ShippedDate { get; set; } 
    public int ShipVia { get; set; }  
    public string Freight { get; set; } 
    public string ShipName { get; set; } 
    public string ShipAddress { get; set; } 
    public string ShipCity { get; set; } 
    public string ShipRegion { get; set; }  
    public string ShipPostalCode { get; set; } 
    public string ShipCountry { get; set; }  
    }

  1. 같은 파일에 OrdersContext 클래스를 추가합니다.

    public class OrdersContext  
    {  
        private string URL => "[https://services.odata.org/Northwind/Northwind.svc/](https://services.odata.org/Northwind/Northwind.svc/)"; 
        private ODataService<Order> Service { get; set; }
    ​
        public OrdersContext()  
        {  
              this.Service = new ODataService<Order>(this.URL, "Orders");  
        }
    ​
        public async Task<List<Order>> GetOrders()  
        {  
              var ordersList = await this.Service.GetAsync(start, count, sortString, filterString); 
              return ordersList;  
        }  
    }

  • 이 클래스의 생성자는 ODataService 클래스의 개체를 초기화합니다.

  • GetAsync 메서드는 이 인스턴스를 사용해 서버에서 해당 주문 데이터를 가져옵니다.



대량의 데이터 집합에 대한 데이터 가상화 구현


다음으로, 대량의 데이터 집합에 대한 데이터 가상화 및 서버 측 정렬 및 필터링을 수행하는 방법을 보여드리겠습니다. 데이터 가상화에서는 필요한 데이터만 가져옵니다. 이 작업을 위해 C1VirtualDataCollection 클래스를 상속하는 컬렉션 클래스를 만들 것입니다. 이 클래스는 FlexGrid에 대한 데이터를 수동으로 가져올 수 있는 메서드를 제공합니다.


따라서 GetPageAsync 메서드를 사용해 OData 서버에서 데이터를 가져올 수 있습니다. 또한 이 메서드는 정렬 및 필터링이 FlexGrid에 적용되는지 여부를 정의하는 매개 변수를 제공합니다. 이 매개 변수를 OData 쿼리 매개 변수 문자열로 변환해야 합니다.


다음 단계에 따라 데이터 가상화를 구현해 봅시다.

  1. Data 폴더를 마우스 오른쪽 버튼으로 클릭하여 새 클래스를 만듭니다. 이 클래스의 이름을 ODataVirtualCollection으로 지정합니다. 이 클래스는 C1VirtualDataCollection 클래스를 확장해야 합니다.

  2. C1VirtualDataCollection은 추상 클래스이므로 이 클래스의 GetPageAsync 메서드를 재정의해야 합니다. 또한 정렬 및 필터링이 사용되도록 CanSort 및 CanFilter 메서드를 재정의해야 합니다.

    public class ODataVirtualCollection : C1VirtualDataCollection<Order>  
    {
    ​
      public override bool CanFilter(FilterExpression filterExpression)  
      {  
            return !(filterExpression is FilterPredicateExpression);  
      }
    ​
      public override bool CanSort(params SortDescription[] sortDescriptions)  
      {  
            return true;  
      }
    ​
      protected override async Task<Tuple<int, IReadOnlyList<Order>>> GetPageAsync(int pageIndex, int startingIndex int count, IReadOnlyList<SortDescription> sortDescriptions = null, FilterExpression filterExpression = null, CancellationToken cancellationToken = default)  
      {  
      }  
    }

보면 아시겠지만 GetPageAsync 메서드는 적절한 데이터를 가져오는 데 필요한 모든 매개 변수를 제공합니다. startingIndex와 개수 매개 변수를 사용해 데이터 전체가 아닌 데이터의 일부만 가져올 수 있습니다. 또한 sortDescriptions 및 filterExpression 매개 변수를 사용해 서버의 데이터를 정렬하고 필터링할 수 있습니다.

  1. 데이터를 가져오는 데 도움이 되는 OrdersContext 클래스의 개체를 추가합니다.

    public OrdersContext Ctx = new OrdersContext();

  1. SortDescription 배열을 OData 정렬 매개 변수로 변환하는 메서드를 추가합니다.

    private string ConvertSortToString(IReadOnlyList<SortDescription> sorts)  
    {  
      if (sorts == null)  
      {  
          return string.Empty;  
      }
    ​
      var sortList = sorts.Select(s =>  
      {  
          var str = s.SortPath + " ";  
          if (s.Direction == SortDirection.Ascending)  
          {
                str += "asc";
          }  
          else  
          {
                str += "desc";
          }
    ​
          return str;  
      }).ToList();
    ​
      var sortString = string.Join(',', sortList); return sortString;  
    }

이 메서드는 각 SortDescription을 반복하고 $orderby OData 매개 변수로 적절히 변환합니다.

  1. FilterExpression 개체를 필터 쿼리 매개 변수로 변환하는 메서드도 필요합니다. 적용되는 필터에 따라 FilterExpression 개체는 런타임에 FilterTextExpression 또는 FilterBinaryExpression의 인스턴스일 수 있습니다. 필터가 한 개의 열에서 사용되는 경우 FilterTextExpression의 인스턴스가 됩니다. 필터가 여러 개의 열에 적용되는 경우 FilterBinaryExpression의 인스턴스가 됩니다. FilterExpression 개체에서 제공되는 정보를 사용해 재귀적으로 필터 문자열을 만들어야 합니다.

    private string ConvertFilterToString(FilterExpression expression)  
    {  
      if(expression is FilterTextExpression)  
      {  
          return this.ConvertTextToString(expression as FilterTextExpression);  
      }  
      if(expression is FilterBinaryExpression)  
      {  
          return this.ConvertBinaryToString(expression as FilterBinaryExpression);  
      }  
      return "";  
    }
    ​
    private string ConvertBinaryToString(FilterBinaryExpression expression)  
    {  
      var result = "";  
      var left = expression.LeftExpression; 
      var right = expression.RightExpression;  
      result += this.ConvertFilterToString(left);  
      result += expression.FilterCombination == FilterCombination.And ? " and " : " or "; 
      result += this.ConvertFilterToString(right);  
      return result;  
    }
    ​
    private string ConvertTextToString(FilterTextExpression expression)  
    {  
      var column = expression.FilterPath; 
      var key = expression.Value;  
      string result = ConvertOperator(expression.FilterOperation, column, key); 
      return result;  
    }
    ​
    private string ConvertOperator(FilterOperation op, string column, object key)  
    {  
      var result = ""; 
      switch(op)  
    {  
          case FilterOperation.Contains:  
                result = $"substringof('{key}', {column})"; 
          break;  
          case FilterOperation.EndsWith:  
                result = $"endswith('{key}', {column})"; 
          break;  
          case FilterOperation.StartsWith:  
                result = $"startswith('{key}', {column})"; 
          break;  
          case FilterOperation.Equal:  
                result = $"{column} eq {key}"; 
          break;  
          case FilterOperation.EqualText: 
                result = $"{column} eq '{key}'";  
          break;  
          case FilterOperation.GreaterThan: 
                result = $"{column} gt {key}";  
          break;  
          case FilterOperation.GreaterThanOrEqual: 
                result = $"{column} ge {key}";  
          break;  
          case FilterOperation.LessThan: 
                result = $"{column} lt {key}";  
          break;  
          case FilterOperation.LessThanOrEqual: 
                result = $"{column} le {key}";  
          break;  
          case FilterOperation.NotEqualText: 
                result = $"{column} ne '{key}'";  
          break;  
          case FilterOperation.NotEqual: 
                result = $"{column} ne {key}";  
          break;  
    }  
    return result;  
    }

ConvertFilterToString 메서드는 FilterExpression의 인스턴스를 받아들이고 이 인스턴스에 따라 적절한 변환 메서드를 호출합니다. ConvertTextToString은 사용된 연산자를 가져오고 FilterPath 속성을 사용해 사용될 필터 문자열을 만듭니다. ConvertBinaryToString 메서드는 ConvertFilterToString 메서드를 다시 호출하여 왼쪽 및 오른쪽 식을 적절하게 변환합니다.

4. 필요한 모든 메서드를 추가했으므로 GetPageAsync 메서드를 구현해야 합니다. 이 메서드에서는 정렬 및 필터링 식을 해당되는 쿼리 매개 변수로 변환합니다.

protected override async Task<Tuple<int, IReadOnlyList<Order>>> GetPageAsync(int pageIndex, int 
startingIndex, int count, IReadOnlyList<SortDescription> sortDescriptions = null, FilterExpression filterExpression = null, CancellationToken cancellationToken = default)  
{  
  var sortString = this.ConvertSortToString(sortDescriptions);  
  var filterString = this.ConvertFilterToString(filterExpression);  
  var orders = await this.Ctx.GetOrders(startingIndex, count, sortString, filterString); 
  return new Tuple<int, IReadOnlyList<Order>>(this.Ctx.TotalCount, orders);  
}


Blazor DataGrid에 OData 표시


OrdersContext 클래스를 만들었으므로 이제 이 클래스를 사용해 데이터를 가져와 Blazor DataGrid인 FlexGrid에 표시할 수 있습니다. FlexGrid를 추가하기 전에 ComponentOne Blazor 컴포넌트에 필요한 몇 가지 스타일시트 및 스크립트에 참조를 추가해야 합니다. 다음 단계를 따르십시오.


  1. ~/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.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>

  1. Index.razor 파일에서 모든 코드를 제거하고 맨 위에 다음과 같은 가져오기 및 서비스를 추가합니다.

    @page "/"  
    @using FlexGridOData.Data; @using C1.Blazor.Grid; @using C1.Blazor.DataPager; @using C1.DataCollection; @using System.IO;  
    @using System.Text;

  1. FlexGrid 필터링을 위해 C1TextBox 인스턴스를 추가해야 합니다.

    <C1TextBox Placeholder="Enter Text to Filter" @bind-Text="@filterText"></C1TextBox>

  1. 이제 C1TextBox 아래에 FlexGrid 컴포넌트를 추가합니다. FlexGrid에 적용된 필터를 업데이트하기 위해 FullTextFilterBehavior 컴포넌트는 C1TextBox에 바인딩됩니다.

    <FlexGrid @ref="theGrid" ItemsSource="@Orders" Style="@("max-height: 70vh")" AutoGenerateColumns="false">  
      <FlexGridBehaviors>  
          <C1.Blazor.Grid.FullTextFilterBehavior FilterString="@filterText" MatchNumbers="false"></C1.  
    Blazor.Grid.FullTextFilterBehavior>  
        </FlexGridBehaviors>  
        <FlexGridColumns>  
            <GridColumn Header="OrderID" Binding="OrderID"></GridColumn>  
            <GridColumn Header="CustomerID" Binding="CustomerID"></GridColumn>  
            <GridDateTimeColumn Header="OrderDate" Binding="OrderDate" Format="MMM dd, yyyy"><  
    /GridDateTimeColumn>  
          <GridColumn Header="ShipName" Width="300" Binding="ShipName"></GridColumn>  
          <GridColumn Header="ShipCity" Binding="ShipCity"></GridColumn>  
          <GridColumn Header="ShipRegion" Binding="ShipRegion"></GridColumn>  
          <GridColumn Header="ShipCountry" Binding="ShipCountry"></GridColumn>  
        </FlexGridColumns>  
    </FlexGrid>

  1. 다음 코드를 추가하여 주문 데이터를 가져오고 FlexGrid 컴포넌트의 참조를 만듭니다.

    @code {  
    ODataVirtualCollection Orders; FlexGrid theGrid;  
    string filterText = "";
    ​
    protected override void OnInitialized()  
    {  
    Orders = new ODataVirtualCollection();  
    }  
    }

    OnInitialized 메서드는 이 컴포넌트가 초기화될 때 실행되는 Blazor 라이프사이클 메서드입니다. 이제 이 메서드에서 ODataVirtualCollection의 인스턴스를 초기화할 것입니다.  

  1. 코드를 저장한 후 F5 키를 사용해 프로젝트를 실행하면 FlexGrid가 주문 데이터와 함께 첫 페이지에 표시됩니다.

Blazor용 FlexGrid로 OData 서비스에 연결


다음으로, 여러 가지 기능이 어떻게 작동하는지 살펴보겠습니다.

스크롤할 때 데이터 가져오기(데이터 가상화)

C1VirtualDataCollection 클래스는 항목의 전체 목록에서 일부 데이터만 가져오도록 설계되었습니다. 이런 이유로 GetPageAsync 메서드는 서버에서 필요한 데이터만 쉽게 가져올 수 있는 시작 인덱스 및 데이터 개수를 제공합니다.


아래 스크린샷에서 볼 수 있듯이 눈금을 스크롤하면 표시되지 않은 데이터를 서버에서 가져올 수 있습니다.

Blazor용 FlexGrid로 OData 서비스에 연결


열 정렬

정렬은 열 헤더를 클릭하여 쉽게 완료할 수 있습니다. 첫 번째 클릭과 두 번째 클릭으로 데이터를 오름차순, 내림차순으로 정렬하고, 세 번째 클릭으로 정렬을 제거합니다.

헤더를 클릭하면 서버에 대한 호출이 전송되고 정렬된 데이터가 반환된다는 것을 스크린샷에서 확인할 수 있습니다.

Blazor용 FlexGrid로 OData 서비스에 연결



전체 텍스트 필터링(검색)


필터링은 FullTextFilterBehavior 컴포넌트를 사용해 수행됩니다. FilterString 속성은 C1TextBox의 텍스트 속성에 바인딩됩니다. C1TextBox에 문자를 입력할 때마다 C1TextBox는 FilterString을 업데이트하고 필터가 눈금에 적용됩니다.


그 결과 적절한 FilterExpression으로 GetPageAsync 호출이 이루어집니다. 이 식은 필터 문자열로 변환되고, 이미 필터링된 데이터를 OData 서버에서 가져옵니다.


Blazor용 FlexGrid로 OData 서비스에 연결



결론: ComponentOne Blazor용 FlexGrid를 사용해 앞으로 나가기


Blazor용 FlexGrid에서 OData를 표시하여 GrapeCity C# 웹 응용 프로그램의 다양한 소스에서 제공하는 데이터를 표시할 수 있습니다.


이 문서 내용에 따라 OData 및 ComponentOne Blazor FlexGrid를 시작할 준비를 완료했습니다. 이 문서에서 사용되는 샘플은 여기에서 다운로드할 수 있습니다. 

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.