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.v23.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	A 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.

If you prepare a request with the DataSourceLoadOptions on the client and pass it to the server, only the following options are passed to the server:

• RequireTotalCount
• RequireGroupCount
• IsCountQuery
• Skip
• Take
• Sort
• Group
• Filter
• TotalSummary
• GroupSummary
• Select

A custom model binder that uses DataSourceLoadOptions or the server’s ConvertToGetRequestUri method can restore only these options from the request. If you need to use other options, specify them before you execute the DataSourceLoader.Load method in a controller action:

[HttpGet]
public object Orders(DataSourceLoadOptions loadOptions) {
    // ...
    loadOptions.StringToLower = true;
    return DataSourceLoader.Load(_nwind.Orders, loadOptions);
}

The following example demonstrates how to bind the Data Grid and its combo box 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);
    }
}

Program.cs

// ...
builder.Services.AddHttpClient<HttpClient>(ConfigureHttpClient);
builder.Services.AddScoped<HttpClient>(serviceProvider => serviceProvider.GetService<IHttpClientFactory>().CreateClient());
static void ConfigureHttpClient(HttpClient httpClient) {
    httpClient.DefaultRequestHeaders.Add("Accept", "application/json");
};

Run Demo: Data Grid - Custom Data Binding