Connect a C# .NET Blazor App to Zoho CRM

Q: How do you create a connection to Zoho CRM using dotConnect in C#?

Define a connection string that includes the Url of your Zoho CRM account, the authentication parameters, and the License Key. Then create a ZohoConnection instance and call Open() inside a try-catch block to establish the connection and handle potential errors.

Q: Can you connect to Zoho CRM using Entity Framework Core and dotConnect?

Yes, you can use Entity Developer to visually generate an EF Core model from Zoho CRM modules, or run Scaffold-DbContext with the Devart.Data.Zoho.EFCore package and a dotConnect connection string including License Key to create the DbContext and entity classes.

Q: Is it possible to explore Zoho CRM data using Visual Studio Server Explorer with dotConnect?

Yes, open Visual Studio Server Explorer, add a new Data Connection, select dotConnect for Zoho CRM as the provider, configure OAuth authentication, test the connection, and browse Zoho CRM modules directly from the IDE.

This guide walks you through the process of integrating your ASP.NET Core Blazor application with Zoho CRM using dotConnect for Zoho CRM — a powerful ADO.NET provider from Devart. Here, you'll learn how to set up OAuth authentication, connect to the CRM API, and perform basic data operations (read, insert, delete) directly from your Blazor frontend or backend logic.

Why dotConnect for Zoho CRM?

Quick and easy integration

dotConnect enables straightforward connectivity between .NET applications and Zoho CRM, allowing developers to access CRM modules and records without working directly with Zoho's REST APIs.

User-friendly classes

Using familiar ADO.NET components, dotConnect for Zoho CRM allows developers to work with data through standard .NET data access patterns such as connections, commands, and data readers.

Advanced ORM support

dotConnect works with EF Core, Dapper, NHibernate, and LinqConnect, enabling flexible object-relational mapping and efficient interaction with Zoho CRM data in .NET applications.

Interactive OAuth token generation

Access to Zoho CRM is authorized through a browser-based login flow. After successful authentication, dotConnect automatically retrieves and manages access and refresh tokens for secure connections.

Full compliance with ADO.NET

Devart implements the standard ADO.NET provider model in dotConnect solutions, ensuring consistent behavior and compatibility with existing .NET frameworks and development tools.

Priority support & frequent updates

Devart provides professional technical assistance, comprehensive documentation, and ongoing product enhancements, helping developers maintain stable and reliable integrations with Zoho CRM.

Download and activate dotConnect for Zoho CRM

You can start using dotConnect for Zoho CRM immediately with a 30-day free trial. Choose one of the following installation options:

30-day free trial version

dotnet add package Devart.Data.Zoho

Install-Package Devart.Data.Zoho

You can install the driver by using the Windows installer.

After you receive the license key, add it to your connection strings to connect to the data source.

Start using dotConnect for Zoho CRM in your project today with a free trial

Free 30-day trial

Check Zoho CRM objects

1. To connect to Zoho CRM using the built-in Data Explorer, navigate to Tools > Connect to Database.

The Connect to Database option lets connect to Zoho CRM

2. Then, select the Zoho CRM data source, enter a Zoho domain, and click Web Login.

The Add Connection window requires Zoho CRM credentials to establish a connection

3. Log in to your Zoho account and grant access to your Zoho CRM organization.

Devart ADO.NET Provider requests access to your Zoho account

4. After that, select the tables and fields you want to work with, and retrieve the data.

Visual Studio displays data from the selected tables

Read Zoho CRM data

Now, let's see how to retrieve and display data from Zoho CRM.

Create the AppConfig class

Create a new class file named AppConfig.cs in your project to store the connection string and other configuration settings:

C# Copy code

namespace ZohoBlazor
{
    public class AppConfig
    {
        public string LicenseKey { get; }

        
            public
            AppConfig()
        
        {
            LicenseKey = "your-license-key";
        }

        
            public
            string
            GetConnectionString()
        
        {
            return
                
                    $"Authentication Type=OAuthInteractive;License Key={LicenseKey}"
                ;
        }
    }
}

Create a service to connect to Zoho CRM

Create ZohoCrmService.cs to manage the connection and data retrieval from Zoho CRM.

C# Copy code

using System;
using System.Data;
using Devart.Data.Zoho;

namespace ZohoBlazor
{
    public class ZohoCrmService
    {
        private readonly AppConfig _config;

        
            public
            ZohoCrmService(AppConfig config)
        
        {
            _config = config;
        }

        
            public
            bool
            CheckConnection()
        
        {
            try
            {
                using (var connection =
                    new ZohoConnection(_config.GetConnectionString()))
                {
                    connection.Open();
                    return true;
                }
            }
            catch (Exception)
            {
                return false;
            }
        }

        
            public DataTable
            GetAccounts()
        
        {
            using (var connection =
                new ZohoConnection(_config.GetConnectionString()))
            {
                connection.Open();

                var command =
                    new ZohoCommand(
                        "SELECT \"Account Name\", Phone, Website, \"Account Type\" FROM Accounts",
                        connection
                    );

                var adapter = new ZohoDataAdapter(command);
                var dataTable = new DataTable();

                adapter.Fill(dataTable);
                return dataTable;
            }
        }
    }
}

The CheckConnection method checks whether a connection to Zoho CRM can be established using the provided configuration. The GetAccounts method retrieves data from the Account table in Zoho CRM. The method initiates the connection to Zoho CRM and executes an SQL command to select specific fields from the table. Also, it uses ZohoDataAdapter to fill DataTable with the results of the query and returns DataTable.

Register the service in Startup.cs

Register ZohoCrmService.cs and AppConfig.cs in the Program.cs file.

C# Copy code

// Register AppConfig and ZohoCrmService
builder.Services.AddSingleton<AppConfig>();
builder.Services.AddSingleton<ZohoCrmService>();

Create the Accounts Razor component

Create a new Blazor component named Accounts.razor to display data from the Accounts table.

razor Copy code

@page "/accounts"
@using System.Data
@inject ZohoCrmService ZohoCrmService

<h3>Accounts</h3>

@if (isConnected)
{
    <p>
        Connection Status: <strong>Connected</strong>
    </p>
}
else
{
    <p>
        Connection Status: <strong>Disconnected</strong>
    </p>
}

@if (accounts != null)
{
    <table class="table">
        <thead>
            <tr>
                <th>Account Name</th>
                <th>Phone</th>
                <th>Website</th>
                <th>Account Type</th>
            </tr>
        </thead>

        <tbody>
            @foreach (DataRow row in accounts.Rows)
            {
                <tr>
                    <td>@row["Account Name"]</td>
                    <td>@row["Phone"]</td>
                    <td>@row["Website"]</td>
                    <td>@row["Account Type"]</td>
                </tr>
            }
        </tbody>
    </table>
}

@code
{
    private bool isConnected = false;
    private DataTable accounts;

    protected override void OnInitialized()
    {
        isConnected = ZohoCrmService.CheckConnection();

        if (isConnected)
        {
            accounts = ZohoCrmService.GetAccounts();
        }
    }
}

Add navigation to the Accounts component

Add a navigation link to the Accounts component in the NavMenu.razor component.

razor Copy code

<div class="nav-item px-3">

    <NavLink
        
            class="nav-link"
            href="accounts"
        
    >

        <span
            
                class="oi oi-list-rich"
                aria-hidden="true"
            
        >
        </span>

        Accounts

    </NavLink>

</div>

Run the application and navigate to the Accounts page to see the connection status and the data from the Accounts table.

The Accounts page displays the current connection status

This example provides a basic setup for connecting to Zoho CRM and displaying data from the table in the Blazor application. Make sure to replace the placeholder values in AppConfig.cs with your Zoho CRM credentials.

Insert new data

To further enhance your Blazor application, we'll create a form that adds a new account to Zoho CRM. We'll also create a custom endpoint to handle the form submission. Here's how to do it.

Step 1. Create a form in Accounts.razor

First, let's add a new form to the Accounts.razor component. This form will allow users to input details for a new account and submit them.

razor Copy code

<form 
    id="insertAccountForm" 
    onsubmit="event.preventDefault(); window.insertAccount();"
>
    <input 
        type="text" 
        id="accountName" 
        placeholder="Account Name" 
        required 
    />

    <input 
        type="text" 
        id="phone" 
        placeholder="Phone" 
        required 
    />

    <input 
        type="text" 
        id="website" 
        placeholder="Website" 
        required 
    />

    <input 
        type="text" 
        id="accountType" 
        placeholder="Account Type" 
        required 
    />

    <button type="submit">
        Insert Account
    </button>
</form>

Step 2. Add the JavaScript interop functionality to display alerts

To use JavaScript's alert function from Blazor, you need to inject the IJSRuntime service into your component. Paste this code into the @code section of Accounts.razor.

C# Copy code

@inject IJSRuntime JsRuntime

Then, in the Solution Explorer, create the Account.cs class.

C# Copy code

namespace ZohoBlazor
{
    public class Account
    {
        public string Name { get; set; }
        public string Phone { get; set; }
        public string Website { get; set; }
        public string Type { get; set; }
    }
}

And add the InsertAccount method to ZohoCrmService.cs.

C# Copy code

public bool InsertAccount(Account account)
{
    try
    {
        using (var connection = new ZohoConnection(_config.GetConnectionString()))
        {
            connection.Open();

            var command = new ZohoCommand(
                "INSERT INTO Accounts (\"Account Name\", Phone, Website, \"Account Type\") VALUES (:name, :phone, :website, :type)",
                connection
            );

            command.Parameters.AddWithValue("name", account.Name);
            command.Parameters.AddWithValue("phone", account.Phone);
            command.Parameters.AddWithValue("website", account.Website);
            command.Parameters.AddWithValue("type", account.Type);

            int rowsAffected = command.ExecuteNonQuery();
            return rowsAffected > 0;
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error inserting account: {ex.Message}");
        return false;
    }
}

Step 3. Create a custom endpoint in Program.cs

Next, let's modify the Program.cs file to add a custom endpoint that handles the POST request for adding a new account.

C# Copy code

// Custom endpoint for adding an account
app.MapPost("/accounts/insert", async (HttpContext context, ZohoCrmService zohoCrmService) =>
{
    if (
        context.Request.Query.TryGetValue("AccountName", out var accountName) &&
        context.Request.Query.TryGetValue("Phone", out var phone) &&
        context.Request.Query.TryGetValue("Website", out var website) &&
        context.Request.Query.TryGetValue("AccountType", out var accountType))
    {
        var account = new Account
        {
            Name = accountName,
            Phone = phone,
            Website = website,
            Type = accountType
        };

        bool success = zohoCrmService.InsertAccount(account);

        string message = success
            ? "Account inserted successfully."
            : "Failed to insert account. Account may already exist.";

        await context.Response.WriteAsync(message);
    }
    else
    {
        await context.Response.WriteAsync("Invalid request parameters.");
    }
});

Step 4. Update MainLayout.razor

In the MainLayout.razor file, place the JavaScript function inside the article section. This ensures that the script is loaded and available for all components that use this layout.

javascript Copy code

<script>

window.insertAccount = async function () 
{
    const accountName = document.getElementById('accountName')?.value;
    const phone = document.getElementById('phone')?.value;
    const website = document.getElementById('website')?.value;
    const accountType = document.getElementById('accountType')?.value;

    const response = await fetch(
        `/accounts/insert?AccountName=${encodeURIComponent(accountName)}&Phone=${encodeURIComponent(phone)}&Website=${encodeURIComponent(website)}&AccountType=${encodeURIComponent(accountType)}`,
        {
            method: 'POST'
        }
    );

    const message = await response.text();

    alert(message);

    if (message.includes("successfully")) 
    {
        window.location.href = "/accounts";
    }
};

</script>

When you add the script to MainLayout.razor, it loads once and works across all components that use the layout. This ensures that the insertAccount function is defined and accessible when the form is submitted.

The form in Accounts.razor calls the window.insertAccount function when submitted. This function is now globally available because it is defined in the layout file.

The Accounts page now includes fields for adding new accounts

Let's try to add a new test account.

The window notifies about the successfully inserted account

Click OK to reload the page and see the result.

The Accounts page demonstrates the added account

Delete data

To add the Delete button next to each row in the table and implement the functionality for removing a row from Zoho CRM, you can follow these steps.

Step 1. Update ZohoCrmService.cs to include the Delete method

First, add the method to ZohoCrmService.cs that deletes an account based on the account name.

C# Copy code

public bool DeleteAccount(string accountName)
{
    try
    {
        using (var connection = new ZohoConnection(_config.GetConnectionString()))
        {
            connection.Open();

            var command = new ZohoCommand(
                "DELETE FROM Accounts WHERE \"Account Name\" = :name",
                connection
            );

            command.Parameters.AddWithValue("name", accountName);

            int rowsAffected = command.ExecuteNonQuery();

            return rowsAffected > 0;
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
        return false;
    }
}

Step 2. Add a custom endpoint for deleting an account

In the Program.cs file, add a custom endpoint to remove an account based on its name.

C# Copy code

// Custom endpoint for deleting an account
app.MapDelete("/accounts/delete", async (HttpContext context, ZohoCrmService zohoCrmService) =>
{
    if (context.Request.Query.TryGetValue("AccountName", out var accountName))
    {
        bool success = zohoCrmService.DeleteAccount(accountName);

        string message = success
            ? "Account deleted successfully."
            : "Failed to delete account.";

        await context.Response.WriteAsync(message);
    }
    else
    {
        await context.Response.WriteAsync("Invalid request parameters.");
    }
});

Step 3. Update Accounts.razor to include Delete buttons

Modify the Accounts.razor component to implement a delete button next to each row in the table. This button will call a JavaScript function to handle the deletion.

razor Copy code

<td>
    <a 
        href="#" 
        onclick="event.preventDefault(); window.deleteAccount('@row["Account Name"]')" 
        style="text-decoration: none; color: inherit;"
    >

        <span 
            style="cursor: pointer; font-size: 1.2em;"
        >
            ❌
        </span>

    </a>
</td>

Step 4. Add a JavaScript function to delete an account

Add a JavaScript function to handle account deletion. This function will be called when the delete button is clicked. You can place it in the <script> section of MainLayout.razor.

javascript Copy code

window.deleteAccount = async function(accountName) 
{
    const response = await fetch(
        `/accounts/delete?AccountName=${encodeURIComponent(accountName)}`,
        {
            method: 'DELETE'
        }
    );

    const message = await response.text();

    alert(message);

    if (message.includes("successfully")) 
    {
        window.location.href = "/accounts";
    }
};

Run the application.

The Accounts page now has Delete buttons

Try to delete the test account.

The window informs that the account is successfully deleted

Click OK to check that the account has been deleted.

The Accounts page no longer contains the previously added account

This setup allows you to remove accounts from Zoho CRM and see the updated list of accounts. The alert indicates the success or failure of the operation.

Conclusion

With dotConnect for Zoho CRM, you can quickly connect a .NET Blazor application to Zoho CRM and perform data operations using familiar ADO.NET interfaces. This approach eliminates the need for custom HTTP request handling or manual token management.

FAQ

How do you install and activate dotConnect for Zoho CRM in a .NET project?

Install dotConnect for Zoho CRM using the EXE installer or by adding the Devart.Data.Zoho NuGet package to your project. Then obtain your Activation Key from your Devart Customer Portal and include it in the connection string via the License Key parameter.

How do you authenticate to Zoho CRM using Interactive OAuth in dotConnect?

To authenticate with Zoho CRM, use the connection string parameter:

Authentication Type=OAuthInteractive

When the ZohoConnection opens, a browser window appears for you to sign in to your Zoho account and grant access. After authorization, dotConnect automatically retrieves and manages the access and refresh tokens.

How do you create a connection to Zoho CRM using dotConnect in C#?

Define a connection string that includes the Url of your Zoho CRM account, the authentication parameters, and the License Key. Then create a ZohoConnection instance and call Open() inside a try-catch block to establish the connection and handle potential errors.

Can you query Zoho CRM data using SQL with dotConnect?

Yes, dotConnect allows you to retrieve and manage Zoho CRM modules using SQL queries. Developers can work with entities such as Leads, Contacts, Accounts, and Deals using familiar SQL syntax.

Can you connect to Zoho CRM using Entity Framework Core and dotConnect?

Yes, you can use Entity Developer to visually generate an EF Core model from Zoho CRM modules, or run Scaffold-DbContext with the Devart.Data.Zoho.EFCore package and a dotConnect connection string (including License Key) to create the DbContext and entity classes.

Is it possible to explore Zoho CRM data using Visual Studio Server Explorer with dotConnect?

Yes. Open Visual Studio Server Explorer, add a new Data Connection, select dotConnect for Zoho CRM as the provider, configure OAuth authentication, test the connection, and browse Zoho CRM modules directly from the IDE.

How to Connect a C# ASP.NET Core Blazor Application to Zoho CRM

dotConnect
for Zoho CRM

dotConnect for Zoho CRM

Why dotConnect for Zoho CRM?

Quick and easy integration

User-friendly classes

Advanced ORM support

Interactive OAuth token generation

Full compliance with ADO.NET

Priority support & frequent updates

Download and activate dotConnect for Zoho CRM

30-day free trial version

Start using dotConnect for Zoho CRM in your project today with a free trial

Check Zoho CRM objects

Read Zoho CRM data

Create the AppConfig class

Create a service to connect to Zoho CRM

Register the service in Startup.cs

Add navigation to the Accounts component

Insert new data

Step 1. Create a form in Accounts.razor

Step 2. Add the JavaScript interop functionality to display alerts

Step 3. Create a custom endpoint in Program.cs

Step 4. Update MainLayout.razor

Delete data

Step 1. Update ZohoCrmService.cs to include the Delete method

Step 2. Add a custom endpoint for deleting an account

Step 3. Update Accounts.razor to include Delete buttons

Step 4. Add a JavaScript function to delete an account

Conclusion

FAQ

Dereck Mushingairi

Related articles

Connecting C# to Zoho CRM

Connect C# to Zoho CRM with Entity Framework Core

Zoho CRM CRUD operations in .NET MAUI

How to Connect a C# ASP.NET Core Blazor Application to Zoho CRM

dotConnectfor Zoho CRM

dotConnect for Zoho CRM

Why dotConnect for Zoho CRM?

Quick and easy integration

User-friendly classes

Advanced ORM support

Interactive OAuth token generation

Full compliance with ADO.NET

Priority support & frequent updates

Download and activate dotConnect for Zoho CRM

30-day free trial version

Start using dotConnect for Zoho CRM in your project today with a free trial

Check Zoho CRM objects

Read Zoho CRM data

Create the AppConfig class

Create a service to connect to Zoho CRM

Register the service in Startup.cs

Add navigation to the Accounts component

Insert new data

Step 1. Create a form in Accounts.razor

Step 2. Add the JavaScript interop functionality to display alerts

Step 3. Create a custom endpoint in Program.cs

Step 4. Update MainLayout.razor

Delete data

Step 1. Update ZohoCrmService.cs to include the Delete method

Step 2. Add a custom endpoint for deleting an account

Step 3. Update Accounts.razor to include Delete buttons

Step 4. Add a JavaScript function to delete an account

Conclusion

FAQ

Dereck Mushingairi

Related articles

Connecting C# to Zoho CRM

Connect C# to Zoho CRM with Entity Framework Core

Zoho CRM CRUD operations in .NET MAUI

dotConnect
for Zoho CRM