Bind OData to Blazor Smart.Grid

Setup The Blazor Application

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Connect to OData Service

The following steps detail how to connect to a OData Service and retrieve its data inside your Blazor Application. If you already have already connected to a OData Service, continue to Bind ODataService to Grid.

1. For the purpose of the Demo, we will use the following OData Service, which returns an Array of People:
   https://services.odata.org/V4/TripPinServiceRW/$metadata
   
2. The easiest way to connect to an OData Service is by using the "OData Connected Service Extension" for Visual Studio.
   To download the extension, navigate to Extensions-> Manage Extensiions , then search for "OData Connected Service" and install it.
   
3. Once installed, right-click on your project and navigate to Solution Explorer -> Add -> Connected Service. In the Connected Services window that appears, select OData Connected Service.
4. This will open the OData Connected Service window, where you can enter the URL of the OData Service you want to connect to.
   Set the "Address" field to: https://services.odata.org/V4/TripPinServiceRW/$metadata and click "Finish".
   The wizard will generate a C# class for each Entity in the OData Service in the "Connected Services" folder, which you can use to bind to the Grid.
   

   Bind ODataService to Grid

   1. Once the C# class for the OData Service is generated, navigate to the Index.razor file and create a simple Blazor Smart Grid

      <Grid DataSource="@dataRecords">
        <Columns>
            <Column Label="First Name" DataField="FirstName"></Column>
            <Column Label="Last Name" DataField="LastName"></Column>
            <Column Label="User Name" DataField="UserName"></Column>
        </Columns>
      </Grid>

   2. Inject the OData Service and create a ListPeople() method, which will request the data from the OData Service:

      @page "/"
      @using Microsoft.OData.SampleService.Models.ODataService
      
      ...
      
      @code{
        List<Person> dataRecords;
      
        private async Task<IEnumerable> ListPeople()
        {
            var serviceRoot = "https://services.odata.org/V4/TripPinServiceRW/";
            var context = new DefaultContainer(new Uri(serviceRoot));
      
            return await context.People.ExecuteAsync();
        }
      }

   3. Finally, call the ListPeople() method in the OnBaseInitialized() method, which will populate the Grid with the data from the OData Service:

      protected override async void OnInitialized()
      {
          base.OnInitialized();
          dataRecords = (await ListPeople()).ToList();
          StateHasChanged();
      }

   4. Here is the final code for the Index.razor page:

      @page "/"
      
      @using Microsoft.OData.SampleService.Models.ODataService;
      @if (dataRecords == null)
      {
          <p><em>Loading...</em></p>
      }
      else{
        <Grid DataSource="@dataRecords">
          <Columns>
              <Column Label="First Name" DataField="FirstName"></Column>
              <Column Label="Last Name" DataField="LastName"></Column>
              <Column Label="User Name" DataField="UserName"></Column>
          </Columns>
        </Grid>
      }
      
      
      @code{
          List<Person> dataRecords;
      
          private async Task<IEnumerable<Person>> ListPeople()
          {
              var serviceRoot = "https://services.odata.org/V4/TripPinServiceRW/";
              var context = new DefaultContainer(new Uri(serviceRoot));
      
              return await context.People.ExecuteAsync();
          }
      
          protected override async void OnInitialized()
          {
              base.OnInitialized();
              dataRecords = (await ListPeople()).ToList();
              StateHasChanged();
          }
      
      }