Skip to content

Commit c0bb766

Browse files
kmuthukumarmkmkmuthukumarmkm
authored
Merge pull request #6046 from syncfusion-content/BLAZ-940740-MauiHybridWebApp
940740: Added getting started for .NET MAUI Blazor Hybrid and Web App
2 parents f946c18 + b94635e commit c0bb766

File tree

2 files changed

+135
-0
lines changed

2 files changed

+135
-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 App with Blazor 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: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
layout: post
3+
title: Getting Started with .NET MAUI Blazor Hybrid and Web App | Syncfusion
4+
description: Check out the documentation for getting started with .NET MAUI Blazor Hybrid and Blazor 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 Blazor Web App
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 9.0 (Latest .NET SDK 9.0.101 or above)
26+
27+
* The latest preview of Visual Studio 2022 17.3 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-9.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+
## See also
127+
128+
### MAUI Blazor App
129+
130+
* [How to create Diagram Builder in MAUI platform?](https://support.syncfusion.com/kb/article/11346/how-to-create-diagram-builder-in-maui-platform)
131+
132+
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)