OData Integration Demo

Query OData v3/v4 endpoints with automatic $filter generation, multi-field search, and all filter strategies.

Live Demo: TimeZone Search

Search system time zones using an OData endpoint.

Try typing: Pacific, Eastern, Nepal, New Zealand, Central

Filter Strategy:

StartsWith Contains Fuzzy

OData Features

OData v3 + v4 Support - Automatic syntax selection
StartsWith Filter - startswith(field,'value')
Contains Filter - contains(field,'value') (v4) / substringof('value',field) (v3)
Multi-Field Search - OR-combined filters
Additional Filters - Static filters ANDed with search
Fuzzy Fallback - Client-side re-ranking for typo tolerance

Configuration Options

EndpointUrl - OData endpoint URL
Version - V3 or V4 (default: V4)
FilterStrategy - StartsWith, Contains, FuzzyFallback
Top - Max results ($top)
Select - Fields to return ($select)
OrderBy - Sort order ($orderby)
AdditionalFilter - Extra filter conditions
CaseInsensitive - Use tolower() wrapper

Usage Examples

Basic OData Search (This Demo)

@inject HttpClient Http

<AutoComplete TItem="TimeZoneDto"
              DataSource="@_odataSource"
              TextField="@(tz => tz.DisplayName)"
              DisplayMode="ItemDisplayMode.TitleWithDescription"
              DescriptionField="@(tz => tz.StandardName)"
              Placeholder="Search time zones..." />

@code {
    private ODataDataSource<TimeZoneDto> _odataSource = null!;

    protected override void OnInitialized()
    {
        var options = new ODataOptions
        {
            EndpointUrl = "/odata/timezones",
            FilterStrategy = ODataFilterStrategy.Contains,
            Top = 20,
            Select = new[] { "Id", "DisplayName", "StandardName", "BaseUtcOffset" }
        };
        _odataSource = new ODataDataSource<TimeZoneDto>(
            Http, options, new[] { "DisplayName", "StandardName" });
    }
}

Multi-Field Search

var options = new ODataOptions
{
    EndpointUrl = "https://api.example.com/odata/products",
    FilterStrategy = ODataFilterStrategy.Contains,
    Top = 20,
    Select = new[] { "Id", "Name", "Description", "Category" },
    OrderBy = "Name"
};

// Search across multiple fields (combined with OR)
_odataSource = new ODataDataSource<Product>(
    Http,
    options,
    searchFieldNames: new[] { "Name", "Description", "Category" });

Generated OData:
$filter=(contains(tolower(Name),'search') or contains(tolower(Description),'search') or contains(tolower(Category),'search'))&$top=20&$select=Id,Name,Description,Category&$orderby=Name

OData v3 Endpoint

var options = new ODataOptions
{
    EndpointUrl = "https://legacy-api.example.com/odata/products",
    Version = ODataVersion.V3,  // Use v3 syntax
    FilterStrategy = ODataFilterStrategy.Contains
};

_odataSource = new ODataDataSource<Product>(Http, options, "Name");

Generated OData (v3):
$filter=substringof('search',tolower(Name))

With Additional Static Filter

var options = new ODataOptions
{
    EndpointUrl = "https://api.example.com/odata/products",
    FilterStrategy = ODataFilterStrategy.StartsWith,
    AdditionalFilter = "IsActive eq true and CategoryId eq 5"
};

_odataSource = new ODataDataSource<Product>(Http, options, "Name");

Generated OData:
$filter=(startswith(tolower(Name),'search')) and (IsActive eq true and CategoryId eq 5)

Error Handling

var dataSource = new ODataDataSource<Product>(Http, options, "Name");

// Subscribe to errors
dataSource.ErrorOccurred += (sender, errorMessage) =>
{
    Console.WriteLine($"Error: {errorMessage}");
    // Show user-friendly message, log error, etc.
};

// Or check after search
var results = await dataSource.SearchAsync("test");
if (dataSource.LastError != null)
{
    Console.WriteLine($"Last error: {dataSource.LastError}");
}

Test the OData Endpoint Directly

Try these curl commands to test the OData endpoint:

# Get all time zones (top 10)
curl "https://blazorautocomplete.easyappdev.com/odata/timezones?\$top=10"

# Filter by StandardName starting with "Ne"
curl "https://blazorautocomplete.easyappdev.com/odata/timezones?\$filter=startswith(StandardName,'Ne')&\$select=DisplayName,StandardName"

# Contains filter on DisplayName
curl "https://blazorautocomplete.easyappdev.com/odata/timezones?\$filter=contains(DisplayName,'Pacific')&\$top=5"

Filter Strategy Comparison

Strategy	OData v4	OData v3	Use Case
`StartsWith`	`startswith(field,'value')`	`startswith(field,'value')`	Fast prefix matching (e.g., typing ahead)
`Contains`	`contains(field,'value')`	`substringof('value',field)`	Find anywhere in string
`FuzzyFallback`	`contains()` + client re-rank	`substringof()` + client re-rank	Typo tolerance (server fetches, client ranks)

Back to Home