LoginSignup
1
1

.NET MAUIでのBlazor利用

Posted at

はじめに

.NET MAUIでの、Blazor利用についての備忘録

Blazor(ASP.NET Core Blazor)とは

C# と HTML(Razor) でWebアプリケーションが作れるフレームワーク。

Blazor WebAssembly と Blazor Server という 大きく2つの ホスティングモデルが存在。
Blazor Server→サーバーサイドで動作
Blazor WebAssembly→クライアントサイドで動作

.NET MAUIでのBlazor利用

BlazorWebViewによって.NET MAUIでBlazorを実現できる。
Webサーバーを介さないという点でASP.NET Core Blazorと異なる。

.NET MAUI Blazorのプロジェクト作成

Visual Studio で新しいプロジェクトの作成から.NET MAUI Blazorアプリを選択
image.png

.NET MAUIアプリのメイン画面はMainPage.xaml で定義される。

MainPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BlazorWebViewDemo"
             x:Class="BlazorWebViewDemo.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1