Exploring Blazor Hybrid App using Mobile Blazor Bindings
Tags: csharp, dotnet, blazor, webdev
Published: 2021-03-23 13:11:15

---
title: Exploring Blazor Hybrid App using Mobile Blazor Bindings
published: true
date: 2021-03-23 12:26:03 UTC
tags: csharp, dotnet, blazor, webdev
canonical_url: https://www.syncfusion.com/blogs/post/blazor-hybrid-apps-using-mobile-blazor-bindings.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Exploring-Blazor-Hybrid-App-using-Mobile-Blazor-Bindings-672x372.png
---

We are in the age of hybrid apps! Single code base, better speed, less development and fewer maintenance costs are some of the benefits of hybrid apps over other native applications. In this blog post, we are going to create a Blazor hybrid app using the [Mobile Blazor Bindings](https://docs.microsoft.com/en-us/mobile-blazor-bindings/ "Link to Microsoft documentation on Experimental Mobile Blazor Bindings") and Syncfusion [Blazor UI components](https://www.syncfusion.com/blazor-components "Link to the Syncfusion Blazor UI components").

The Mobile Blazor Bindings is an experimental project that allows developers to build native desktop and hybrid mobile apps using C# and .NET.

The anticipated [.NET 6.0 preview 1](https://devblogs.microsoft.com/dotnet/announcing-net-6-preview-1/ "Link to the article Announcing .NET 6 Preview 1")  which was rolled-out on February 17, specially mentions [Blazor hybrid apps](https://devblogs.microsoft.com/dotnet/announcing-net-6-preview-1/#blazor-desktop-apps "Link to the article Blazor desktop apps").

## How a Blazor hybrid app works?

A Blazor hybrid app uses the embedded WebView control to render the Blazor and other web contents natively on devices instead of using web browsers like the Electron does in the cross-platform hybrid applications. In other words, the Blazor components are directly rendered in native devices without using WebAssembly.

Mobile Blazor Bindings hosts the Blazor components in a Xamarin.Forms app. That way, the Blazor components will run natively on .NET using Xamarin and the native functionalities can be accessed through .NET API.

Let’s start creating a Blazor hybrid application using Mobile Blazor Bindings and Syncfusion Blazor UI components!

## Prerequisites

1. [.NET SDK 3.1 or Later](https://dotnet.microsoft.com/download/ "Link to download .NET SDK 3.1 or later")
2. Visual Studio with the following workloads:

- ASP.NET and web development.
- Mobile development with .NET.

![Choose ASP.NET and web development and Mobile development with .NET workloads in Visual Studio](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Choose-ASP.NET-and-web-development-and-Mobile-development-with-.NET-workloads-in-Visual-Studio.png)

1. The [Microsoft Edge Canary Channel](https://www.microsoftedgeinsider.com/en-us/download "Link to Microsoft Edge Insider Channels") is essential to run a Blazor hybrid app on Windows.

**Note:** Without this setup, the Blazor hybrid app will not work on Windows.

1. Install the Mobile Blazor Bindings project template using the following command line in the command prompt.  

| `dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.5.50-preview` |

## Creating a Blazor hybrid application

Follow these steps to create a new Blazor hybrid application using .NET CLI.

1. Run this command line to create a new Blazor hybrid application.  

| `dotnet new blazorhybrid -o BlazorHybridApp` |

![Run the command dotnet new blazorhybrid -o BlazorHybridApp to create a Blazor Hybrid app](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Run-the-command-dotnet-new-blazorhybrid-o-BlazorHybridApp-to-create-a-Blazor-Hybrid-app.png)The Blazor hybrid application is now created. You can see the separate projects for Android, iOS, Windows and macOS along with the Blazor core project where the UI logics will be added.  
 ![Solution window showing different projects list](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Solution-window-showing-different-projects-list.png)The Blazor core project includes the Blazor components and UI logics for the hybrid application. ![Blazor core project showing the Blazor components and UI logics](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Blazor-core-project-showing-the-Blazor-components-and-UI-logics.png)The Mobile Blazor Bindings project has some default, native [Xamarin.Forms controls](https://docs.microsoft.com/en-gb/mobile-blazor-bindings/ui/components-reference#built-in-components "Link to Microsoft documentation on Built-in Xamarin components"). You can explore the **~/BlazorHybridApp/Main.razor** file where the native and Blazor WebView controls are rendered.  
 ![The native Xamarin and Blazor WebView controls in Main.razor file](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/The-native-Xamarin-and-Blazor-WebView-controls-in-Main.razor-file.png)

1. Now, set any platform-specific project as the startup project. For example, let’s choose the **BlazorHybridApp.**** Windows** to create a hybrid project in Windows.
2. Then, run the application. It will expose the default native layout like in the below image.

![Blazor hybrid default app running on windows](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Blazor-hybrid-default-app-running-on-windows.png)<figcaption>Blazor hybrid default app running on windows</figcaption>

## Add Syncfusion Blazor components to the Blazor hybrid app

Follow these steps to include Syncfusion Blazor UI components in your Blazor hybrid app:

1. First, open the Blazor core project file ( **BlazorHybridApp.**** csproj**).
2. Then, change the **TargetFramework** from netstandard2.0 to netstandard2.1, since the Syncfusion Blazor components only support netstandard2.1.
3. Install the required Syncfusion individual [Blazor NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages/#available-nuget-packages "Link to Syncfusion Blazor NuGet package") in the Blazor core project. For this example, let’s add the [Syncfusion.Blazor.Grid NuGet](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/ "Link to the Syncfusion.Blazor.Grid NuGet package") package.
4. Now, open the **~/App.cs** file in the Blazor core project and add the Syncfusion service in the **ConfigureServices** section.
```csharp
using Syncfusion.Blazor;

public class App : Application
    {
        public App(IFileProvider fileProvider = null)
        {
            var hostBuilder = MobileBlazorBindingsHost.CreateDefaultBuilder()
                .ConfigureServices((hostContext, services) =>
                {
                    ......
                    ......
                    // Register Syncfusion Blazor service
                    services.AddSyncfusionBlazor();
                })
                .UseWebRoot("wwwroot");

            ......
            ......
        }
        ......
        ......
    }
```
5. Then, add the below Syncfusion CSS style reference in each platform-specific project’s **~/wwwroot/index.html** file.
```html
<!DOCTYPE html>
<html>

<head>
    ......
    ......

    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>
......
......
</html>
```
6. Now, add the Syncfusion Blazor DataGrid (SfGrid) component in the **~/WebUI/Pages/Index.razor** file in the Blazor core project.
```js
@using Syncfusion.Blazor.Grids;

<h1>Syncfusion Blazor Grid component</h1>

<SfGrid DataSource="@Orders" AllowPaging="true">
    <GridPageSettings PageSize="5"></GridPageSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code{
    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}
```
7. Finally, run the application. The Syncfusion Blazor components will render on the native desktop or hybrid mobile layout.

![Syncfusion Blazor Grid rendered on android mobile](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Syncfusion-Blazor-Grid-rendered-on-android-mobile.png)<figcaption>Syncfusion Blazor DataGrid rendered on Android simulator</figcaption>

![Syncfusion Blazor Grid rendered on windows desktop](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Syncfusion-Blazor-Grid-rendered-on-windows-desktop.png)<figcaption>Syncfusion Blazor DataGrid rendered on windows desktop</figcaption>

## Does Mobile Blazor Bindings work on Syncfusion Xamarin components?

As of now, Syncfusion [Xamarin](https://www.syncfusion.com/xamarin-ui-controls "Link to the Xamarin UI controls") components do not support Mobile Blazor Bindings, but we have logged a [feature request](https://www.syncfusion.com/feedback/19885/mobile-blazor-binding-support-for-xamarin-controls "Link to the feature request for Mobile blazor binding support for Xamarin controls in Syncfusion feedback portal") for this.

## Reference

For more information, you can check out the [Exploring Blazor hybrid apps using Mobile Blazor Bindings with Syncfusion Blazor components demo](https://github.com/SyncfusionExamples/mobile-blazor-bindings "Link to Exploring Blazor hybrid apps using Mobile Blazor Bindings with Syncfusion Blazor components demo on GitHub").

## Summary

Thanks for reading! In this blog post, we have learned how to create a Blazor hybrid app using Mobile Blazor Bindings and Syncfusion Blazor UI components. Blazor hybrid apps are still an experimental project and we are eagerly waiting for their full support. What do you think about this blog post? Please leave feedback in the comments section!

Syncfusion’s  [Blazor package](https://www.syncfusion.com/blazor-components "Link to the Syncfusion Blazor UI controls") offers over 65 high-performance, lightweight, and responsive UI components for the web, including file-format libraries, in a single package. Use them to enhance your productivity while developing apps!

For existing customers, the newest version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features. Also, try our samples from this [GitHub](https://github.com/syncfusion "Link to the Syncfusion examples on GitHub") location.

You can contact us with questions or comments through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

If you like this blog post, we think you’ll also like the following articles too:

- [How to Build a Blazor CRUD Application with Dapper](https://dev.to/syncfusion/how-to-build-a-blazor-crud-application-with-dapper-3m44 "Link to the article How to Build a Blazor CRUD Application with Dapper") [Blog]
- [Introducing Individual NuGet Packages for Syncfusion Blazor UI Components](https://dev.to/sureshmohan/introducing-individual-nuget-packages-for-syncfusion-blazor-ui-components-42nc-temp-slug-1418695 "Link to the article Introducing Individual NuGet Packages for Syncfusion Blazor UI Components") [Blog]
- _[Blazor Succinctly](https://www.syncfusion.com/ebooks/blazor-succinctly "Link to the eBook Blazor Succinctly")_ [eBook]
- [_Blazor WebAssembly Succinctly_](https://www.syncfusion.com/ebooks/blazor_webassembly_succinctly "Link to the eBook Blazor WebAssembly Succinctly") [eBook]