Using SQL Data Sources
Our sample projects and report templates can help you learn the basics of working with our products.In a Blazor WebAssembly app the browser cannot reach a database directly, so SQL data is fetched through a server API.
Client (WASM). The viewer requests the report and the data from the server, then registers the data:
Server. A controller queries the SQL database and returns the data as JSON:
The server keeps the connection string and does the SQL query, while the WebAssembly client only receives the report template and the resulting data over HTTP — the correct pattern for using databases from a browser-hosted app.
Client (WASM). The viewer requests the report and the data from the server, then registers the data:
@inject HttpClient Http
<StiBlazorViewer Report="@Report" OnViewerAfterRender="@OnViewerAfterRender" />
@code {
private StiReport Report;
protected async Task OnViewerAfterRender()
{
this.Report = new StiReport();
var reportBytes = await Http.GetByteArrayAsync("api/report/?name=TwoSimpleLists");
this.Report.Load(reportBytes);
var jsonData = await Http.GetStringAsync("api/data/?name=Demo");
var dataSet = StiJsonToDataSetConverterV2.GetDataSet(jsonData);
this.Report.Dictionary.Databases.Clear();
this.Report.RegData("Demo", dataSet);
}
}Server. A controller queries the SQL database and returns the data as JSON:
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Using_SQL_Data_Sources.Client;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();The server keeps the connection string and does the SQL query, while the WebAssembly client only receives the report template and the resulting data over HTTP — the correct pattern for using databases from a browser-hosted app.