Exploring Blazor Hybrid Apps Using Mobile Blazor Bindings | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Exploring Blazor Hybrid App using Mobile Blazor Bindings

Exploring Blazor Hybrid Apps Using Mobile Blazor Bindings

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 and 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  which was rolled out on February 17, specially mentions Blazor hybrid apps.

How 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 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!

Syncfusion’s Blazor components suite is the expert’s choice for building modern web apps.

Prerequisites

  1. .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

  1. The Microsoft Edge Canary Channel 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 appThe 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 listThe Blazor core project includes the Blazor components and UI logics for the hybrid application.Blazor core project showing the Blazor components and UI logicsThe Mobile Blazor Bindings project has some default, native Xamarin.Forms controls. 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

  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
    Blazor hybrid default app running on windows

Everything a developer needs to know to use Blazor components in the Blazor app is completely documented.

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 in the Blazor core project. For this example, let’s add the Syncfusion.Blazor.Grid NuGet package.
  4. Now, open the ~/App.cs file in the Blazor core project and add the Syncfusion service in the ConfigureServices section.
    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.
    <!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.
    @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
Syncfusion Blazor DataGrid rendered on Android simulator
Syncfusion Blazor Grid rendered on windows desktop
Syncfusion Blazor DataGrid rendered on windows desktop

Explore the different application UIs developed using Syncfusion Blazor components.

Does Mobile Blazor Bindings work on Syncfusion Xamarin components?

As of now, Syncfusion Xamarin components do not support Mobile Blazor Bindings, but we have logged a feature request for this.

Reference

For more information, you can check out the Exploring Blazor hybrid apps using Mobile Blazor Bindings with Syncfusion Blazor components demo.

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 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 page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features. Also, try our samples from this GitHub location.

You can contact us with questions or comments through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

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

Tags:

Share this post:

Comments (6)

Is it possible to run the same Blazor project in the Web Browser? and how would you do it?

No, It is not possible to run the Mobile Blazor Binding (MBB) project directly in the web browser. The MBB is a hybrid app to run the Blazor components on native desktop and mobile applications.

Hello,
What about MAUI ? MAUI support Blazor. Can we suppose that Syncfusion.Blazor will be usable in MAUI as well ?

Hi MAX,

Yes, our Syncfusion Blazor components can be rendered in .NET 6 MAUI using Visual Studio 2022.

Regards,
Rajendran R

Is it possible to publish our Android app which is we developed with Mobile Blazor Bindings on Google Play Store?

Hi Devrim,

We didn’t try to publish a app which is developed using Mobile Blazor binding yet. The mobile Blazor binding concept introduced to build hybrid mobile apps. Also, the app looks similar to Xamarin app. So, you can publish an app in Google Play Store.

Regards,
Rajendran R.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top