1. Preface
From last time 《MAUI First experience : Shuang 》 A word has passed 2 It's been months , This plan will be studied in the second half of the year or next year MAUI Of , Now the plan is ahead of schedule , Because I think MAUI Blazor That's interesting : stay Android、iOS、macOS、Windows To share UI, One place UI Add or modify , You can get consistent UI Experience .
Look at this article 《Blazor Hybrid/MAUI Introduction and practice [1]》 Yes MAUI Blazor Explanation :
MAUI
.NET Multi platform applications UI (.NET MAUI) It's a cross platform framework , For the use of C# and XAML Create native mobile and desktop applications , Use .net MAUI, Can be developed in Android、iOS、macOS Applications running on ,Windows And applications running from a single shared code base .
Blazor Hybrid The application and .NET MAUI
Blazor Hybrid Support built-in .NET Multi-platform application UI (.NET MAUI) frame ..NET MAUI contain BlazorWebView Control , The control will run Razor Components are rendered to embedded systems Web View in . By combining .NET MAUI and Blazor, Can span mobile devices 、 Desktop devices and Web Reuse a set of Web UI Components .
Share today how to Blazor Server、Blazor Wasm、MAUI Blazor To share UI The experiment of , This step is complete , It is much more convenient to develop applications later ( Only aim at UI modify ).
2. First, let's experience the final effect of each end
Blazor Server:http://server.dotnet9.com/
Blazor Wasm:http://wasm.dotnet9.com/
MAUI(Android\Windows\macOS):https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.MAUI( Source code self compiled )
Windows desktop 、Blazor Server( On-line )、Blazor Wasm( On-line )、Android effect
iOS、macOS Desktop effects
MAUI There is no experience of publishing files at each end ( You need to publish and sign the corresponding platform ), You can create a project compilation experience according to the following methods .
iOS and macOS Thanks to Qingcheng [2] Picture materials provided , stationmaster mbp Installed the latest macOS,xCode It's also the latest , Maybe because the preview version macOS reason ,xCode Unable to open , Indirectly affected maui compile ?

3. New projects
About MAUI You can refer to this article 《 stay MAUI Use in Masa Blazor》, This article will not introduce environment construction , Use it directly VS 2022 The latest preview project template creates a project .
3.1 establish Blazor Server project :Dotnet9.Server

3.2 establish Blazor WebAssembly project :Dotnet9.Wasm

3.3 establish MAUI Blazor project :Dotnet9.MAUI

3.4 Find common ground
stay 3 The upper level directory of a project , open PowerShell, Input tree /f
View the detailed directory file organization :
Take a closer look at the three template project file structures , We find common files to view :
Folder PATH list
The volume serial number is 76F5-AF62
C:.
│ Dotnet9.sln
│
├─Dotnet9.MAUI
【1 Several files are omitted here 】
│ │
│ ├─Data
│ │ WeatherForecast.cs
│ │ WeatherForecastService.cs
│ │
│ ├─Pages
│ │ Counter.razor
│ │ FetchData.razor
│ │ Index.razor
【2 Several files are omitted here 】
│ │
│ ├─Shared
│ │ MainLayout.razor
│ │ MainLayout.razor.css
│ │ NavMenu.razor
│ │ NavMenu.razor.css
│ │ SurveyPrompt.razor
【3 Several files are omitted here 】
│
├─Dotnet9.Server
│ │ App.razor
【4 Several files are omitted here 】
│ │
│ ├─Data
│ │ WeatherForecast.cs
│ │ WeatherForecastService.cs
│ │
│ ├─Pages
│ │ Counter.razor
│ │ Error.cshtml
│ │ Error.cshtml.cs
│ │ FetchData.razor
│ │ Index.razor
│ │ _Host.cshtml
│ │ _Layout.cshtml
│ │
│ ├─Properties
│ │ launchSettings.json
│ │
│ ├─Shared
│ │ MainLayout.razor
│ │ MainLayout.razor.css
│ │ NavMenu.razor
│ │ NavMenu.razor.css
│ │ SurveyPrompt.razor
【5 Several files are omitted here 】
│
└─Dotnet9.Wasm
【6 Several files are omitted here 】
│
├─Pages
│ Counter.razor
│ FetchData.razor
│ Index.razor
│
├─Properties
│ launchSettings.json
│
├─Shared
│ MainLayout.razor
│ MainLayout.razor.css
│ NavMenu.razor
│ NavMenu.razor.css
│ SurveyPrompt.razor
【7 Several files are omitted here 】
It's found that Data
Contents and Pages
Catalog ( among Wasm Project does not Data Catalog , The example class used is written directly in FetchData.razor
file @code{}
Medium ), Then extract this part of the file directly into the class library , Then do it .
4. extract UI To Razor Class library
establish Razor Class library :Dotnet9.WebApp

Let's start with UI Extraction of

Pictured above , take Dotnet9.MAUI
Project Data
、Pages
、Shared
Three directories plus Main.razor
Cut the file to Dotnet9.WebApp
In the project , Then modify the namespace of the corresponding file after cutting Dotnet9.MAUI[xxx]
by Dotnet9.WebApp[xxx]
, open Dotnet9.WebApp
Project _Import.razor
file , Reference resources Dotnet9.MAUI
Project _Import.razor
File part namespace , Revised as follows :
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared
Some of the namespaces above can be deleted ( No attempt ), compile Dotnet9.WebApp
project , Check to see if it compiles correctly .
5. Modification of each end item
5.1 MAUI project
add to
Dotnet9.WebApp
Project referenceProgram.cs
inusing Dotnet9.MAUI.Data;
Change it tousing Dotnet9.WebApp.Data
Delete
Data
、Pages
、Shared
Three directories plusMain.razor
file , If the previous step is cutting, this step is omittedmodify
_Imports.razor
file , Mainly to addDotnet9.WebApp
Project namespace references
@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.MAUI
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared
MauiProgram.cs
Modify the referenced namespace :using Dotnet9.MAUI.Data;
=>using Dotnet9.WebApp.Data;
open
MainPage.xaml
, Reference modification to routing component namespace
Add namespace xmlns:webApp="clr-namespace:Dotnet9.WebApp;assembly=Dotnet9.WebApp"
, Modify the code as follows :
Before the change :
<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
After modification :
<RootComponent Selector="#app" ComponentType="{x:Type webApp:Main}" />
The modification is complete , Compile operation Dotnet9.MAUI
Project , I'm going to modify Dotnet9.Server
project .
5.2 Blazor Server project
add to
Dotnet9.WebApp
Project referenceProgram.cs
inusing Dotnet9.Server.Data;
Change it tousing Dotnet9.WebApp.Data;
Delete
Data
CatalogDelete
Pages
In the directoryCounter.razor
、FetchData.razor
、Index.razor
Three files ( Including the same name.cs
、.css
file )Delete
Shared
Catalogmodify
_Imports.razor
file , Mainly to addDotnet9.WebApp
Project namespace references
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.Server
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared
open
./Pages/_Host.cshtml
file , Add a namespace reference@using Dotnet9.WebApp
, Modify the code as follows :
Before the change :
<component type="typeof(App)" render-mode="ServerPrerendered" />
After modification :
<component type="typeof(Main)" render-mode="ServerPrerendered" />
The modification is complete , Compile operation Dotnet9.Server
Project , I'm going to modify Dotnet9.Wasm
project .
5.3 Blazor Wasm project
add to
Dotnet9.WebApp
Project referenceDelete
Pages
、Shared
Directory plusApp.razor
fileProgram.cs
inusing Dotnet9.Wasm;
Change it tousing Dotnet9.WebApp;
, Modify the code at the same time
Before the change
builder.RootComponents.Add<App>("#app");
After modification
builder.RootComponents.Add<Main>("#app");
modify
_Imports.razor
file , Mainly to addDotnet9.WebApp
Project namespace references
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.Server
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared
The modification is complete , Compile operation Dotnet9.Wasm
project , So far, the three project templates have been modified , The final solution is shown in the figure below :

6 summary
The summary is shown in the figure below :

Dotnet9.WebApp:blazor Component related code 、 Routing components are placed in this project , For reference by other projects
Dotnet9.Server:Blazor Server The template project
Dotnet9.Wasm:Blazor WebAssembly project
Dotnet9.MAUI:MAUI Blazor project
In a word : take UI Package to Razor Class library Dotnet9.WebApp
, Other terminal works (Dotnet9.Server
、Dotnet9.MAUI
、Dotnet9.Wasm
) Reference this project to realize UI share .
This article code address :https://github.com/dotnet9/Dotnet9[3]
original text :https://dotnet9.com/2022/06/Share-razor-library-between-maui-and-blazor-server-or-client[4]
Reference resources
ASP.NET Community Standup - Native client apps with Blazor Hybrid[5]
Blazor A copy of the code is in Blazor WebAssembly and Blazor Server Any switch between [6]
Microsoft MAUI file [7]
Microsoft Blazor file [8]
learn Blazor[9]
Reference material
[1]
Blazor Hybrid/MAUI Introduction and practice : https://www.cnblogs.com/densen2014/p/16240966.html
[2]Qingcheng students : https://iwscl.com/
[3]https://github.com/dotnet9/Dotnet9: https://github.com/dotnet9/Dotnet9
[4]https://dotnet9.com/2022/06/Share-razor-library-between-maui-and-blazor-server-or-client: https://dotnet9.com/2022/06/Share-razor-library-between-maui-and-blazor-server-or-client
[5]ASP.NET Community Standup - Native client apps with Blazor Hybrid: https://www.youtube.com/watch?v=7UM6s0QPvRQ
[6]Blazor A copy of the code is in Blazor WebAssembly and Blazor Server Any switch between : https://www.bilibili.com/video/BV1ty4y137yA?spm_id_from=333.337.search-card.all.click&vd_source=fc9bd0ca1f113a165ad3ebf4fb79b124
[7]Microsoft MAUI file : https://docs.microsoft.com/zh-cn/dotnet/maui/?WT.mc_id=dotnet-35129-website
[8]Microsoft Blazor file : https://docs.microsoft.com/zh-cn/aspnet/core/blazor/?WT.mc_id=dotnet-35129-website&view=aspnetcore-6.0
[9]learn Blazor: https://dotnet9.com/album/Let-us-learn-blazor-together
版权声明
本文为[Dotnet cross platform]所创,转载请带上原文链接,感谢
https://cdmana.com/2022/174/202206231837225627.html