Skip to content

Commit a9d09ac

Browse files
SubathraKaliamoorthySubathraKaliamoorthy
committed
940740: Added getting started for .NET MAUI Blazor Hybrid and Web App
1 parent 5c266b3 commit a9d09ac

File tree

2 files changed

+169
-0
lines changed

2 files changed

+169
-0
lines changed

‎blazor-toc.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,9 @@
5858
<li>
5959
<a href="/blazor/getting-started/maui-blazor-app">.NET MAUI Blazor App (Hybrid)</a>
6060
</li>
61+
<li>
62+
<a href="/blazor/getting-started/maui-blazor-web-app">.NET MAUI Blazor Hybrid and Web App</a>
63+
</li>
6164
<li>
6265
<a href="/blazor/getting-started/microsoft-teams-app">Microsoft Teams App</a>
6366
</li>

‎blazor/getting-started/maui-blazor-web-app.md‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
---
2+
layout: post
3+
title: Getting Started with .NET MAUI Blazor Hybrid and Web App in Visual Studio | Syncfusion
4+
description: Check out the documentation for getting started with .NET MAUI Blazor Hybrid and Web App and Syncfusion Blazor Components in Visual Studio and much more.
5+
platform: Blazor
6+
component: Common
7+
documentation: ug
8+
---
9+
10+
# Getting Started with .NET MAUI Blazor Hybrid and Web Application
11+
12+
This section explains how to create and run the first .NET Multi-platform Blazor App UI (.NET MAUI with Blazor Web App) app with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
13+
14+
15+
## What is .NET MAUI Blazor Hybrid and Web App?
16+
17+
.NET MAUI Blazor Web App is a hybrid application that leverages a Razor Class Library (RCL) to define reusable Blazor components. These components are shared between a Blazor WebAssembly or Server app and a .NET MAUI Blazor app. This setup allows developers to create a unified web-based UI and reuse it across mobile, desktop, and browser platforms.
18+
19+
By sharing UI components between native and web apps, this approach ensures consistent user experiences, promotes maximum code reuse, and simplifies maintenance for applications that target multiple environments.
20+
21+
Visual Studio provides **.NET MAUI Blazor Hybrid and Web App** template to create .NET MAUI Blazor Hybrid app with a Blazor Web App.
22+
23+
## Prerequisites
24+
25+
* .NET SDK 7.0 (Latest .NET SDK 7.0.101 or above)
26+
27+
* The latest preview of Visual Studio 2022 17.1 or above, with required workloads:
28+
* [Mobile development with .NET](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?tabs=vswin)
29+
* ASP.NET and web development
30+
31+
## Create a new .NET MAUI Blazor App in Visual Studio
32+
33+
You can create a **.NET MAUI Blazor App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0)
34+
35+
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
36+
37+
Here's an example of how to add **Blazor Calendar** component in the app's shared folder, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
38+
39+
{% tabs %}
40+
{% highlight C# tabtitle="Package Manager" %}
41+
42+
Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }}
43+
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
44+
45+
{% endhighlight %}
46+
{% endtabs %}
47+
48+
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
49+
50+
## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
51+
52+
Open **~/_Imports.razor** file in both `.Maui` and `.Web` App and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
53+
54+
```cshtml
55+
56+
@using Syncfusion.Blazor
57+
@using Syncfusion.Blazor.Calendars
58+
59+
```
60+
61+
Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both the `MauiProgram.cs` file of your MAUI Blazor App and `~/Program.cs` file of your Blazor Web App.
62+
63+
{% tabs %}
64+
{% highlight C# tabtitle="~/MauiProgram.cs" hl_lines="1 4" %}
65+
66+
using Syncfusion.Blazor;
67+
....
68+
builder.Services.AddMauiBlazorWebView();
69+
builder.Services.AddSyncfusionBlazor();
70+
....
71+
72+
{% endhighlight %}
73+
{% highlight C# tabtitle="~/Program.cs" hl_lines="1 8" %}
74+
75+
using Syncfusion.Blazor;
76+
77+
var builder = WebApplication.CreateBuilder(args);
78+
79+
// Add services to the container.
80+
builder.Services.AddRazorComponents()
81+
.AddInteractiveServerComponents();
82+
builder.Services.AddSyncfusionBlazor();
83+
....
84+
85+
{% endhighlight %}
86+
{% endtabs %}
87+
88+
## Add stylesheet and script resources
89+
90+
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `<head>` of the **~wwwroot/index.html** file of your MAUI Blazor App and **~/Components/App.razor file** of your Blazor Web App.
91+
92+
```html
93+
<head>
94+
....
95+
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
96+
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
97+
</head>
98+
```
99+
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
100+
101+
## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component
102+
103+
Now add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component in any razor file. Here, the Calendar component is added in `~/Pages/Home.razor` page under the `~/Pages` folder of your `.Shared` App .
104+
105+
{% tabs %}
106+
{% highlight razor %}
107+
108+
@using Syncfusion.Blazor.Calendars
109+
110+
<SfCalendar TValue="DateTime"></SfCalendar>
111+
112+
{% endhighlight %}
113+
{% endtabs %}
114+
115+
In the Visual Studio toolbar, select the **Windows Machine** button to build and run the `.Maui` app.
116+
Before running the sample, make sure the mode is `Windows Machine`. Also to build and run the `.Web` app, select the **IIS Express** button.
117+
118+
![Build and run MAUI Blazor App](images/maui/windows-machine-mode.png)
119+
120+
N> If you want to run the application in Android or iOS refer [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0#run-the-app-in-the-android-emulator) for the setup.
121+
122+
![MAUI Blazor App with Syncfusion Blazor Components](images/maui/maui-blazor-calendar.png)
123+
124+
N> Download demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-Hybrid-with-Blazor-Web-App-using-Syncfuion-Blazor-Components)
125+
126+
### How to solve deployment errors in Windows?
127+
128+
If you get error dialog like "There were deployment errors", Enable developer mode. For more details refer [Enable your device for development](https://learn.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development).
129+
130+
![Enable developer mode in system settings](images/maui/enable-developer-mode.png)
131+
132+
<hr/>
133+
134+
### How to solve deployment errors in iOS?
135+
136+
In iOS code is statically compiled ahead of time, so, configure Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor assemblies in `MtouchExtraArgs` tag for the iOS Release configuration in the project when deploy on a real device.
137+
138+
Below are possible errors if `MtouchExtraArgs` tag is not configured,
139+
1. App won't load on real device with error "An unhandled error has occurred" after you compile in Release mode with Visual Studio and deploy to real device.
140+
2. AOT related failures like [`Attempting to JIT compile method while running in aot-only mode`](https://github.com/xamarin/xamarin-macios/issues/12416)
141+
142+
```
143+
<PropertyGroup Condition="$(TargetFramework.Contains('-ios')) And $(Configuration.Contains('Release')) ">
144+
<UseInterpreter>true</UseInterpreter>
145+
<MtouchExtraArgs>--linkskip=Syncfusion.Blazor.Themes --linkskip=Syncfusion.Blazor.Inputs</MtouchExtraArgs>
146+
</PropertyGroup>
147+
```
148+
149+
Reference:
150+
* [Could not AOT the assembly of my App](https://learn.microsoft.com/en-us/answers/questions/396055/could-not-aot-the-assembly-of-my-app)
151+
152+
<hr/>
153+
154+
### How to solve "The project doesn't know how to run the profile Windows Machine" while running MAUI Blazor App?
155+
156+
* This issue has been fixed in most recent release of Visual Studio. For more details refer [here](https://developercommunity.visualstudio.com/t/the-project-doesnt-know-how-to-run-the-profile-win/1530395).
157+
158+
* You can also fix this error by installing [Single-project MSIX Packaging Tools](https://marketplace.visualstudio.com/items?itemName=ProjectReunion.MicrosoftSingleProjectMSIXPackagingToolsDev17).
159+
160+
## See also
161+
162+
### MAUI Blazor App
163+
164+
* [How to create Diagram Builder in MAUI platform?](https://support.syncfusion.com/kb/article/11346/how-to-create-diagram-builder-in-maui-platform)
165+
166+
N> [View MAUI Blazor Diagram Builder Source Code in GitHub](https://github.com/syncfusion/blazor-showcase-diagram-builder/tree/master/MAUI)

0 commit comments

Comments
 (0)