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

Install the CData ADO.NET Provider for AlloyDB

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

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

Create a AlloyDB-Connected Blazor App

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

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.AlloyDB.dll, typically located at C:\Program Files\CData\CData ADO.NET Provider for AlloyDB\lib etstandard2.0).
👁 Reference ADO.NET for AlloyDB .dll in the Blazor app.

SELECT AlloyDB Data from the Blazor App

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

   The following connection properties are usually required in order to connect to AlloyDB.

   • Server: The host name or IP of the server hosting the AlloyDB database.
   • User: The user which will be used to authenticate with the AlloyDB server.
   • Password: The password which will be used to authenticate with the AlloyDB server.

   You can also optionally set the following:

   • Database: The database to connect to when connecting to the AlloyDB Server. If this is not set, the user's default database will be used.
   • Port: The port of the server hosting the AlloyDB database. This property is set to 5432 by default.

   Authenticating with Standard Authentication

   Standard authentication (using the user/password combination supplied earlier) is the default form of authentication.

   No further action is required to leverage Standard Authentication to connect.

   Authenticating with pg_hba.conf Auth Schemes

   There are additional methods of authentication available which must be enabled in the pg_hba.conf file on the AlloyDB server.

   Find instructions about authentication setup on the AlloyDB Server here.

   Authenticating with MD5 Authentication

   This authentication method must be enabled by setting the auth-method in the pg_hba.conf file to md5.

   Authenticating with SASL Authentication

   This authentication method must be enabled by setting the auth-method in the pg_hba.conf file to scram-sha-256.

   Authenticating with Kerberos

   The authentication with Kerberos is initiated by AlloyDB Server when the ∏ is trying to connect to it. You should set up Kerberos on the AlloyDB Server to activate this authentication method. Once you have Kerberos authentication set up on the AlloyDB Server, see the Kerberos section of the help documentation for details on how to authenticate with Kerberos.

   For example: User=alloydb;Password=admin;Database=alloydb;Server=127.0.0.1;Port=5432

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

    @page "/"
    @using System.Data;
    @using System.Data.CData.AlloyDB;
    
    <h1>Hello, world!</h1>
    
    Welcome to your Data app.
    
    <div class="row">
    <div class="col-12">
    
    @using (AlloyDBConnection connection = new AlloyDBConnection(
    "User=alloydb;Password=admin;Database=alloydb;Server=127.0.0.1;Port=5432"))
    {
    var sql = "SELECT ShipName, ShipCity FROM Orders WHERE ShipCountry = 'USA'";
    var results = new DataTable();
    
    AlloyDBDataAdapter dataAdapter = new AlloyDBDataAdapter(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 AlloyDB data as an HTML table in the Blazor app. 👁 Query AlloyDB from Blazor app.
   

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