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

Install the CData ADO.NET Provider for Bitbucket

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

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

Create a Bitbucket-Connected Blazor App

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

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.Bitbucket.dll, typically located at C:\Program Files\CData\CData ADO.NET Provider for Bitbucket\lib etstandard2.0).

SELECT Bitbucket Data from the Blazor App

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

   For most queries, you must set the Workspace. The only exception to this is the Workspaces table, which does not require this property to be set, as querying it provides a list of workspace slugs that can be used to set Workspace. To query this table, you must set Schema to 'Information' and execute the query SELECT * FROM Workspaces>.

   Setting Schema to 'Information' displays general information. To connect to Bitbucket, set these parameters:

   • Schema: To show general information about a workspace, such as its users, repositories, and projects, set this to Information. Otherwise, set this to the schema of the repository or project you are querying. To get a full set of available schemas, query the sys_schemas table.
   • Workspace: Required if you are not querying the Workspaces table. This property is not required for querying the Workspaces table, as that query only returns a list of workspace slugs that can be used to set Workspace.

   Authenticating to Bitbucket

   Bitbucket supports OAuth authentication only. To enable this authentication from all OAuth flows, you must create a custom OAuth application, and set AuthScheme to OAuth.

   Be sure to review the Help documentation for the required connection properties for you specific authentication needs (desktop applications, web applications, and headless machines).

   Creating a custom OAuth application

   From your Bitbucket account:

   1. Go to Settings (the gear icon) and select Workspace Settings.
   2. In the Apps and Features section, select OAuth Consumers.
   3. Click Add Consumer.
   4. Enter a name and description for your custom application.
   5. Set the callback URL:
      • For desktop applications and headless machines, use http://localhost:33333 or another port number of your choice. The URI you set here becomes the CallbackURL property.
      • For web applications, set the callback URL to a trusted redirect URL. This URL is the web location the user returns to with the token that verifies that your application has been granted access.
   6. If you plan to use client credentials to authenticate, you must select This is a private consumer. In the driver, you must set AuthScheme to client.
   7. Select which permissions to give your OAuth application. These determine what data you can read and write with it.
   8. To save the new custom application, click Save.
   9. After the application has been saved, you can select it to view its settings. The application's Key and Secret are displayed. Record these for future use. You will use the Key to set the OAuthClientId and the Secret to set the OAuthClientSecret.

   For example: Workspace=myworkspaceslug;Schema=Information

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

         @page "/"
         @using System.Data;
         @using System.Data.CData.Bitbucket;
         
         <h1>Hello, world!</h1>
         
         Welcome to your Data app.
         
         <div class="row">
             <div class="col-12">
         
                 @using (BitbucketConnection connection = new BitbucketConnection(
                   "Workspace=myworkspaceslug;Schema=Information"))
                 {
                     var sql = "SELECT Title, ContentRaw FROM Issues WHERE Id = '1'";
                     var results = new DataTable();
         
                     BitbucketDataAdapter dataAdapter = new BitbucketDataAdapter(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 Bitbucket data as an HTML table in the Blazor app.

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