Connect to Kafka 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 Apache Kafka can be used with standard ADO.NET interfaces, such as LINQ and Entity Framework, to interact with live Kafka 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 Kafka using standard SQL queries.

Install the CData ADO.NET Provider for Apache Kafka

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

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

Create a Kafka-Connected Blazor App

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

1. Create a Blazor project on Visual Studio.
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.ApacheKafka.dll, typically located at C:\Program Files\CData\CData ADO.NET Provider for Apache Kafka\lib etstandard2.0).

SELECT Kafka Data from the Blazor App

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

   Set BootstrapServers and the Topic properties to specify the address of your Apache Kafka server, as well as the topic you would like to interact with.

   Authorization Mechanisms

   • SASL Plain: The User and Password properties should be specified. AuthScheme should be set to 'Plain'.
   • SASL SSL: The User and Password properties should be specified. AuthScheme should be set to 'Scram'. UseSSL should be set to true.
   • SSL: The SSLCert and SSLCertPassword properties should be specified. UseSSL should be set to true.
   • Kerberos: The User and Password properties should be specified. AuthScheme should be set to 'Kerberos'.

   You may be required to trust the server certificate. In such cases, specify the TrustStorePath and the TrustStorePassword if necessary.

   For example: User=admin;Password=pass;BootStrapServers=https://localhost:9091;Topic=MyTopic;

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

         @page "/"
         @using System.Data;
         @using System.Data.CData.ApacheKafka;
         
         <h1>Hello, world!</h1>
         
         Welcome to your Data app.
         
         <div class="row">
             <div class="col-12">
         
                 @using (ApacheKafkaConnection connection = new ApacheKafkaConnection(
                   "User=admin;Password=pass;BootStrapServers=https://localhost:9091;Topic=MyTopic;"))
                 {
                     var sql = "SELECT Id, Column1 FROM SampleTable_1 WHERE Column2 = '100'";
                     var results = new DataTable();
         
                     ApacheKafkaDataAdapter dataAdapter = new ApacheKafkaDataAdapter(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 Kafka data as an HTML table in the Blazor app.

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