DataSourceLoadOptionsExtensions.ConvertToGetRequestUri(DataSourceLoadOptionsBase, String) Method

Generates a GET request URI with parameters based on the specified data loading options.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public static string ConvertToGetRequestUri(
    this DataSourceLoadOptionsBase options,
    string actionPath
)

Parameters

Name	Type	Description
options	DevExtreme.AspNet.Data.DataSourceLoadOptionsBase	A DataSourceLoadOptionsBase object that should be converted to parameters of a GET request URI.
actionPath	String	An URI to which a request should be sent.

Returns

Type	Description
String	A GET request URI with parameters.

Remarks

The ConvertToGetRequestUri extension method helps you bind DevExpress Blazor components to a Web API service. The following table lists supported components.

Component	Property
DxDataGrid<T>	CustomData
DxComboBox<TData, TValue>	CustomData
DxDataGridComboBoxColumn<T>	CustomData
DxListBox<TData, TValue>	CustomData

Assign the data source type to the component’s T parameter and specify the CustomData property’s delegate that asynchronously loads data from a Web API service. This delegate accepts a DataSourceLoadOptionsBase object as a parameter. Call the ConvertToGetRequestUri extension method to generate a GET request URI with parameters based on the accepted data loading options.

The following example demonstrates how to bind the Data Grid and its combobox columns to a Web API service.

Razor

@using DevExtreme.AspNet.Data
@using DevExtreme.AspNet.Data.ResponseModel
@using System.Threading
@using System.Threading.Tasks
@using System.Net.Http
@using System.Text.Json

<DxDataGrid T="@WebApiOrder" CustomData="@LoadOrderData">
    <Columns>
        <DxDataGridComboBoxColumn T="@(WebApiCustomerLookup)" TextFieldName="Text" ValueFieldName="Value"
                                  CustomData="@LoadCustomerData" Field="@nameof(WebApiOrder.CustomerID)" />
        <DxDataGridDateEditColumn Field="@nameof(WebApiOrder.OrderDate)" />
        <DxDataGridSpinEditColumn Field="@nameof(WebApiOrder.Freight)" />
        <DxDataGridColumn Field="@nameof(WebApiOrder.ShipCountry)" />
        <DxDataGridComboBoxColumn T="@(WebApiShipperLookup)" TextFieldName="Text" ValueFieldName="Value"
                                  CustomData="@LoadShipmentData" Field="@nameof(WebApiOrder.ShipVia)" />
    </Columns>
</DxDataGrid>

@code {
    [Inject] protected HttpClient Client { get; set; }

    public class WebApiOrder {
        public string CustomerID { get; set; }
        public DateTime OrderDate { get; set; }
        public decimal Freight { get; set; }
        public string ShipCountry { get; set; }
        public int ShipVia { get; set; }
    }

    public class WebApiCustomerLookup {
        public string Text { get; set; }
        public string Value { get; set; }
    }

    public class WebApiShipperLookup {
        public string Text { get; set; }
        public int Value { get; set; }
    }

    protected async Task<LoadResult> LoadOrderData(DataSourceLoadOptionsBase options, CancellationToken cancellationToken)
    => await LoadCustomData("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/Orders", options, cancellationToken);
    protected async Task<LoadResult> LoadCustomerData(DataSourceLoadOptionsBase options, CancellationToken cancellationToken)
        => await LoadCustomData("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/CustomersLookup", options, cancellationToken);
    protected async Task<LoadResult> LoadShipmentData(DataSourceLoadOptionsBase options, CancellationToken cancellationToken)
        => await LoadCustomData("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/ShippersLookup", options, cancellationToken);

    protected async Task<LoadResult> LoadCustomData(string dataEndpointUri, DataSourceLoadOptionsBase options, CancellationToken cancellationToken) {
        using var response = await Client.GetAsync(options.ConvertToGetRequestUri(dataEndpointUri), cancellationToken);
        response.EnsureSuccessStatusCode();
        using var responseStream = await response.Content.ReadAsStreamAsync();
        return await JsonSerializer.DeserializeAsync<LoadResult>(responseStream, cancellationToken: cancellationToken);
    }
}

Startup.cs

public class Startup {
    // ...
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddHttpClient<HttpClient>(ConfigureHttpClient);
        services.AddScoped<HttpClient>(serviceProvider => serviceProvider.GetService<IHttpClientFactory>().CreateClient());

        static void ConfigureHttpClient(HttpClient httpClient) {
            httpClient.DefaultRequestHeaders.Add("Accept", "application/json");
        };
    }
}

Online Demo

Data Grid - Custom Data Binding