blazor maui hybrid and webapp
Hello, with the latest release of dotnet, there is a "new" project: .NET MAUI Blazor Hybrid and Web App.
Once created, there is 3 projects in the solution with a MAUI Blazor Hybrid app and a blazor web app and a shared library.
Is it possible to use syncfusion in the shared library and be rendered in both the hybrid and web app?
Thanks for your time.
SIGN IN To post a reply.
3 Replies
Hi Guillaume Bodson,
Here’s how you can integrate Syncfusion Blazor components into a .NET 9 MAUI Blazor Hybrid and Web App project:
Project Overview
- .Shared Project: This is the shared library that contains reusable Razor components. It allows you to maximize code reuse across both the .NET MAUI app and the Blazor Web App.
- .Web Project: This is the Blazor Web App project, which runs in a web browser using interactive rendering.
- .NET MAUI Project: The project that has the same name as the solution is the .NET MAUI project. This is the main .NET MAUI project, which includes configurations for targeting multiple platforms, such as Android, iOS, and Windows.
Steps to Add Syncfusion Blazor Components
- Install Syncfusion Blazor Packages in the .Shared Project
Install the Syncfusion.Blazor.Navigations and Syncfusion.Blazor.Themes NuGet package in the .Shared project so the components can be used in both the .NET MAUI and Blazor Web App projects. - Add a Syncfusion Component in the Shared Pages
Add the Syncfusion Accordion component (or any other component) to the Pages/Home.razor file in the .Shared project:
| @using Syncfusion.Blazor.Navigations
<SfAccordion>
<AccordionItems>
<AccordionItem Header="Margeret Peacock" Content="Margeret Peacock was born on Saturday , 01 December 1990. Now lives at Coventry House Miner Rd., London,UK. Margeret Peacock holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem>
<AccordionItem Header="Laura Callahan" Content="Laura Callahan was born on Tuesday , 06 November 1990. Now lives at Edgeham Hollow Winchester Way, London,UK. Laura Callahan holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem>
<AccordionItem Header="Albert Dodsworth" Content="Albert Dodsworth was born on Thursday , 19 October 1989. Now lives at 4726 - 11th Ave. N.E., Seattle,USA.Albert Dodsworth holds a position of Sales Representative in our WA department, (Seattle USA). Joined our company on Friday , 01 May 2009"></AccordionItem>
</AccordionItems>
</SfAccordion> |
Configure for Blazor Web App
- Register Syncfusion Blazor Services
In the Program.cs file of the .Web project, register Syncfusion Blazor services:
| using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor();
.... |
- Add Stylesheet and Script References
Include the required CSS and script references in the <head> and <body> sections of the Components/App.razor file in the .Web project:
| <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> |
Configure for .NET MAUI App
- Register Syncfusion Blazor Services
In the MauiProgram.cs file of the .NET MAUI project, add the Syncfusion Blazor service:
| using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor(); |
- Add Stylesheet and Script References
Include the required CSS and script references in the <head> and <body> sections of the wwwroot/index.html file in the .NET MAUI project:
| <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> |
Running the Application
- To run the Blazor Web App: Launch the .Web project.
- To run the .NET MAUI App: Launch the .NET MAUI project.
I have attached the sample below. If you have any additional questions, feel free to reach out. We're here to assist!
Regards,
Arun Kumar R
Attachment: BlazorMAUIHybridSyncfusionSample_64e7ebfd.zip
SIGN IN To post a reply.
