Connect to TaxJar Data from Blazor Apps

Blazor is a framework for developing modern, client-side web UIs using .NET technology. Instead of coding in JavaScript, developers can use the familiar C# language and .NET libraries to build app UIs.

The CData ADO.NET Provider for TaxJar can be used with standard ADO.NET interfaces, such as LINQ and Entity Framework, to interact with live TaxJar data. Since Blazor supports .NET Core, developers can use CData ADO.NET Providers in Blazor apps. In this article, we will guide you to build a simple Blazor app that talks to TaxJar using standard SQL queries.

Install the CData ADO.NET Provider for TaxJar

CData ADO.NET Providers allow users to access TaxJar just like they would access SQL Server, using simple SQL queries.

Install the TaxJar ADO.NET Data Provider from the CData website or from NuGet. Search NuGet for "TaxJar ADO.NET Data Provider."

Create a TaxJar-Connected Blazor App

Start by creating a Blazor project that references the CData ADO.NET Provider for TaxJar

1. Create a Blazor project on Visual Studio.
👁 Create a Blazor app project.

2. From the Solution Explorer, right click Dependencies, then click Add Project Reference.
3. In the Reference Manager, click the Browse button, and choose the .dll file of the installed ADO.NET Provider (e.g. System.Data.CData.TaxJar.dll, typically located at C:\Program Files\CData\CData ADO.NET Provider for TaxJar\lib etstandard2.0).
👁 Reference ADO.NET for TaxJar .dll in the Blazor app.

SELECT TaxJar Data from the Blazor App

1. Open the Index.razor file from the Project page.
2. In a TaxJarConnection object, set the connection string:

   To authenticate to the TaxJar API, first obtain the API Key from the TaxJar UI.

   NOTE: the API is available only for Professional and Premium TaxJar plans.

   If you already have a Professional or Premium plan you can find the API Key by logging in the TaxJar UI and navigating to Account -> TaxJar API. After obtaining the API Key, you can set it in the APIKey connection property.

   Additional Notes

   • By default, the CData connector will retrieve data of the last 3 months in cases where the entity support date range filtering. You can set StartDate to specify the minimum creation date of the data retrieved.
   • If the API Key has been created for a sandbox API account please set UseSandbox to true, but not all endpoints will work as expected. For more information, refer to the TaxJar developer documentation.

   For example: APIKey=3bb04218ef8t80efdf1739abf7257144;

3. The code below creates a simple Blazor app for displaying TaxJar data, using standard SQL to query TaxJar just like SQL Server.

    @page "/"
    @using System.Data;
    @using System.Data.CData.TaxJar;
    
    <h1>Hello, world!</h1>
    
    Welcome to your Data app.
    
    <div class="row">
    <div class="col-12">
    
    @using (TaxJarConnection connection = new TaxJarConnection(
    "APIKey=3bb04218ef8t80efdf1739abf7257144;"))
    {
    var sql = "SELECT TransactionID, UserID FROM Orders WHERE TransactionID = '123'";
    var results = new DataTable();
    
    TaxJarDataAdapter dataAdapter = new TaxJarDataAdapter(sql, connection);
    dataAdapter.Fill(results);
    
    <table class="table table-bordered">
    <thead class="thead-light">
    <tr>
    @foreach (DataColumn item in results.Rows[0].Table.Columns)
    {
    <th scope="col">@item.ColumnName</th>
    }
    </tr>
    </thead>
    <tbody>
    @foreach (DataRow row in results.Rows)
    {
    <tr>
    @foreach (var column in row.ItemArray)
    {
    <td>@column.ToString()</td>
    }
    </tr>
    }
    </tbody>
    </table>
    }
    </div>
    </div>
    

4. Rebuild and run the project. The ADO.NET Provider renders TaxJar data as an HTML table in the Blazor app. 👁 Query TaxJar from Blazor app.
   

   At this point, you have a TaxJar-connected Blazor app, capable of working with live TaxJar data just like you would work with a SQL Server instance. Download a free, 30-day trial and start working with live TaxJar data in your Blazor apps today.