编程知识 cdmana.com

Maui shares a set of UI with blazor, which is comparable to that of flutter, and realizes common UI for windows, MacOS, Android, IOS and web

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

cbaebfbb91876a681f08f22372ac0c57.gif

iOS、macOS Desktop effects

12303d8f326c18bbb313ed8cecece356.png

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 ?

f37d0482fec644c0d57d74c3cc118760.png

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

a85a5b682b1f07445da2ff7dba4cb6d8.png

3.2 establish Blazor WebAssembly project :Dotnet9.Wasm

a91d961c5835607a6ed9f8a1731d202b.png

3.3 establish MAUI Blazor project :Dotnet9.MAUI

0fd4985f12ecea54296e1ede0954b35b.png

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 :

d9586ef55a357ae78c121286bf0414bc.gif

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

5771f4f1ce243638a12c8503bcb6a728.png

Let's start with UI Extraction of

5839a63dd4e748807d00b4b0b03fd145.png

Pictured above , take Dotnet9.MAUI Project DataPagesShared 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

  1. add to Dotnet9.WebApp Project reference

  2. Program.cs in using Dotnet9.MAUI.Data; Change it to using Dotnet9.WebApp.Data

  3. Delete DataPagesShared Three directories plus Main.razor file , If the previous step is cutting, this step is omitted

  4. modify _Imports.razor file , Mainly to add Dotnet9.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
  1. MauiProgram.cs Modify the referenced namespace :using Dotnet9.MAUI.Data; => using Dotnet9.WebApp.Data;

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

  1. add to Dotnet9.WebApp Project reference

  2. Program.cs in using Dotnet9.Server.Data; Change it to using Dotnet9.WebApp.Data;

  3. Delete Data Catalog

  4. Delete Pages In the directory Counter.razorFetchData.razorIndex.razor Three files ( Including the same name .cs.css file )

  5. Delete Shared Catalog

  6. modify _Imports.razor file , Mainly to add Dotnet9.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
  1. 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

  1. add to Dotnet9.WebApp Project reference

  2. Delete PagesShared Directory plus App.razor file

  3. Program.cs in using Dotnet9.Wasm; Change it to using Dotnet9.WebApp;, Modify the code at the same time

Before the change

builder.RootComponents.Add<App>("#app");

After modification

builder.RootComponents.Add<Main>("#app");
  1. modify _Imports.razor file , Mainly to add Dotnet9.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 :

f229cb995649e05c6bc3e12f1f367f94.png

6 summary

The summary is shown in the figure below :

7cfb94053f52bb951d61a5d67b5554f7.png
  • 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.ServerDotnet9.MAUIDotnet9.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

  1. ASP.NET Community Standup - Native client apps with Blazor Hybrid[5]

  2. Blazor A copy of the code is in Blazor WebAssembly and Blazor Server Any switch between [6]

  3. Microsoft MAUI file [7]

  4. Microsoft Blazor file [8]

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

Scroll to Top